У наш час усі б чули про "Застосування на одній сторінці". Багато відомих веб-сайтів, таких як Gmail, використовують концепцію Single Page Applications (SPA).
SPA - це концепція, коли, коли користувач запитує іншу сторінку, програма не буде переходити до цієї сторінки, а натомість відображатиме вигляд нової сторінки на самій існуючій сторінці.
У користувача виникає відчуття, що він взагалі ніколи не залишав сторінку. Те саме можна досягти в Angular за допомогою Views разом із Routes.
У цьому підручнику ви дізнаєтесь-
- Що таке вигляд?
- Директива ng-view у AngularJS
- Приклад ng-view
Що таке вигляд?
Перегляд - це вміст, який відображається користувачеві. В основному те, що користувач хоче бачити, відповідно, цей вид програми буде показаний користувачеві.
Поєднання видів та маршрутів допомагає розділити програму на логічні види та прив’язати різні подання до контролерів.
Розподіл програми на різні подання та використання маршрутизації для завантаження різної частини програми допомагає логічно розділити програму та зробити її більш керованою.
Припустимо, що у нас є програма для замовлення, в якій клієнт може переглядати замовлення та робити нові.
Наведена нижче схема та подальше пояснення демонструють, як зробити цю програму односторінковою.
Тепер, замість того, щоб мати дві різні веб-сторінки, одну для "Перегляду замовлень", а іншу для "Нових замовлень", в AngularJS ви б замість цього створили два різних подання, що називаються "Перегляд замовлень" та "Нові замовлення" на одній сторінці.
У нашому додатку також буде 2 посилання на посилання, які називаються #show та #new.
- Отже, коли додаток переходить на MyApp / # show, воно відображатиме вид Перегляду замовлень, в той же час воно не залишатиме сторінку. Це лише оновить розділ наявної сторінки з інформацією "Переглянути замовлення". Те саме стосується подання "Нові замовлення".
Таким чином, таким чином стає простіше розділити програму на різні подання, щоб зробити її більш керованою та легко вносити зміни, коли це потрібно.
І кожен вигляд матиме відповідний контролер для управління бізнес-логікою для цієї функціональності.
Директива ng-view у AngularJS
"NgView" - це директива, яка доповнює службу $ route, включаючи відтворений шаблон поточного маршруту у файл основного макета (index.html).
Щоразу, коли змінюється поточний маршрут, подання включає зміни до нього відповідно до конфігурації служби $ route, не змінюючи саму сторінку.
Ми розглянемо маршрути в наступному розділі, наразі ми зосередимося на додаванні кількох подань до нашого додатку.
Нижче наведена вся блок-схема того, як працює весь процес. Ми детально розглянемо кожен процес у нашому прикладі, показаному нижче.
Приклад ng-view
Давайте розглянемо приклад того, як ми можемо реалізувати погляди.
У нашому прикладі ми збираємося представити користувачеві два варіанти:
- Один - відображення "Події", а інший - додавання "Події".
- Коли користувач натискає посилання Додати подію, йому відображається подання "Додати подію", те саме стосується "Відображення події".
Будь ласка, виконайте наведені нижче дії, щоб отримати цей приклад на місці.
Крок 1) Включіть файл angular-route як посилання на сценарій.
Цей файл маршруту необхідний для того, щоб скористатися функціональними можливостями декількох маршрутів та видів. Цей файл можна завантажити з веб-сайту 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}}
Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.
Вихід:
З результату ми можемо помітити дві речі
- Адресний рядок відображатиме поточний вигляд, який відображається. Отож, оскільки типовим поданням є відображення екрана Показати подію, в адресному рядку відображається адреса "DisplayEvent".
- Цей розділ є видом, який створюється на льоту. Оскільки типовим поданням є показ події, саме це відображається користувачеві.
Тепер натисніть посилання Додати нову подію на відображеній сторінці. Тепер ви отримаєте нижченаведений результат.
Вихід:
- Адресний рядок тепер відображатиме, що поточний вигляд тепер є поданням "Додати нову подію". Зверніть увагу, що ви все одно будете на тій же сторінці програми. Вас не перенаправлять на нову сторінку програми.
- Цей розділ є видом, і тепер він зміниться, щоб показати HTML для функціональності "Додати нову подію". Тож у цьому розділі для користувача відображається тег заголовка "Додати нову подію" та текст "Це для додавання нової події".