Маршрутизация AngularJS с параметрами: пример одностраничного приложения

Прежде чем мы начнем с маршрутизации, давайте просто кратко рассмотрим одностраничные приложения.

Что такое одностраничные приложения?

Одностраничные приложения или (SPA) - это веб-приложения, которые загружают одну HTML-страницу и динамически обновляют страницу в зависимости от взаимодействия пользователя с веб-приложением.

Что такое маршрутизация в AngularJS?

В AngularJS маршрутизация - это то, что позволяет вам создавать одностраничные приложения.

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

Давайте возьмем пример сайта, который размещен по URL-адресу http://example.com/index.html .

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

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Символ # будет использоваться вместе с различными маршрутами (ShowEvent, DisplayEvent и DeleteEvent).

• Поэтому, если пользователь хочет увидеть все события, они будут перенаправлены по ссылке ( http://example.com/index.html#ShowEvent ), иначе
• Если бы они хотели просто увидеть конкретное событие, они были бы перенаправлены на ссылку ( http://example.com/index.html#DisplayEvent ) или
• Если они захотят удалить событие, они будут перенаправлены по ссылке http://example.com/index.html#DeleteEvent .

Обратите внимание, что основной URL-адрес остается прежним.

В этом руководстве вы узнаете:

• Добавление углового маршрута ($ routeProvider)
• Создание маршрута по умолчанию
• Доступ к параметрам из маршрута
• Использование сервиса Angular $ route
• Включение маршрутизации HTML5

Добавление углового маршрута ($ routeProvider)

Итак, как мы обсуждали ранее, маршруты в AngularJS используются для перенаправления пользователя в другое представление вашего приложения. И эта маршрутизация выполняется на той же HTML-странице, чтобы пользователь чувствовал, что он не покинул страницу.

Чтобы реализовать маршрутизацию, в вашем приложении должны быть реализованы следующие основные шаги в любом определенном порядке.

1. Ссылка на angular-route.js. Это файл JavaScript, разработанный Google, который имеет все функции маршрутизации. Его необходимо разместить в вашем приложении, чтобы оно могло ссылаться на все основные модули, необходимые для маршрутизации.

2. Следующим важным шагом является добавление зависимости к модулю ngRoute из вашего приложения. Эта зависимость требуется для использования функций маршрутизации в приложении. Если эта зависимость не добавлена, то нельзя будет использовать маршрутизацию в приложении angular.JS.

   Ниже приведен общий синтаксис этого оператора. Это обычное объявление модуля с включением ключевого слова ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Следующим шагом будет настройка вашего $ routeProvider. Это необходимо для предоставления различных маршрутов в вашем приложении.

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

when(path, route)

4. Ссылки на ваш маршрут на вашей HTML-странице. На своей HTML-странице вы добавите справочные ссылки на различные доступные маршруты в вашем приложении.

 Маршрут 1 

5. Наконец, будет включение директивы ng-view, которая обычно находится в теге div. Это будет использоваться для внедрения содержимого представления при выборе соответствующего маршрута.

Теперь давайте посмотрим на пример маршрутизации с использованием вышеупомянутых шагов.

В нашем примере

Мы представим пользователю 2 ссылки,

• Один предназначен для отображения тем для курса Angular JS , а другой - для курса Node.js.
• Когда пользователь щелкает любую ссылку, отображаются темы этого курса.

Шаг 1) Включите файл angular-route в качестве ссылки на скрипт.

Этот файл маршрута необходим для использования функций наличия нескольких маршрутов и представлений. Этот файл можно скачать с сайта angular.JS.

Шаг 2) Добавьте теги href, которые будут представлять ссылки на «Angular JS Topics» и «Node JS Topics».

Шаг 3) Добавьте тег div с директивой ng-view, которая будет представлять представление.

Это позволит внедрять соответствующее представление всякий раз, когда пользователь нажимает на «Angular JS Topics» или «Node JS Topics».

Шаг 4) В теге сценария для AngularJS добавьте модуль ngRoute и службу $ routeProvider.

Пояснение к коду:

1. Первый шаг - убедиться, что включен «модуль ngRoute». После этого Angular будет автоматически обрабатывать маршрутизацию в вашем приложении. Модуль ngRoute, разработанный Google, обладает всеми функциями, которые позволяют выполнять маршрутизацию. При добавлении этого модуля приложение автоматически распознает все команды маршрутизации.
2. $ Routeprovider - это служба, которую angular использует для прослушивания в фоновом режиме вызываемых маршрутов. Поэтому, когда пользователь щелкает ссылку, провайдер маршрута обнаруживает это и затем решает, по какому маршруту выбрать.
3. Создайте один маршрут для ссылки Angular - этот блок означает, что при нажатии ссылки Angular вставьте файл Angular.html, а также используйте контроллер AngularController для обработки любой бизнес-логики.
4. Создайте один маршрут для ссылки на узел - этот блок означает, что при нажатии ссылки на узел вводится файл Node.html, а также используется контроллер «NodeController» для обработки любой бизнес-логики.

