Пример маршрутизации AngularJS с параметрами

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

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

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

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

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

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

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

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-адрес остается прежним.

Добавление маршрута AngularJS с использованием $routeProvider

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

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

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

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

var module = angular.module("sampleApp", ['ngRoute']);
  1. Следующим шагом будет настройка вашего $routeProvider. Это необходимо для предоставления различных маршрутов в вашем приложении. Ниже приведен общий синтаксис этого оператора, который не требует пояснений. В нем просто говорится, что при выборе соответствующего пути используйте маршрут для отображения данного представления пользователю.
when(path, route)
  1. Ссылки на ваш маршрут на вашей HTML-странице. На своей HTML-странице вы добавите справочные ссылки на различные доступные маршруты в вашем приложении.
<a href="#/route1">Route 1</a><br/>
  1. Наконец, было бы включение директива ng-view, который обычно находится в теге div. Это будет использоваться для ввода содержимого представления при выборе соответствующего маршрута.

Пример маршрутизации AngularJS

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

В нашем примере маршрутизации AngularJS с параметрами:

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

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

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

Маршрутизация AngularJS

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

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

Маршрутизация AngularJS

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

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

Маршрутизация AngularJS

Шаг 4) В тег скрипта для AngularJS добавьте «модуль ngRoute» и сервис «$routeProvider».

Маршрутизация AngularJS

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

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

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

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

Маршрутизация AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

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

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

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

Маршрутизация AngularJS

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
  • Узел.html

Маршрутизация AngularJS

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

Маршрутизация AngularJS

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

Маршрутизация AngularJS

Результаты ясно показывают, что

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

Маршрутизация AngularJS

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

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

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

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

otherwise ({
    redirectTo: 'page'
});

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

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

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

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

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

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

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

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

Из вывода,

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

Как получить доступ к параметрам из маршрута AngularJS

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

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

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

HTMLPage#/маршрут/параметр

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

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

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

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

Давайте подробно рассмотрим, как мы можем реализовать маршрут Angular с параметром:

Шаг 1) Добавьте следующееwing код на ваш взгляд

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

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

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

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

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

  • Если вы нажмете на тему Details ссылку на первую тему, к URL-адресу добавляется цифра 1.
  • Затем это число будет использовано в качестве аргумента «routeparam» службой маршрутизации Angular.JS, и наш контроллер сможет получить к нему доступ.

Как использовать службу Angular $route

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

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

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

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

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

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

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

Угловая служба $route

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

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

Угловая служба $route

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

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

Это приведет к тому, что в представление будет добавлен текст «Это угловой». Выражение {{tutorialid}} такое же, как и в предыдущем разделе, и оно отображает число «1».

Угловая служба $route

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

Угловая служба $route

Из вывода,

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

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

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

Образец.html/Angular/1

Образец.html/Angular/2

Образец.html/Angular/3

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Если код выполнен успешно, тоwing Вывод будет показан, когда вы запустите свой код в браузере.

Вывод:

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

Из вывода,

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

Итоги

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