Пре него што започнемо са усмеравањем, хајде да само направимо кратки преглед апликација са једном страницом.
Шта су апликације на једној страници?
Апликације са једном страницом или (СПА) су веб апликације које учитавају једну ХТМЛ страницу и динамички ажурирају страницу на основу интеракције корисника са веб апликацијом.
Шта је рутирање у АнгуларЈС?
У АнгуларЈС, усмеравање је оно што вам омогућава да креирате апликације са једном страницом.
- Руте АнгуларЈС омогућавају вам да креирате различите УРЛ адресе за различит садржај у својој апликацији.
- Руте АнгуларЈС омогућавају приказивање више садржаја у зависности од тога која је рута изабрана.
- Рута је наведена у УРЛ-у иза знака #.
Узмимо пример веб локације која се хостује преко УРЛ адресе хттп://екампле.цом/индек.хтмл .
На овој страници ћете угостити главну страницу своје пријаве. Претпоставимо да је апликација организовала догађај и неко је желео да види који су то разни изложени догађаји или је желео да види детаље одређеног догађаја или да избрише догађај. У апликацији са једном страницом, када је рутирање омогућено, све ове функције биле би доступне путем следећих веза
хттп://екампле.цом/индек.хтмл#СховЕвент
хттп://екампле.цом/индек.хтмл#ДисплаиЕвент
хттп://екампле.цом/индек.хтмл#ДелетеЕвент
Симбол # би се користио заједно са различитим рутама (СховЕвент, ДисплаиЕвент и ДелетеЕвент).
- Дакле, ако је корисник желео да види све догађаје, био би усмерен на везу ( хттп://екампле.цом/индек.хтмл#СховЕвент ), иначе
- Ако би желели само да виде одређени догађај, преусмерили би се на везу ( хттп://екампле.цом/индек.хтмл#ДисплаиЕвент ) или
- Ако желе да избришу догађај, биће преусмерени на везу хттп://екампле.цом/индек.хтмл#ДелетеЕвент .
Имајте на уму да главна УРЛ адреса остаје иста.
У овом упутству ћете научити-
- Додавање угаоне руте ($ роутеПровидер)
- Креирање задате руте
- Приступ параметрима са руте
- Коришћење услуге Ангулар $ роуте
- Омогућавање ХТМЛ5 рутирања
Додавање угаоне руте ($ роутеПровидер)
Дакле, као што смо раније разговарали, руте у АнгуларЈС користе се за усмеравање корисника на другачији приказ ваше апликације. И ово усмеравање се врши на истој ХТМЛ страници тако да корисник има искуство да није напустио страницу.
Да бисте применили рутирање, у вашој апликацији у било ком одређеном редоследу морају бити примењени следећи главни кораци.
- Упућивање на ангулар-роуте.јс. Ово је ЈаваСцрипт датотека коју је развио Гоогле и која има све функције рутирања. Ово треба да се стави у вашу апликацију како би могла да упути на све главне модуле који су потребни за рутирање.
-
Следећи важан корак је додавање зависности модулу нгРоуте из ваше апликације. Ова зависност је потребна како би се функционалност рутирања могла користити у апликацији. Ако се ова зависност не дода, тада човек неће моћи да користи рутирање у оквиру апликације ангулар.ЈС.
Испод је општа синтакса ове изјаве. Ово је само нормална декларација модула са укључивањем кључне речи нгРоуте.
var module = angular.module("sampleApp", ['ngRoute']);
- Следећи корак би био конфигурисање вашег $ роутеПровидер-а. Ово је потребно за обезбеђивање различитих рута у вашој апликацији.
Испод је општа синтакса ове изјаве која је врло разумљива. Само се наводи да када је изабрана одговарајућа путања, користите руту за приказивање датог погледа кориснику.
when(path, route)
- Везе до руте са ваше ХТМЛ странице. На својој ХТМЛ страници додаћете референтне везе до различитих доступних рута у вашој апликацији.
<а хреф="#/роуте1"> Пут 1 <бр/>
- Коначно би било укључивање нг-виев директиве, која би обично била у див ознаци. Ово би се користило за убризгавање садржаја приказа када је изабрана одговарајућа рута.
Сада, погледајмо пример рутирања помоћу горе поменутих корака.
У нашем примеру,
Кориснику ћемо представити 2 везе,
- Једно је приказивање тема за кутни ЈС курс, а друго за курс Ноде.јс.
- Када корисник кликне на било коју везу, биће приказане теме за тај курс.
Корак 1) Укључите датотеку угаоне руте као референцу скрипте.
Ова датотека руте је неопходна да би се искористиле функције више рута и погледа. Ову датотеку можете преузети са веб странице ангулар.ЈС.
Корак 2) Додајте хреф ознаке које ће представљати везе до „Угаоне ЈС теме“ и „Ноде ЈС теме“.
Корак 3) Додајте див ознаку са нг-виев директивом која ће представљати приказ.
Ово ће омогућити убризгавање одговарајућег приказа сваки пут када корисник кликне на „Угаоне ЈС теме“ или „Ноде ЈС теме“.
Корак 4) У ознаку скрипте за АнгуларЈС додајте „нгРоуте модул“ и услугу „$ роутеПровидер“.
Објашњење кода:
- Први корак је осигурати укључивање „нгРоуте модула“. Када је ово постављено, Ангулар ће аутоматски управљати усмеравањем у вашој апликацији. Модул нгРоуте који је развио Гоогле има све функције које омогућавају рутирање. Додавањем овог модула, апликација ће аутоматски разумети све команде за усмеравање.
- $ Роутепровидер је услуга коју ангулар користи да би у позадини слушао руте које се позивају. Дакле, када корисник кликне на везу, добављач руте ће то открити, а затим одлучити којом рутом ићи.
- Направите једну руту за кутну везу - овај блок значи да када се кликне на кутну везу, убризгајте датотеку Ангулар.хтмл и такође користите контролер „АнгуларЦонтроллер“ за обраду било које пословне логике.
- Направите једну руту за везу Ноде - Овај блок значи да када се кликне на везу Ноде, убризгајте датотеку Ноде.хтмл и такође користите контролер 'НодеЦонтроллер' за обраду било које пословне логике.
Корак 5) Следи додавање контролера за обраду пословне логике и за АнгуларЦонтроллер и за НодеЦонтроллер.
У сваком контролеру креирамо низ парова кључ / вредност за чување имена и описа тема за сваки курс. Променљива низа 'туториал' додаје се објекту опсега за сваки контролер.
Event Registration Guru99 Global Event
Корак 6) Направите странице зване Ангулар.хтмл и Ноде.хтмл. За сваку страницу извршавамо кораке у наставку.
Ови кораци ће осигурати да се сви парови кључ / вредност низа прикажу на свакој страници.
- Коришћење нг-репеат директиве за пролазак кроз сваки пар кључ / вредност дефинисан у туторијалној променљивој.
- Приказивање имена и описа сваког пара кључ / вредност.
- Ангулар.хтмл
Anguler
- Course : {{ptutor.Name}} - {{ptutor.Description}}
- Ноде.хтмл
Node
- Course : {{ptutor.Name}} - {{ptutor.Description}}
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Ако кликнете на везу АнгуларЈС Топицс, приказаће се доњи излаз.
Резултат јасно показује да,
- Када се кликне на везу „Ангулар ЈС Топицс“, роутеПровидер који смо декларисали у нашем коду одлучује да се убризга Ангулар.хтмл код.
- Овај код ће бити убачен у ознаку "див" која садржи директиву нг-виев. Такође, садржај описа курса потиче из „променљиве водича“ која је била део обима који је дефинисан у АнгуларЦонтроллер.
- Када се кликне на Ноде.јс теме, догодиће се исти резултат и приказаће се приказ тема Ноде.јс.
- Такође, имајте на уму да УРЛ странице остаје исти, мења се само рута после ознаке #. И ово је концепт апликација на једној страници. Ознака #хасх у УРЛ-у је сепаратор који раздваја руту (која је у нашем случају „Угаона“ као што је приказано на горњој слици) и главну ХТМЛ страницу (Сампле.хтмл)
Креирање задате руте
Рутирање у АнгуларЈС-у такође пружа могућност да има подразумевану руту. Ово је рута која се бира ако се не подудара са постојећом рутом.
Подразумевана рута креира се додавањем следећег услова приликом дефинисања услуге $ роутеПровидер.
Синтакса у наставку једноставно значи преусмеравање на другу страницу ако се било која од постојећих рута не подудара.
otherwise ({redirectTo: 'page'});
Користимо исти пример горе и додајте подразумевану руту у нашу услугу $ роутеПровидер.
function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);
Објашњење кода:
- Овде користимо исти код као и горе, с једином разликом што користимо израз „иначе“ и опцију „редирецтТо“ да одредимо који приказ треба учитати ако није наведена рута. У нашем случају желимо да се прикаже приказ '/ Ангулар'.
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Јасно можете видети да је подразумевани приказ приказан угаони ЈС приказ.
- То је зато што када се страница учита прелази на опцију 'иначе' у функцији $ роутеПровидер и учитава приказ '/ Ангулар'.
Приступ параметрима са руте
Ангулар такође пружа функционалност за пружање параметара током рутирања. Параметри се додају на крај руте у УРЛ-у, на пример хттп: //гуру99/индек.хтмл#/Ангулар/1 . У овом примеру
- , хттп: //гуру99/индек.хтмл је наша главна УРЛ адреса апликације
- Симбол # је сепаратор између УРЛ-а главне апликације и руте.
- Кутна је наша рута
- И на крају, '1' је параметар који се додаје нашој рути
Синтакса изгледа параметара у УРЛ-у приказана је испод:
ХТМЛПаге # / роуте / параметер
Овде ћете приметити да се параметар преноси након руте у УРЛ-у.
Дакле, у нашем примеру, горе за теме Ангулар ЈС, можемо проследити параметре као што је приказано доле
Сампле.хтмл # / Угаона / 1
Сампле.хтмл # / Угаона / 2
Узорак.хтмл # / Угаона / 3
Овде параметри 1, 2 и 3 заправо могу представљати топицид.
Погледајмо детаљно како то можемо применити.
Корак 1) Додајте следећи код у свој приказ
-
Додајте табелу да бисте кориснику приказали све теме за курс Ангулар ЈС
-
Додајте ред табеле за приказ теме „Контролери“. За овај ред промените хреф ознаку у „Угаона / 1“, што значи да ће, када корисник кликне на ову тему, параметар 1 бити прослеђен у УРЛ адресу заједно са рутом.
-
Додајте ред табеле за приказ теме „Модели“. За овај ред промените хреф ознаку у „Угаона / 2“, што значи да ће, када корисник кликне на ову тему, параметар 2 бити прослеђен у УРЛ адресу заједно са рутом.
-
Додајте ред табеле за приказ теме „Директиве“. За овај ред промените хреф ознаку у „Угаона / 3“, што значи да ће, када корисник кликне на ову тему, параметар 3 бити прослеђен у УРЛ адресу заједно са рутом.
Корак 2) У услужној функцији роутепровидер додајте: топицИд да бисте означили да било који параметар прослеђен у УРЛ након руте треба да буде додељен променљивој топицИд.
Корак 3) Додајте потребан код управљачу
- Обавезно прво додајте "$ роутеПарамс" као параметар приликом дефинисања функције контролера. Овај параметар ће имати приступ свим параметрима руте прослеђеним у УРЛ-у.
- Параметар "роутеПарамс" има референцу на топицИд објекат, који се прослеђује као параметар руте. Овде прилажемо променљиву '$ роутеПарамс.топицИд' нашем објекту опсега као променљиву '$ сцопе.тутотиалид'. Ово је учињено како би се у нашем погледу на њега могло упутити путем променљиве туториалид.
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) Додајте израз за приказ променљиве туториалид на страници Ангулар.хтмл.
Anguler
{{tutorialid}}
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
У излазном екрану,
- Ако кликнете на везу Детаљи теме за прву тему, број 1 се додаје УРЛ-у.
- Овај број ће услуга Ангулар.ЈС роутепровидер узети као аргумент „роутепарам“, а затим ће нам моћи приступити наш контролер.
Коришћење услуге Ангулар $ роуте
Услуга $ роуте омогућава вам приступ својствима руте. Услуга $ роуте доступна је као параметар када је функција дефинисана у контролеру. Општа синтакса начина на који је параметар $ роуте доступан из контролера приказана је у наставку;
myApp.controller('MyController',function($scope,$route)
- миАпп је ангулар.ЈС модул дефинисан за ваше апликације
- МиЦонтроллер је назив контролера дефинисан за вашу апликацију
- Баш као што је за вашу апликацију доступна променљива $ сцопе, која се користи за прослеђивање информација из контролера у приказ. Параметар $ роуте користи се за приступ својствима руте.
Погледајмо како можемо користити услугу $ роуте.
У овом примеру,
- Направићемо једноставну прилагођену променљиву названу „митект“, која ће садржати низ „Тхис ис ангулар“.
- Ову променљиву ћемо приложити нашој рути. А касније ћемо приступити овом низу из нашег контролера користећи услугу $ роуте, а затим ћемо користити објекат опсега да то прикажемо у нашем погледу.
Па, хајде да видимо кораке које морамо предузети да бисмо то постигли.
Корак 1) Додајте прилагођени пар кључ / вредност на руту. Овде додајемо кључ који се зове „митект“ и додељујемо му вредност „Тхис ис ангулар“.
Корак 2) Додајте одговарајући код у контролер
- Додајте параметар $ роуте функцији контролера. Параметар $ роуте је кључни параметар дефинисан угаоно, који омогућава приступ својствима руте.
- Променљивој „митект“ која је дефинисана у рути може се приступити путем референце $ роуте.цуррент. То се затим додељује променљивој 'тект' објекта опсега. Тада се из приказа може приступити текстуалној променљивој у складу с тим.
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) Додајте референцу на текстуалну променљиву из објекта сцопе као израз. Ово ће бити додато на нашу страницу Ангулар.хтмл као што је приказано доле.
То ће довести до убризгавања текста „Ово је угаоно“ у поглед. Израз {{туториалид}} је исти као онај из претходне теме и на њему ће бити приказан број '1'.
Anguler
{{text}}
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Видимо да се текст „Ово је угаона“ такође приказује када кликнемо на било коју везу у табели. ИД теме се такође приказује истовремено са текстом.
Омогућавање ХТМЛ5 рутирања
ХТМЛ5 рутирање се у основи користи за стварање чистих УРЛ адреса. То значи уклањање хасхтага са УРЛ адресе. Тако би се УРЛ-ови за рутирање, када се користи ХТМЛ5 рутирање, појавили као што је приказано доле
Узорак.хтмл / Ангулар / 1
Узорак.хтмл / Ангулар / 2
Узорак.хтмл / Ангулар / 3
Овај концепт је обично познат као представљање корисног УРЛ-а кориснику.
Постоје 2 главна корака која треба предузети за ХТМЛ5 рутирање.
- Конфигурисање $ лоцатионПровидер
- Постављање наше основе за релативне везе
Погледајмо детаље како извршити горе поменуте кораке у нашем примеру изнад
Корак 1) Додајте одговарајући код угаоном модулу
- Додајте константу басеУРЛ у апликацију - Ово је потребно за ХТМЛ5 рутирање како би апликација знала која је основна локација апликације.
- Додајте услуге $ лоцатионПровидер. Ова услуга вам омогућава да дефинишете хтмл5Моде.
- Поставите хтмл5Моде услуге $ лоцатионПровидер на тачно.
Корак 2) Уклоните све #тагове за везе ('Ангулар / 1', 'Ангулар / 2', 'Ангулар / 3') да бисте креирали УРЛ који се лако чита.
Event Registration Guru99 Global Event
| # | Angular JS topic | Description | |
|---|---|---|---|
| l | l | Controllers | Topic details |
| 2 | 2 | Models | Topic details |
| 3 | 3 | Directives | Topic details |
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата,
- Можете да видите да ознака # није тамо када приступате апликацији.
Резиме
- Усмеравање се користи за представљање различитих погледа кориснику на истој веб страници. Ово је у основи концепт који се користи у једностраним апликацијама које су примењене за готово све савремене веб апликације
- Подразумевана рута се може поставити за ангулар.ЈС рутирање. Користи се за одређивање који ће задати приказ бити приказан кориснику
- Параметри се могу проследити на руту путем УРЛ-а као параметри руте. Овим параметрима се затим приступа помоћу параметра $ роутеПарамс у контролеру
- Услуга $ роуте може се користити за дефинисање прилагођених парова кључ / вредност у рути којима се затим може приступити из погледа
- ХТМЛ5 рутирање се користи за уклањање #таг из УРЛ-а за рутирање у угаону да би се формирао леп УРЛ