Динамический URL с использованием AngularJS

Question

Динамический URL с использованием AngularJS

0

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

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

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

В настоящее время он просто остается:

.../Словарь

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

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

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

TheLearner 08 дек. 2015, в 00:34

Источник

Теги:

javascript

jquery

angularjs

url

2 ответа

1

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

Jorg 07 дек. 2015, в 21:56

Ещё вопросы

jperezov · Accepted Answer · 2015-12-07T21-58-00.000Z

Похоже, вы хотите добавить ngRoute в свое приложение. Здесь вы можете увидеть пример.

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

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".

В вашем случае URL-адрес функции if может выглядеть так:

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

Я попробовал нечто подобное и получил ошибку ":". Я назвал свою переменную $ scope переменной term .when('/dictionary/:term', { title: 'Meaning of ' + :term, controller : 'dictController' }) Даже {{term}} не удалось.
@TheLearner Если у вас есть .when('dictionary/:term') , то вы $routeParams.term к нему доступ с помощью $routeParams.term . Вы также должны ввести $routeParams в свой контроллер.