AngularJS ng-view із прикладом: як реалізувати представлення

Зараз усі чули б про «односторінкові програми». Багато відомих веб-сайтів, таких як Gmail, використовують концепцію односторінкових програм (SPA).

SPA — це концепція, згідно з якою, коли користувач запитує іншу сторінку, програма не переходить на цю сторінку, а натомість відображатиме вигляд нової сторінки всередині самої існуючої сторінки.

Це дає користувачеві відчуття, що він ніколи не залишав сторінку. Того ж можна досягти в Angular за допомогою Views у поєднанні з Routes.

У цьому підручнику ви дізнаєтесь-

Що таке перегляд?
Директива ng-view в AngularJS
Як реалізувати ng-view в AngularJS за допомогою прикладу

Що таке перегляд?

Перегляд – це вміст, який показується користувачеві. В основному те, що користувач хоче бачити, відповідно, це подання програми буде показано користувачеві.

Поєднання представлень і маршрутів допомагає розділити програму на логічні представлення та прив’язати різні представлення до контролерів.

Поділ програми на різні види та використання маршрутизації для завантаження різних частин програми допомагає логічно розділити програму та зробити її більш керованою.

Припустімо, що у нас є програма для замовлення, у якій клієнт може переглядати замовлення та розміщувати нові.

Наведена нижче схема та наступні пояснення демонструють, як зробити цю програму односторінковою.

Тепер замість двох різних веб-сторінок, однієї для «Перегляду замовлень», а іншої для «Нових замовлень», у AngularJS, натомість ви створили б два різні перегляди під назвою «Перегляд замовлень» і «Нові замовлення» на одній сторінці.

У нашій програмі також буде 2 посилання на посилання під назвою #show і #new.

Отже, коли програма переходить до MyApp/#show, вона відображатиме перегляд замовлень, але в той же час вона не залишатиме сторінку. Він просто оновить розділ наявної сторінки з інформацією «Переглянути замовлення». Те саме стосується перегляду «Нові замовлення».

Отже, таким чином стає простіше розділити програму на різні перегляди, щоб зробити її більш керованою та легко вносити зміни, коли це необхідно.

Кожне представлення матиме відповідний контролер для керування бізнес-логікою цієї функції.

Директива ng-view в AngularJS

«ngView» — це директива, яка доповнює службу $route, включаючи відтворений шаблон поточного маршруту в основний файл макета (index.html).

Кожного разу, коли поточний маршрут змінюється, перегляд включає зміни до нього відповідно до конфігурації служби $route без зміни самої сторінки.

Ми будемо покривати маршрути у наступному розділі, наразі, ми зосередимося на додаванні кількох переглядів до нашої програми.

Нижче наведено повну блок-схему того, як працює весь процес. Ми детально розглянемо кожен процес у нашому прикладі, наведеному нижче.

Як реалізувати ng-view в AngularJS

Давайте розглянемо приклад того, як ми можемо реалізувати ng-view в AngularJS. У нашому прикладі ми надамо користувачеві два варіанти:

Один — відобразити «подію», а інший — додати «подію».
Коли користувач натискає посилання «Додати подію», йому буде показано вікно «Додати подію», а також «Показати подію».

Будь ласка, виконайте наведені нижче кроки, щоб отримати цей приклад.

Крок 1) Включіть файл angular-route як посилання на сценарій.

Цей файл маршруту необхідний для використання функціональних можливостей наявності кількох маршрутів і переглядів. Цей файл можна завантажити з веб-сайту angularJS.

Крок 2) Додайте теги href і теги div.

На цьому етапі

Додайте теги 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».

Ми просто додаємо змінну повідомлення до кожного об’єкта області для кожного контролера. Це повідомлення буде показано, коли користувачу буде показано відповідне подання.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

Крок 5) Створіть сторінки з назвами add_event.html і show_event.html

Далі створіть сторінки з назвами add_event.html і show_event.html. Зберігайте сторінки простими, як показано нижче.

У нашому випадку сторінка add_event.html матиме тег заголовка разом із текстом «Додати нову подію» та вираз для відображення повідомлення «Це додавання нової події».

Подібним чином сторінка show_event.html також матиме тег заголовка для вмісту тексту «Показати подію», а також матиме вираз повідомлення для відображення повідомлення «Це для відображення події».

Значення змінної повідомлення буде введено на основі контролера, який приєднаний до перегляду.

Для кожної сторінки ми збираємося додати змінну повідомлення, яка буде введена з кожного відповідного контролера.

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>
	
{{message}}

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З результату ми можемо помітити 2 речі

Адресний рядок відображатиме те, що відображається наразі. Отже, оскільки за замовчуванням відображається екран «Показати подію», адресний рядок показує адресу «DisplayEvent».
Цей розділ є видом, який створюється на льоту. Оскільки типовим переглядом є «Показати подію», це те, що відображається користувачеві.

Тепер натисніть посилання «Додати нову подію» на сторінці, що відобразиться. Тепер ви отримаєте наведений нижче результат.

вихід:

Тепер в адресному рядку відображатиметься те, що поточне подання – це подання «Додати нову подію». Зверніть увагу, що ви все ще перебуватимете на тій самій сторінці програми. Вас не буде спрямовано на нову сторінку програми.
Цей розділ є Переглядом, і тепер він зміниться, щоб показати HTML для функції «Додати нову подію». Тепер у цьому розділі користувачеві відображається тег заголовка «Додати нову подію» та текст «Це додавання нової події».

Вам може сподобатися:

Що таке перегляд?

Директива ng-view в AngularJS

Як реалізувати ng-view в AngularJS

СТАТТІ ПО ТЕМІ