Приклад маршрутизації 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. Це 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. Це буде використано для введення вмісту перегляду, коли вибрано відповідний маршрут.

Приклад маршрутизації 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 module» і службу «$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 для проходження кожної пари ключ-значення, визначеної в навчальній змінній.
Відображення назви та опису кожної пари ключ-значення.

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 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 можуть фактично представляти topicid.

Давайте детально розглянемо, як ми можемо реалізувати Angular route з параметром:

Крок 1) Додайте наступний код до свого представлення

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

Крок 2) Додайте ідентифікатор теми у функцію служби Routeprovider
У сервісній функції routeprovider додайте:topicId, щоб позначити, що будь-який параметр, переданий в URL-адресі після маршруту, має бути призначений змінній topicId.

Крок 3) Додайте необхідний код до контролера

Обов’язково спочатку додайте “$routeParams” як параметр під час визначення функції контролера. Цей параметр матиме доступ до всіх параметрів маршруту, переданих в URL-адресі.
Параметр “routeParams” містить посилання на об’єкт topicId, який передається як параметр маршруту. Тут ми приєднуємо змінну '$routeParams.topicId' до нашого об'єкта scope як змінну '$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», яка міститиме рядок «This is angular».
Ми збираємося приєднати цю змінну до нашого маршруту. Пізніше ми отримаємо доступ до цього рядка з нашого контролера за допомогою служби $route, а потім використаємо об’єкт scope, щоб відобразити це в нашому поданні.

Отже, давайте подивимося, які кроки нам потрібно виконати, щоб досягти цього.

Крок 1) Додайте спеціальну пару ключ-значення до маршруту. Тут ми додаємо ключ під назвою «mytext» і призначаємо йому значення «This is angular».

Крок 2) Додайте відповідний код до контролера

Додайте параметр $route до функції контролера. Параметр $route є ключовим параметром, визначеним в angular, який дозволяє отримати доступ до властивостей маршруту.
Доступ до змінної «mytext», визначеної в маршруті, можна отримати через посилання $route.current. Потім це призначається змінній 'text' об'єкта scope. Відповідно до текстової змінної можна отримати доступ із подання.

<!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, як показано нижче.

Це призведе до того, що текст «This is angular» буде введено у вид. Вираз {{tutorialid}} такий самий, як і в попередній темі, і тут буде показано число «1».

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

Ми бачимо, що текст «This is angular» також відображається, коли ми натискаємо будь-яке з посилань у таблиці. Ідентифікатор теми також відображається одночасно з текстом.

Увімкнення маршрутизації HTML5

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

Зразок.html/Angular/1

Зразок.html/Angular/2

Зразок.html/Angular/3

Ця концепція зазвичай відома як представлення красивої URL-адреси користувачеві.

Є 2 основні кроки, які необхідно виконати для маршрутизації HTML5.

Налаштування $locationProvider
Встановлення нашої бази для відносних посилань

Давайте детально розглянемо, як виконати вищезазначені кроки в нашому прикладі вище

Крок 1) Додайте відповідний код до кутового модуля

Додайте константу базової URL-адреси до програми – це потрібно для маршрутизації 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

Підсумки