В днешно време всеки би чувал за „Приложенията за една страница“. Много от добре познатите уебсайтове като Gmail използват концепцията за едностранични приложения (SPA).
SPA е концепцията, при която когато потребителят поиска друга страница, приложението няма да се придвижва до тази страница, а вместо това да показва изгледа на новата страница в самата съществуваща страница.
Това създава усещането за потребителя, че той изобщо не е напускал страницата. Същото може да се постигне в Angular с помощта на Views във връзка с Routes.
В този урок ще научите -
- Какво е изглед?
- ng-view директива в AngularJS
- ng-view Пример
Какво е изглед?
Изгледът е съдържанието, което се показва на потребителя. По принцип това, което потребителят иска да види, съответно този изглед на приложението ще бъде показан на потребителя.
Комбинацията от изгледи и маршрути помага за разделяне на приложение в логически изгледи и обвързване на различни изгледи с контролери.
Разделянето на приложението на различни изгледи и използването на Routing за зареждане на различна част от приложението помага за логично разделяне на приложението и го прави по-управляем.
Нека приемем, че имаме приложение за поръчка, при което клиентът може да преглежда поръчки и да прави нови.
Диаграмата по-долу и последващото обяснение демонстрират как да направите това приложение като едностранично приложение.
Сега, вместо да имате две различни уеб страници, една за „Преглед на поръчки“ и друга за „Нови поръчки“, в AngularJS вместо това бихте създали два различни изгледа, наречени „Преглед на поръчки“ и „Нови поръчки“ на същата страница.
Също така ще имаме 2 референтни връзки в нашето приложение, наречени #show и #new.
- Така че, когато приложението премине към MyApp / # show, то ще покаже изгледа на Преглед на поръчки, като в същото време няма да напусне страницата. Той просто ще опресни раздела на съществуващата страница с информация за „Преглед на поръчките“. Същото важи и за изгледа "Нови поръчки".
Така че по този начин става по-просто да разделите приложението на различни изгледи, за да го направите по-лесно управляемо и лесно да правите промени, когато е необходимо.
И всеки изглед ще има съответния контролер, който да контролира бизнес логиката за тази функционалност.
ng-view директива в AngularJS
"NgView" е директива, която допълва услугата $ route, като включва визуализирания шаблон на текущия маршрут в файла с основно оформление (index.html).
Всеки път, когато текущият маршрут се променя, изгледът включва промени в него според конфигурацията на услугата $ route, без да променя самата страница.
Ще разгледаме маршрутите в по-късна глава, засега ще се съсредоточим върху добавяне на множество изгледи към нашето приложение.
По-долу е дадена цялата блок-схема на това как работи целият процес. Ще разгледаме подробно всеки процес в нашия пример, показан по-долу.
ng-view Пример
Нека да разгледаме един пример за това как можем да приложим възгледи.
В нашия пример ще представим две опции на потребителя,
- Единият е да се покаже „Събитие“, а другият е да се добави „Събитие“.
- Когато потребителят щракне върху връзката Добавяне на събитие, ще му се покаже изгледът за „Добавяне на събитие“ и същото важи и за „Показване на събитие“.
Моля, следвайте стъпките по-долу, за да поставите този пример на място.
Стъпка 1) Включете файла с ъгловия маршрут като препратка към скрипт.
Този файл с маршрути е необходим, за да се използват функционалностите на множество маршрути и изгледи. Този файл може да бъде изтеглен от уебсайта angularJS.
Стъпка 2) В тази стъпка,
- Добавете href тагове, които ще представляват връзки към „Добавяне на ново събитие“ и „Показване на събитие“.
- Освен това добавете div таг с директивата ng-view, който ще представлява изгледа.
Това ще позволи да се инжектира съответния изглед, когато потребителят щракне върху „Добавяне на ново събитие връзка“ или „Показване на връзка събитие“.
Стъпка 3) Във вашия таг за скрипт за Angular JS добавете следния код.
Нека не се тревожим за маршрутизацията, засега ще видим това в следваща глава. Нека просто видим кода за изгледите засега.
- Този раздел на кода означава, че когато потребителят щракне върху href маркера "NewEvent", който е дефиниран в div маркера по-рано. Той ще отиде на уеб страницата add_event.html и ще вземе кода от там и ще го инжектира в изгледа. На второ място, за обработка на бизнес логиката за този изглед, отидете на "AddEventController".
- Този раздел на кода означава, че когато потребителят щракне върху href маркера "DisplayEvent", който е дефиниран в div маркера по-рано. Той ще отиде на уеб страницата show_event.html, ще вземе кода от там и ще го инжектира в изгледа. На второ място, за обработка на бизнес логиката за този изглед, отидете на "ShowDisplayController".
- Този раздел на кода означава, че изгледът по подразбиране, показан на потребителя, е изгледът DisplayEvent
Стъпка 4) Следва добавяне на контролери за обработка на бизнес логиката както за функциите "DisplayEvent", така и за "Add New Event".
Просто добавяме променлива на съобщението към всеки обект на обхват за всеки контролер. Това съобщение ще се покаже, когато на потребителя се покаже подходящият изглед.
Event Registration Guru99 Global Event
Стъпка 5) Създайте страници, наречени add_event.html и show_event.html. Поддържайте страниците прости, както е показано по-долу.
В нашия случай страницата add_event.html ще има заглавен маркер заедно с текста „Добавяне на ново събитие“ и ще има израз за показване на съобщението „Това е за добавяне на ново събитие“.
По същия начин страницата show_event.html също ще има заглавен маркер, който да съдържа текста „Показване на събитие“ и също така има израз на съобщение, за да се покаже съобщението „Това е за показване на събитие“.
Стойността на променливата на съобщението ще се инжектира въз основа на контролера, който е прикрепен към изгледа.
За всяка страница ще добавим променливата на съобщението, която ще се инжектира от всеки съответния контролер.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
От изхода можем да забележим 2 неща
- Адресната лента ще отразява текущия изглед, който се показва. Тъй като изгледът по подразбиране е да покаже екрана Show Show Event, адресната лента показва адреса за "DisplayEvent".
- Този раздел е изгледът, който се създава в движение. Тъй като изгледът по подразбиране е Show Event one, това се показва на потребителя.
Сега кликнете върху връзката Добавяне на ново събитие на показаната страница. Сега ще получите изхода по-долу.
Изход:
- Адресната лента ще отразява, че текущият изглед вече е изглед „Добавяне на ново събитие“. Забележете, че все още ще бъдете на същата страница за кандидатстване. Няма да бъдете насочени към нова страница за кандидатстване.
- Този раздел е изглед и сега ще се промени, за да покаже HTML за функционалността "Добавяне на ново събитие". Така че сега в този раздел на потребителя се показва заглавният таг „Добавяне на ново събитие“ и текстът „Това е за добавяне на ново събитие“.