Динамический URL-адрес с помощью AngularJS

У меня есть простая форма с полем ввода и кнопкой отправки. Это словарь, где пользователь вводит слово в поле ввода и нажимает кнопку, которая запускает метод JQuery. Этот метод, он превращает API-интерфейс (Merriam-Webster) через серверный PHP и заполняет div (#meaning) возвращенными данными.Динамический URL-адрес с помощью AngularJS

В настоящее время я делаю это с помощью JQuery, что означает, что div обновляется без обновления страницы, которое является сладким. Однако это не изменяет URL. Мне нужно, чтобы URL-адрес динамически менялся каждый раз, когда выполняется новый поиск. Например, если вы введете "кошку" и ударили Lookup, то URL должен измениться на что-то вроде:

.../словаря/кошка

В настоящем время, это только остается:

.../словарь

Если каким-то образом, я могу повторить изменения URL в то же время избежать полного обновления страницы, пользователей будет иметь возможность закладки конкретного значения напрямую, без необходимости искать его каждый раз, когда это необходимо. Я пробовал читать Angular JS для работы, но я изо всех сил стараюсь пройти. Моя текущая реализация Angular - это та, где у меня разные документы HTML для разных видов (например,/about,/contact и т. Д.). Но в этой конкретной ситуации, как я могу получить предварительно сделанный документ, когда запросы запускаются «на лету»? Какие-либо предложения?

Не уверен, что я сформулировал вопрос достаточно хорошо. Пожалуйста, не стесняйтесь спрашивать меня о каких-либо особенностях, если это необходимо. Я изо всех сил пытаюсь понять это, но если вы посмотрите на словарную службу сайтов, например SpanishDict, вы поймете, чего я пытаюсь достичь.

Мне не нужно писать код для меня. Мне просто нужно общее представление о том, как это сделать, логично, и что нужно использовать. Если не Angular JS, я открыт для создания более подходящей структуры.

источник

2015-12-07 TheLearner

Похоже, вы хотите добавить ngRoute в свое приложение. Вы можете see an example here.

Из документов:

angular.module('ngRouteExample', ['ngRoute']) 
    .config(function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/Book/:bookId/ch/:chapterId', { 
      templateUrl: 'chapter.html', 
      controller: 'ChapterController' 
     });

В этом примере :bookId и :chapterId переменные, которые принимают их значение из URL. Например, с /Book/MobyDick/ch/7, bookId будет «MobyDick», а chapterId будет «7».

В вашем случае, гиперссылка в когда функция, возможно, выглядит следующим образом:

when('/dictionary/:word', { 
    templateUrl: 'yourTemplate.html', // optional 
    controller: 'yourController' // optional 
})

источник

2015-12-07 23:14:45 jperezov

Я пытался что-то подобное и получил ошибку на «:» бит. Я назвал свою переменную $ scope 'term' так используемой' .when ('/ dictionary /: term', { title: 'Значение' +: term, controller: 'dictController' }) 'Even' {{term }} 'failed. – TheLearner

@TheLearner Если у вас есть '.when ('dictionary /: term')', тогда вы получаете доступ к нему с $ routeParams.term'.Вы также должны ввести '$ routeParams' в свой контроллер. – jperezov

Вы делаете это неправильно. Не пытайтесь обновить URL после поиска. Вместо этого поиск должен просто привести вас к новому URL-адресу и позволить логике оттуда, используя переменную маршрута.

источник

2015-12-07 23:12:23 Jorg

Динамический URL-адрес с помощью AngularJS

ответ

Смежные вопросы