Шаг 5) Затем нужно добавить контроллеры для обработки бизнес-логики как для AngularController, так и для NodeController.

В каждом контроллере мы создаем массив пар "ключ-значение" для хранения названий и описаний тем для каждого курса. Переменная массива "tutorial" добавляется к объекту области видимости для каждого контроллера.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Шаг 6) Создайте страницы с именами Angular.html и Node.html. Для каждой страницы мы выполняем следующие шаги.

Эти шаги гарантируют, что все пары "ключ-значение" массива будут отображаться на каждой странице.

1. Использование директивы ng-repeat для просмотра каждой пары ключ-значение, определенной в переменной учебника.
2. Отображение имени и описания каждой пары "ключ-значение".

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

Если вы нажмете на ссылку AngularJS Topics, отобразится вывод ниже.

Вывод ясно показывает, что,

• Когда щелкают ссылку «Angular JS Topics», routeProvider, который мы объявили в нашем коде, решает, что нужно внедрить код Angular.html.
• Этот код будет вставлен в тег «div», который содержит директиву ng-view. Кроме того, содержание описания курса поступает из «переменной учебника», которая была частью объекта области видимости, определенного в AngularController.
• Когда вы щелкаете по темам Node.js, будет получен тот же результат, и отобразится представление тем Node.js.
• Также обратите внимание, что URL-адрес страницы остается прежним, изменяется только маршрут после тега #. И это концепция одностраничных приложений. Тег #hash в URL-адресе является разделителем, который разделяет маршрут (который в нашем случае - Angular, как показано на изображении выше) и главную HTML-страницу (Sample.html).

Создание маршрута по умолчанию

Маршрутизация в AngularJS также предоставляет возможность иметь маршрут по умолчанию. Это маршрут, который выбирается, если нет совпадений с существующим маршрутом.

Маршрут по умолчанию создается путем добавления следующего условия при определении службы $ routeProvider.

Приведенный ниже синтаксис просто означает перенаправление на другую страницу, если какой-либо из существующих маршрутов не соответствует.

otherwise ({redirectTo: 'page'});

Давайте воспользуемся тем же примером, приведенным выше, и добавим маршрут по умолчанию в нашу службу $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Пояснение к коду:

1. Здесь мы используем тот же код, что и выше, с той лишь разницей, что мы используем оператор else и параметр «redirectTo», чтобы указать, какое представление должно быть загружено, если не указан маршрут. В нашем случае мы хотим, чтобы отображалось представление «/ Angular».

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

На выходе

• Вы можете ясно видеть, что показанное по умолчанию представление - это угловое представление JS.
• Это связано с тем, что при загрузке страницы она переходит к опции «иначе» в функции $ routeProvider и загружает представление «/ Angular».

Доступ к параметрам из маршрута

Angular также предоставляет функциональные возможности для предоставления параметров во время маршрутизации. Параметры добавляются в конец маршрута в URL-адресе, например http: //guru99/index.html#/Angular/1 . В этом примере

1. , http: //guru99/index.html - это наш основной URL-адрес приложения.
2. Символ # является разделителем между основным URL-адресом приложения и маршрутом.
3. Angular - это наш путь
4. И, наконец, «1» - это параметр, который добавляется к нашему маршруту.

Синтаксис того, как параметры выглядят в URL-адресе, показан ниже:

HTMLPage # / route / параметр

Здесь вы заметите, что параметр передается после маршрута в URL-адресе.

Итак, в нашем примере выше для тем Angular JS мы можем передать параметр, как показано ниже.

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Здесь параметры 1, 2 и 3 могут фактически представлять topicid.

Давайте подробно рассмотрим, как это можно реализовать.

Шаг 1) Добавьте в представление следующий код

1. Добавьте таблицу, чтобы показать пользователю все темы курса Angular JS

2. Добавьте в таблицу строку для отображения темы «Контроллеры». Для этой строки измените тег href на «Angular / 1», что означает, что когда пользователь щелкает эту тему, параметр 1 будет передан в URL вместе с маршрутом.

3. Добавьте строку таблицы для отображения темы «Модели». Для этой строки измените тег href на «Angular / 2», что означает, что когда пользователь щелкает эту тему, параметр 2 будет передан в URL вместе с маршрутом.

4. Добавьте строку таблицы для отображения темы «Директивы». Для этой строки измените тег href на «Angular / 3», что означает, что когда пользователь щелкает эту тему, параметр 3 будет передан в URL вместе с маршрутом.

Шаг 2) В сервисной функции routeprovider добавьте: topicId, чтобы обозначить, что любой параметр, переданный в URL-адресе после маршрута, должен быть назначен переменной topicId.

Шаг 3) Добавьте необходимый код в контроллер

