Преди да започнем с маршрутизирането, нека просто направим бърз преглед на приложенията с една страница.
Какво представлява приложението на една страница?
Едностранични приложения или (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 $ 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 страница ще добавите референтни връзки към различните налични маршрути във вашето приложение.
Маршрут 1
- И накрая ще бъде включването на директивата ng-view, която обикновено е в div таг. Това ще се използва за инжектиране на съдържанието на изгледа, когато е избран съответният маршрут.
Сега, нека разгледаме пример за маршрутизиране с помощта на гореспоменатите стъпки.
В нашия пример,
Ще представим 2 връзки на потребителя,
- Единият е да се показват темите за Angular JS курс, а другият е за курса Node.js.
- Когато потребителят щракне върху някоя от връзките, темите за този курс ще бъдат показани.
Стъпка 1) Включете файла с ъгловия маршрут като препратка към скрипт.
Този файл с маршрути е необходим, за да се използват функционалностите на множество маршрути и изгледи. Този файл може да бъде изтеглен от уебсайта angular.JS.
Стъпка 2) Добавете href тагове, които ще представляват връзки към „Angular JS Topics“ и „Node JS Topics“.
Стъпка 3) Добавете div таг с директивата ng-view, който ще представлява изгледа.
Това ще позволи да се инжектира съответния изглед всеки път, когато потребителят щракне върху „Ъглови JS теми“ или „Node JS теми“.
Стъпка 4) В маркера на скрипта си за AngularJS добавете модула "ngRoute" и услугата "$ routeProvider".
Обяснение на кода:
- Първата стъпка е да се гарантира включването на "модула ngRoute." С това място Angular автоматично ще обработва маршрута във вашето приложение. Модулът ngRoute, разработен от Google, разполага с цялата функционалност, която позволява маршрутизирането да бъде възможно. Чрез добавяне на този модул приложението автоматично ще разбере всички команди за маршрутизиране.
- $ Routeprovider е услуга, която angular използва, за да слуша във фонов режим извиканите маршрути. Така че, когато потребителят щракне върху връзка, доставчикът на маршрута ще открие това и след това ще реши по кой маршрут да поеме.
- Създайте един маршрут за ъгловата връзка - Този блок означава, че когато щракнете върху ъгловата връзка, инжектирайте файла 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 адреса е разделител, който разделя маршрута (който в нашия случай е „Ъглов“, както е показано на горното изображение) и основната 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 # / маршрут / параметър
Тук ще забележите, че параметърът се предава след маршрута в 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.
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}}
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
В изходния екран,
- Ако кликнете върху връзката Подробности за темата за първата тема, числото 1 се добавя към URL адреса.
- След това този номер ще бъде взет като аргумент "routeparam" от услугата Angular.JS routeprovider и след това може да бъде достъпен от нашия контролер.
Използване на услугата 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' на обекта на обхвата. След това текстовата променлива може да бъде достъпна от изгледа съответно.
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, ще се появят, както е показано по-долу
Sample.html / ъглова / 1
Пример.html / ъглова / 2
Пример.html / ъглова / 3
Тази концепция обикновено е известна като представяне на доста URL на потребителя.
Има 2 основни стъпки, които трябва да се извършат за HTML5 маршрутизиране.
- Конфигуриране на $ locationProvider
- Задаване на нашата база за относителни връзки
Нека разгледаме подробно как да извършим гореспоменатите стъпки в нашия пример по-горе
Стъпка 1) Добавете съответния код към ъгловия модул
- Добавете baseURL константа към приложението - Това е необходимо за HTML5 маршрутизиране, така че приложението да знае какво е основното местоположение на приложението.
- Добавете услугите $ locationProvider. Тази услуга ви позволява да дефинирате html5Mode.
- Задайте на html5Mode на услугата $ locationProvider вярно.
Стъпка 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 адреса за маршрутизиране в ъглова, за да се образува красив URL