У данашње време сви би чули за „Апликације са једном страницом“. Многе познате веб странице попут Гмаил-а користе концепт апликација са једном страницом (СПА).
СПА су концепт у коме када корисник затражи другу страницу, апликација неће доћи до те странице, већ ће приказати приказ нове странице на самој постојећој страници.
Кориснику даје осећај да уопште није напустио страницу. Исто се може постићи у Ангулар-у уз помоћ Виевс-а заједно са Роутес.
У овом упутству ћете научити-
- Шта је поглед?
- нг-виев директива у АнгуларЈС
- Пример нг-прегледа
Шта је поглед?
Поглед је садржај који се приказује кориснику. У основи оно што корисник жели да види, сходно томе, тај приказ апликације ће му бити приказан.
Комбинација приказа и рута помаже у подели апликације на логичке прегледе и повезивању различитих погледа на контролере.
Подјела апликације на различите погледе и кориштење усмјеравања за учитавање различитих дијелова апликације помаже у логичкој подјели апликације и чинећи је управљивијом.
Претпоставимо да имамо апликацију за наручивање, у којој купац може прегледати наруџбе и послати нове.
Дијаграм у наставку и објашњење у наставку показују како направити ову апликацију као апликацију на једној страници.
Сада, уместо да имате две различите веб странице, једну за „Преглед поруџбина“ и другу за „Нове поруџбине“, у АнгуларЈС бисте уместо тога креирали два различита погледа под називом „Преглед поруџбина“ и „Нови налози“ на истој страници.
Такође ћемо имати 2 референтне везе у нашој апликацији под називом #схов и #нев.
- Дакле, када апликација пређе на МиАпп / # схов, приказаће поглед на Виев Ордерс, а истовремено неће напустити страницу. Само ће освежити одељак постојеће странице информацијама о „Преглед налога“. Исто важи и за приказ „Нове поруџбине“.
Тако на овај начин једноставно постаје раздвајање апликације на различите погледе како би се учинило управљивијим и једноставнијим за уношење промена кад год је то потребно.
И сваки приказ ће имати одговарајући контролер за контролу пословне логике за ту функционалност.
нг-виев директива у АнгуларЈС
„НгВиев“ је директива која допуњује услугу $ роуте укључивањем приказаног шаблона тренутне руте у датотеку главног изгледа (индек.хтмл).
Сваки пут када се тренутна рута промени, приказ је укључивао промене у складу са конфигурацијом услуге $ роуте без промене саме странице.
Руте ћемо обрађивати у каснијем поглављу, за сада ћемо се фокусирати на додавање више погледа у нашу апликацију.
Испод је читав дијаграм тока како читав процес функционише. Детаљно ћемо проћи за сваки процес у нашем примеру приказаном доле.
Пример нг-прегледа
Погледајмо пример како можемо применити ставове.
У нашем примеру ћемо представити две могућности кориснику,
- Једно је приказивање „догађаја“, а друго додавање „догађаја“.
- Када корисник кликне на везу Додај догађај, приказат ће му се приказ за „Додај догађај“, а исто важи и за „Приказ догађаја“.
Следите кораке у наставку да бисте поставили овај пример на место.
Корак 1) Укључите датотеку угаоне руте као референцу скрипте.
Ова датотека руте је неопходна да би се искористиле функције више рута и погледа. Ова датотека се може преузети са веб странице ангуларЈС.
Корак 2) У овом кораку,
- Додајте хреф ознаке које ће представљати везе до „Додавање новог догађаја“ и „Приказивање догађаја“.
- Такође додајте див ознаку са директивом нг-виев која ће представљати приказ.
То ће омогућити убризгавање одговарајућег приказа сваки пут када корисник кликне на „Додај нови догађај везу“ или „Прикажи догађај догађаја“.
Корак 3) У ознаку скрипте за Ангулар ЈС додајте следећи код.
Не брините о рутирању, за сада ћемо то видети у каснијем поглављу. Погледајмо за сада шифру приказа.
- Овај одељак кода значи да када корисник кликне на хреф ознаку „НевЕвент“ која је раније била дефинисана у див ознаци. Отићи ће на веб страницу адд_евент.хтмл и одатле ће узети код и убризгати га у приказ. Друго за обраду пословне логике за овај приказ, идите на „АддЕвентЦонтроллер“.
- Овај одељак кода значи да када корисник кликне на хреф ознаку „ДисплаиЕвент“ која је раније била дефинисана у див ознаци. Отићи ће на веб страницу схов_евент.хтмл, узети код одатле и убризгати га у приказ. Друго, за обраду пословне логике за овај приказ, идите на „СховДисплаиЦонтроллер“.
- Овај одељак кода значи да је подразумевани приказ који се приказује кориснику приказ ДисплаиЕвент
Корак 4) Следи додавање контролера за обраду пословне логике за функције „ДисплаиЕвент“ и „Адд Нев Евент“.
Само додајемо променљиву поруке сваком објекту опсега за сваки контролер. Ова порука ће се приказати када се кориснику прикаже одговарајући приказ.
Event Registration Guru99 Global Event
Корак 5) Направите странице под називом адд_евент.хтмл и схов_евент.хтмл. Нека странице буду једноставне како је приказано доле.
У нашем случају, страница адд_евент.хтмл ће имати заглавље заједно са текстом „Додај нови догађај“ и имаће израз за приказ поруке „Ово је додавање новог догађаја“.
Слично томе, страница схов_евент.хтмл такође ће имати ознаку заглавља која садржи текст „Прикажи догађај“ и такође ће имати израз поруке за приказ поруке „Ово је за приказ догађаја“.
Вредност променљиве поруке убризгаваће се на основу контролера који је прикључен на приказ.
За сваку страницу додаћемо променљиву поруке која ће се убризгавати из сваког одговарајућег контролера.
- адд_евент.хтмл
Add New Event
{{message}}
- схов_евент.хтмл
Show Event
{{message}}
Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.
Излаз:
Из резултата можемо уочити две ствари
- Адресна трака ће одражавати тренутни приказ који се приказује. Дакле, пошто је подразумевани приказ приказ екрана Схов Евент, трака за адресу приказује адресу за „ДисплаиЕвент“.
- Овај одељак је Поглед који се креира у ходу. Будући да је подразумевани приказ Схов Евент оне, то је оно што се приказује кориснику.
Сада кликните на везу Додај нови догађај на приказаној страници. Сада ћете добити доњи излаз.
Излаз:
- Адресна трака ће сада одражавати да је тренутни приказ сада приказ „Додај нови догађај“. Приметите да ћете и даље бити на истој страници апликације. Нећете бити упућени на нову страницу апликације.
- Овај одељак је приказ и сада ће се променити тако да приказује ХТМЛ за функцију „Додај нови догађај“. Дакле, сада се у овом одељку кориснику приказује заглавље "Додај нови догађај" и текст "Ово је додавање новог догађаја".