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

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

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

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

Что такое маршрутизация в 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-адрес остается прежним.

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

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

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

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

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

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

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

when(path, route)

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

<a href="#/route1">Route 1</a><br/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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. Для каждой страницы мы выполняем следующие шаги.

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

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

Угловой.html

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

Узел.html

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

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

Вывод:

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

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

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

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

Маршрутизация в 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'
});
}]);

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

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

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

Вывод:

Из вывода,

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

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

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

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

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

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

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

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

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

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

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

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

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

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

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

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

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

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

Вывод:

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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».

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

Вывод:

Из вывода,

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>

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

Вывод:

Из вывода,

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

Итого

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

Вы могли бы:

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

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

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

СТАТЬИ ПО ТЕМЕ

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

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

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

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

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

Итого