1. Обязательно сначала добавьте «$ routeParams» в качестве параметра при определении функции контроллера. Этот параметр будет иметь доступ ко всем параметрам маршрута, переданным в URL-адресе.
2. Параметр routeParams имеет ссылку на объект topicId, который передается как параметр маршрута. Здесь мы присоединяем переменную $ routeParams.topicId к нашему объекту области как переменную $ scope.tutotialid. Это делается для того, чтобы на него можно было ссылаться в нашем представлении через переменную tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Шаг 4) Добавьте выражение для отображения переменной tutorialid на странице Angular.html.

Anguler


{{tutorialid}}

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

На экране вывода

• Если вы щелкнете ссылку «Сведения о теме» для первой темы, к URL-адресу будет добавлена ​​цифра 1.
• Этот номер затем будет принят службой Routeprovider Angular.JS в качестве аргумента «routeparam» и затем будет доступен нашему контроллеру.

Использование сервиса Angular $ route

Сервис $ route позволяет получить доступ к свойствам маршрута. Сервис $ route доступен как параметр, если функция определена в контроллере. Общий синтаксис того, как параметр $ route доступен из контроллера, показан ниже;

myApp.controller('MyController',function($scope,$route)

1. myApp - это модуль angular.JS, определенный для ваших приложений.
2. MyController - это имя контроллера, определенного для вашего приложения.
3. Точно так же, как переменная $ scope доступна для вашего приложения, которое используется для передачи информации от контроллера в представление. Параметр $ route используется для доступа к свойствам маршрута.

Давайте посмотрим, как мы можем использовать сервис $ route.

В этом примере

• Мы собираемся создать простую настраиваемую переменную под названием «mytext», которая будет содержать строку «Это угловой».
• Мы собираемся присоединить эту переменную к нашему маршруту. А позже мы собираемся получить доступ к этой строке из нашего контроллера с помощью службы $ route, а затем использовать объект области для отображения этого в нашем представлении.

Итак, давайте посмотрим, что нам нужно сделать, чтобы этого добиться.

Шаг 1. Добавьте в маршрут настраиваемую пару "ключ-значение". Здесь мы добавляем ключ под названием mytext и присваиваем ему значение «This is angular».

Шаг 2) Добавьте соответствующий код в контроллер

1. Добавьте параметр $ route к функции контроллера. Параметр $ route - это ключевой параметр, определенный в angular, который позволяет получить доступ к свойствам маршрута.
2. Переменная mytext, которая была определена в маршруте, доступна через ссылку $ route.current. Затем он присваивается переменной text объекта области видимости. Затем текстовая переменная может быть доступна из представления соответственно.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Шаг 3) Добавьте ссылку на текстовую переменную из объекта области в виде выражения. Он будет добавлен на нашу страницу Angular.html, как показано ниже.

Это приведет к тому, что текст "This is angular" будет вставлен в представление. Выражение {{tutorialid}} такое же, как и в предыдущем разделе, и в нем будет отображаться число «1».

Anguler


{{text}}

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

На выходе

• Мы видим, что текст «Это угловой» также отображается, когда мы нажимаем на любую из ссылок в таблице. Идентификатор темы также отображается одновременно с текстом.

Включение маршрутизации HTML5

Маршрутизация HTML5 используется в основном для создания чистого URL-адреса. Это означает удаление хэштега из URL. Таким образом, URL-адреса маршрутизации при использовании маршрутизации HTML5 будут выглядеть, как показано ниже.

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Эта концепция обычно известна как представление пользователю красивого URL-адреса.

Есть 2 основных шага, которые необходимо выполнить для маршрутизации HTML5.

1. Настройка $ locationProvider
2. Установка нашей базы для относительных ссылок

Давайте подробно рассмотрим, как выполнить вышеупомянутые шаги в нашем примере выше.

Шаг 1) Добавьте соответствующий код в модуль angular

1. Добавьте в приложение константу baseURL - это необходимо для маршрутизации HTML5, чтобы приложение знало, каково базовое местоположение приложения.
2. Добавьте сервисы $ locationProvider. Этот сервис позволяет вам определять html5Mode.
3. Установите для html5Mode службы $ locationProvider значение true.

Шаг 2) Удалите все теги # для ссылок ('Angular / 1', 'Angular / 2', 'Angular / 3'), чтобы создать легко читаемый URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.

Выход:

На выходе

• Вы можете видеть, что тег # отсутствует при доступе к приложению.

Резюме

• Маршрутизация используется для представления пользователю разных представлений на одной и той же веб-странице. Это в основном концепция, используемая в одностраничных приложениях, которые реализованы почти для всех современных веб-приложений.
• Маршрут по умолчанию может быть настроен для маршрутизации angular.JS. Он используется для определения того, какое представление будет отображаться по умолчанию для пользователя.
• Параметры могут быть переданы в маршрут через URL-адрес в качестве параметров маршрута. Затем эти параметры доступны с помощью параметра $ routeParams в контроллере.
• Сервис $ route может использоваться для определения пользовательских пар "ключ-значение" в маршруте, к которым впоследствии можно будет получить доступ из представления.
• Маршрутизация HTML5 используется для удаления тега #tag из URL-адреса маршрутизации в angular, чтобы сформировать красивый URL-адрес.