Перш ніж ми почнемо з маршрутизацією, давайте просто коротко оглянемо програми на одній сторінці.
Що таке односторінкові програми?
Односторінкові програми або (SPA) - це веб-програми, які завантажують одну HTML-сторінку та динамічно оновлюють сторінку на основі взаємодії користувача з веб-додатком.
Що таке маршрутизація в AngularJS?
У AngularJS маршрутизація - це те, що дозволяє створювати програми для однієї сторінки.
- Маршрути AngularJS дозволяють створювати різні URL-адреси для різного вмісту у вашій програмі.
- Маршрути AngularJS дозволяють показувати кілька вмістів залежно від обраного маршруту.
- Маршрут вказується в URL-адресі після знака #.
Візьмемо приклад веб-сайту, розміщеного за URL-адресою http://example.com/index.html .
На цій сторінці ви розмістите головну сторінку своєї програми. Припустимо, якщо додаток організовує Подію, і хтось хоче побачити, що представляють різні виставлені події, або хоче побачити деталі конкретної події або видалити подію. У програмі на одній сторінці, коли маршрутизація ввімкнена, вся ця функціональність буде доступна за такими посиланнями
http://example.com/index.html#ShowEvent
http://example.com/index.html#DisplayEvent
http://example.com/index.html#DeleteEvent
Символ # буде використовуватися разом з різними маршрутами (ShowEvent, DisplayEvent та DeleteEvent).
- Отже, якщо користувач хотів побачити всі Події, він буде спрямований за посиланням ( http://example.com/index.html#ShowEvent ), інакше
- Якби вони хотіли просто побачити певну подію, їх було б перенаправлено за посиланням ( http://example.com/index.html#DisplayEvent ) або
- Якщо вони хочуть видалити подію, вони будуть спрямовані за посиланням http://example.com/index.html#DeleteEvent .
Зверніть увагу, що основна URL-адреса залишається незмінною.
У цьому підручнику ви дізнаєтесь-
- Додавання кутового маршруту ($ routeProvider)
- Створення маршруту за замовчуванням
- Доступ до параметрів із маршруту
- Використання служби маршрутних маршрутів Angular $
- Увімкнення маршрутизації 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-сторінці ви додасте посилання на різні доступні маршрути у вашій програмі.
Маршрут 1
- Нарешті, було б включення директиви ng-view, яка зазвичай міститься у тезі div. Це використовується для введення вмісту подання, коли обраний відповідний маршрут.
Тепер давайте розглянемо приклад маршрутизації за допомогою вищезазначених кроків.
У нашому прикладі
Ми представимо 2 посилання користувачеві,
- Один - відображення тем для курсу Angular JS , а інший - для курсу Node.js.
- Коли користувач натискає будь-яке посилання, відображатимуться теми цього курсу.
Крок 1) Включіть файл angular-route як посилання на сценарій.
Цей файл маршруту необхідний для того, щоб скористатися функціональними можливостями декількох маршрутів та видів. Цей файл можна завантажити з веб-сайту angular.JS.
Крок 2) Додайте теги href, які представлятимуть посилання на "Кутові теми JS" та "Теми JS вузла".
Крок 3) Додайте тег div із директивою ng-view, яка представлятиме вигляд.
Це дозволить вводити відповідний вигляд кожного разу, коли користувач натискає або "Теми JS Angular", або "Node JS Topics".
Крок 4) У тегу сценарію для AngularJS додайте модуль "ngRoute" та послугу "$ routeProvider".
Пояснення коду:
- Першим кроком є забезпечення включення «модуля ngRoute». З цим місцем Angular автоматично обробляє маршрутизацію у вашому додатку. Модуль ngRoute, розроблений Google, має всі функції, що дозволяють зробити маршрутизацію можливою. Додавши цей модуль, програма автоматично зрозуміє всі команди маршрутизації.
- $ Routeprovider - це послуга, яку angular використовує для прослуховування у фоновому режимі викликаних маршрутів. Отже, коли користувач натискає посилання, постачальник маршруту виявить це, а потім вирішить, яким маршрутом рухатися.
- Створити один маршрут для Angular link - Цей блок означає, що при натисканні Angular link вводять файл Angular.html, а також використовують контролер 'AngularController' для обробки будь-якої бізнес-логіки.
- Створити один маршрут для посилання Node - Цей блок означає, що при натисканні на посилання Node, вводять файл Node.html, а також використовують контролер NodeController для обробки будь-якої бізнес-логіки.
Крок 5) Далі слід додати контролери для обробки бізнес-логіки як AngularController, так і NodeController.
У кожному контролері ми створюємо масив пар ключ-значення для зберігання імен та описів тем для кожного курсу. Змінна масиву 'tutorial' додається до об'єкта сфери для кожного контролера.
Event Registration Guru99 Global Event
Крок 6) Створіть сторінки під назвою Angular.html та Node.html. Для кожної сторінки ми виконуємо наступні кроки.
Ці кроки гарантують, що всі пари ключ-значення масиву відображаються на кожній сторінці.
- Використання директиви ng-repeat для перегляду кожної пари ключ-значення, визначеної у змінній підручника.
- Відображення назви та опису кожної пари ключ-значення.
- Angular.html
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Node.html
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
Якщо натиснути посилання AngularJS Topics, відобразиться нижченаведений результат.
Результат наочно показує, що,
- При натисканні на посилання "Angular JS Topics" посилання routeProvider, яке ми оголосили в нашому коді, вирішує, що слід вводити код Angular.html.
- Цей код буде введено в тег "div", який містить директиву ng-view. Крім того, вміст опису курсу походить від "навчальної змінної", яка була частиною об'єкта сфери, визначеного в AngularController.
- Після натискання на теми Node.js відбудеться той самий результат, і відобразиться подання тем Node.js.
- Також зауважте, що URL-адреса сторінки залишається незмінною, змінюється лише маршрут після тегу #. І це концепція односторінкових додатків. Тег #hash в URL-адресі - це роздільник, який відокремлює маршрут (а в нашому випадку - "Angular", як показано на малюнку вище) та головну сторінку HTML (Sample.html)
Створення маршруту за замовчуванням
Маршрутизація в AngularJS також забезпечує можливість мати маршрут за замовчуванням. Це маршрут, який вибирається, якщо немає відповідності для існуючого маршруту.
Маршрут за замовчуванням створюється додаванням наступної умови при визначенні служби $ routeProvider.
Наведений нижче синтаксис просто означає переспрямування на іншу сторінку, якщо будь-який із існуючих маршрутів не збігається.
otherwise ({redirectTo: 'page'});
Давайте використаємо той самий приклад вище і додамо маршрут за замовчуванням до нашої служби $ routeProvider.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Пояснення коду:
- Тут ми використовуємо той самий код, що і вище, з тією лише різницею, що ми використовуємо оператор інакше та опцію "redirectTo", щоб вказати, який вигляд слід завантажувати, якщо не вказано маршрут. У нашому випадку ми хочемо, щоб відображався вигляд '/ Angular'.
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
- Ви можете чітко помітити, що показаний за замовчуванням вид - кутовий JS-вид.
- Це пов’язано з тим, що при завантаженні сторінки вона переходить до опції «інакше» у функції $ routeProvider і завантажує подання «/ Angular».
Доступ до параметрів із маршруту
Angular також надає функціонал для забезпечення параметрів під час маршрутизації. Параметри додаються до кінця маршруту в URL-адресі, наприклад, http: //guru99/index.html#/Angular/1 . У цьому прикладі
- , http: //guru99/index.html - це основна URL-адреса нашого додатка
- Символ # - це роздільник між основною URL-адресою програми та маршрутом.
- Кутовий - це наш маршрут
- І нарешті, «1» - це параметр, який додається до нашого маршруту
Синтаксис того, як параметри виглядають в URL-адресі, показаний нижче:
HTMLPage # / route / parameter
Тут ви помітите, що параметр передається після маршруту в URL-адресі.
Отже, у нашому прикладі, вище для тем Angular JS, ми можемо передавати параметри, як показано нижче
Sample.html # / Angular / 1
Sample.html # / Angular / 2
Sample.html # / Angular / 3
Тут параметри 1, 2 і 3 насправді можуть представляти тематид.
Давайте розглянемо детально, як ми можемо це реалізувати.
Крок 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.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Крок 4) Додайте вираз для відображення змінної tutorialid на сторінці Angular.html.
Anguler
{{tutorialid}}
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
На екрані виводу
- Якщо натиснути посилання Деталі теми для першої теми, до URL-адреси додається цифра 1.
- Потім цей номер буде сприйнятий як аргумент "routeparam" службою Angular.JS routeprovider, а потім може бути доступний нашому контролеру.
Використання служби маршрутних маршрутів Angular $
Служба $ 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' об'єкта сфери дії. Потім до текстової змінної можна отримати відповідний доступ із подання.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Крок 3) Додайте посилання на текстову змінну з об’єкта сфери дії як вираз. Це буде додано на нашу сторінку Angular.html, як показано нижче.
Це призведе до того, що текст "Це кутовий" буде вставлений у вид. Вираз {{tutorialid}} такий самий, як і в попередній темі, і на ньому буде відображатися цифра '1'.
Anguler
{{text}}
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
- Ми бачимо, що текст "Це кутово" також відображається, коли ми натискаємо будь-яке з посилань у таблиці. Ідентифікатор теми також відображається одночасно з текстом.
Увімкнення маршрутизації HTML5
Маршрутизація HTML5 в основному використовується для створення чистої URL-адреси. Це означає видалення хештегу з URL-адреси. Тож URL-адреси маршрутизації, коли використовується маршрутизація HTML5, будуть виглядати, як показано нижче
Зразок.html / Angular / 1
Зразок.html / Angular / 2
Зразок.html / Angular / 3
Зазвичай ця концепція відома як представлення користувачеві гарної URL-адреси.
Для маршрутизації HTML5 потрібно виконати 2 основні кроки.
- Налаштування $ locationProvider
- Встановлення нашої бази для відносних посилань
Давайте розглянемо подробиці того, як виконати вищезазначені дії у нашому прикладі вище
Крок 1) Додайте відповідний код до кутового модуля
- Додайте до програми константу baseURL - Це потрібно для маршрутизації HTML5, щоб програма знала, яке базове розташування програми.
- Додайте служби $ locationProvider. Ця послуга дозволяє визначити режим html5Mode.
- Встановіть для html5Mode служби $ locationProvider значення true.
Крок 2) Видаліть усі #tag для посилань ('Angular / 1', 'Angular / 2', 'Angular / 3'), щоб створити URL-адресу, яка легко читається.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З виходу,
- Ви можете помітити, що тегу # немає при доступі до програми.
Резюме
- Маршрутизація використовується для представлення різних поглядів користувачеві на одній веб-сторінці. В основному це концепція, що використовується в односторінкових додатках, які реалізуються майже для всіх сучасних веб-додатків
- Маршрут за замовчуванням може бути встановлений для маршрутизації angular.JS. Він використовується для визначення того, яким виглядом за замовчуванням буде відображатися користувач
- Параметри можуть передаватися маршруту через URL-адресу як параметри маршруту. Потім доступ до цих параметрів здійснюється за допомогою параметра $ routeParams у контролері
- Службу $ route можна використовувати для визначення власних пар ключ-значення в маршруті, до яких потім можна отримати доступ з подання
- Маршрутизація HTML5 використовується для видалення #tag з URL-адреси маршрутизації в angular для формування гарної URL-адреси