Цей приклад пов'язаний з маршрутизацією в AngularJS. Перше, що я виявив при пошуку в мережі аналогічних ресурсів — що немає ще досить простого прикладу, який підходить для новачків в Angular. Отже, я намагаюся, щоб цей розділ виявився настільки простим, наскільки це можливо.
Що таке маршрутизація у веб-додатку? яке за ними ховається. Типовим прикладом може бути клацання посилання на головну сторінку: це означає, що дія буде виконана на стороні сервера, потім результат передано в інше подання на стороні клієнта. Ми часто опиняємось у подібній ситуації після взаємодії в корені веб-додатку (/або index.html), помітивши зміни в адресному рядку браузера. Ідея прикладу
У цьому прикладі ми покажемо просту навігацію на сторінці програми. Припустимо, що у нас є головна сторінка з двома посиланнями і кожна з них перенаправлятиме на певну сторінку.
Щоб краще зрозуміти нашу ідею, ми реалізуємо вбудовану навігацію. Це означає, що ми хочемо, щоб вміст наших сторінок відображався всередині вихідної/головної сторінки.
AngularJS пропонує директиву ngView для реалізації вищезгаданої функціональності. Конкретно директива ngView доповнює сервіс $route за рахунок включення шаблону поточного маршруту до основного файлу макету. Тобто щоразу, коли змінюється поточний маршрут, включене уявлення змінюється відповідно до налаштувань сервісу $route.
Отже, маючи на увазі, що наш index.html містить просте пропозицію з двома посиланнями, ми хочемо відобразити шаблони (відповідно до натиснутих посилань) нижче цієї пропозиції. Це має виглядати так:
<code data-language="html"><p>Перейти до <a href="#first">перший</a> або <a href="#second">друга сторінка</a>.</p> <div ng-view>
Як бачите, посилання вже вказані, так що залишається лише налаштувати відповідні маршрути для Angular. На даний момент у нас має бути готова головна сторінка:
index.html
<code data-language="html"> <!DOCTYPE html> <html> <head> <title>Приклад маршрутизації до AngularJS</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script> <script src="script.js"></script> </head> <body ng-app="RoutingApp"> <h2>Приклад маршрутизації в AngularJS</h2> <p>Перейти до <a href="#first">перший</a> або <a href="#second">друга сторінка</a>.</p> <div ng-view></div> </body> </html>
У AngularJS ми можемо використовувати модуль ngRoute для маршрутизації та сервісу посилань.
Ось деякі важливі моменти перед його застосуванням:
- щоб використовувати модуль ngRoute ви повинні включити angular-route.js до програми, яка, очевидно, повинна бути завантажена після скрипта angular.js;
- потрібну нам маршрутизацію ми повинні налаштувати всередині модуля, щоб було простіше визначити наш модуль в окремому файлі script.js;
- ви повинні вказати однакове ім'я для ng-app (в HTML-файлі, що містить програму Angular) та при визначенні модуля.
Визначення модуля
Тепер давайте визначимо модуль Angular, задавши йому ім'я нашої програми (як в index.html) і встановивши, що він залежить від модуля ngRoute. Останні слова означають, що ми повинні «впровадити» ngRoute у наш модуль (script.js), на зразок цього:
<code data-language="javascript">angular.module('RoutingApp', ['ngRoute']);Ось чому ми повинні були включити файл angular-route.js до нашої програми. Для того, щоб використовувати ngRoute ми повинні викликати метод angular.config:
<code data-language="javascript">angular.module('RoutingApp' , ['ngRoute']) .config(function() { });Як ви помітили, я також створив анонімну функцію всередині методу, в іншому випадку ми отримаємо повідомлення про помилку скрипту з нашого браузера, оскільки метод angular.config вимагає виклик із функцією.
З офіційної документації ми можемо використовувати $routeProvider для налаштування маршрутизації Angular, так що ми повинні передати $routeProvider як параметр у нашу анонімну функцію:
<code data-language="javascript">angular.module('RoutingApp', ['ngRoute']) .config( ['$routeProvider', function($routeProvider) { }]);Метод у $routeProvider додає т нове визначення маршруту до сервісу $route через when(path, route):
- path відповідає запиту з клієнтського шляху;
- route — параметр об'єкта і містить відомості про зіставлення, які мають бути призначені, поки розглядається відповідний маршрут (тобто ми хочемо обробити недавно зареєстрований маршрут з певним контролером; властивість controller несе відповідальність за цю справу).
Ви можете прочитати про інші властивості об'єкта route, але, як я вже згадував раніше, ми реалізуємо просту маршрутизацію між двома HTML-файлами, так що я використовуватиму тільки templateUrl.
Будь ласка, погляньте на заключну структуру модуля:
script.js
<code data-language="javascript">angular.module('RoutingApp', ['ngRoute']) .config( [' $routeProvider', function($routeProvider) { $routeProvider .when('/first', { templateUrl: 'first.html' }) .when('/second', { templateUrl: 'second.html' }) .otherwise ({ redirectTo: '/' }); }]);Тепер, дозволь давайте мені пояснити: перший when означає, що коли /first запитується як маршрут, буде завантажено first.html. Аналогічно для /second.
Метод otherwise(параметри) встановлює визначення маршруту, який буде використовуватися при зміні маршруту, коли немає відповідності ні з яким іншим маршрутом. На практиці це означає, що якщо клієнт запитує маршрут, який не визначений у методі when, то буде виконано цей метод. Уявіть це як вираз if-else в цілому.
У нашому випадку, я вважаю, ми хочемо відобразити тільки головну сторінку (/), коли немає відповідності із заданими маршрутами.
Демонстрація
Спочатку, будь ласка, погляньте на цей пост, просто щоб зрозуміти, чому ви повинні розгорнути цю програму на локальному сервері, а не просто виконати її в браузері.
Доступ до веб-додатку з локального сервера :
Мал. 3.1. Головна сторінка програми
Тепер натисніть на «першу».
Мал. 3.2. «Перша» сторінка програми
Аналогічно для «другої».
Мал. 3.3. «Друга» сторінка програми
Завантажити
Ви можете завантажити повний вихідний код цього прикладу тут: angularjs_routing.zip.