15) Маршрутизация с параметрами

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

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

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

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

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

Маршруты AngularJS позволяют вам создавать разные URL для разного контента в вашем приложении.
Маршруты AngularJS позволяют показывать несколько контентов в зависимости от того, какой маршрут выбран.
Маршрут указывается в 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-странице, чтобы у пользователя было впечатление, что он не покинул страницу.

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

Ссылка на angular-route.js. Это файл JavaScript, разработанный 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. Это будет использоваться для добавления содержимого представления при выборе соответствующего маршрута.

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

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

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

Одним из них является отображение тем для курса Angular 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 использует для фонового прослушивания вызываемых маршрутов. Поэтому, когда пользователь щелкает ссылку, поставщик маршрутов обнаружит это и решит, какой маршрут выбрать.
Создать один маршрут для угловой ссылки — этот блок означает, что при нажатии на угловую ссылку внедрить файл Angular.html, а также использовать контроллер AngularController для обработки любой бизнес-логики.
Создать один маршрут для ссылки на узел. Этот блок означает, что при щелчке по ссылке на узел внедрить файл 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 для прохождения каждой пары ключ-значение, определенной в учебной переменной.
Отображение имени и описания каждой пары ключ-значение.

Angular.html

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

Node.html

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

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

Вывод:

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

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

При нажатии на ссылку «Angular JS Topics», routeProvider, который мы объявили в нашем коде, решает, что код Angular.html должен быть введен.
Этот код будет вставлен в тег «div», который содержит директиву ng-view. Кроме того, содержимое описания курса происходит из «учебной переменной», которая была частью объекта области действия, определенного в AngularController.
Если щелкнуть « Темы Node.js» , произойдет тот же результат, и откроется представление тем Node.js.
Также обратите внимание, что URL-адрес страницы остается прежним, меняется только маршрут после тега #. И это концепция одностраничных приложений. Тег #hash в URL-адресе является разделителем, который разделяет маршрут (который в нашем случае является «угловым», как показано на рисунке выше) и главную страницу 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'
});
}]);

Объяснение кода:

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

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

Вывод:

Из вывода

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

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

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

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

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

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

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

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

Sample.html # / Угловая / 1

Sample.html # / Угловая / 2

Sample.html # / Угловая / 3

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

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

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

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

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

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

Обязательно сначала добавьте «$ routeParams» в качестве параметра при определении функции контроллера. Этот параметр будет иметь доступ ко всем параметрам маршрута, переданным в URL.
Параметр «routeParams» имеет ссылку на объект topicId, который передается в качестве параметра маршрута. Здесь мы присоединяем переменную ‘$ 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}}

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

Вывод:

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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, будут выглядеть так, как показано ниже

Sample.html / Угловая / 1

Sample.html / Угловая / 2

Sample.html / Угловая / 3

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

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

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

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

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

Добавить константу 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-адреса маршрутизации под углом, чтобы сформировать красивый URL

15) Маршрутизация с параметрами

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

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

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

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

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

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

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

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности