AngularJS ng-view з прикладом

Автор: Джеймс Гартман Джеймс Гартман
Hours оновлений

⚡ Розумний підсумок

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

  • 🪟 Одинарний заповнювач: Один елемент, що містить ng-view, позначає, куди вводиться кожен маршрутизований шаблон, і на сторінці дозволено лише один такий елемент.
  • 🔗 Сполучення маршрутів: Кожен маршрут іменує templateUrl та контролер, зв'язуючи розмітку та логіку разом для цього представлення.
  • 📦 Залежність модуля: Для переглядів потрібен angular-route.js та оголошена залежність від модуля ngRoute.
  • 🎯 Вид за замовчуванням: Речення otherwise перенаправляє будь-яку адресу, що не відповідає збігу, що і створює вигляд під час першого завантаження.
  • 🌐 Потрібен сервер: Шаблони отримуються через HTTP, тому сторінку потрібно обслуговувати, а не відкривати з файлової системи.
  • ⚠️ Статус підтримки: Життєвий цикл AngularJS завершився 31 грудня 2021 року та не отримує подальших патчів безпеки.
Детальніше

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

Відомі сайти, такі як Gmail використовуйте концепцію односторінкових застосунків. Коли користувач запитує іншу сторінку, застосунок не переходить на іншу; він відображає вигляд нової сторінки всередині існуючої, тому створюється враження, ніби користувач ніколи не залишав її. Те саме досягається в AngularJS за допомогою представлень разом із маршрутами.

⚠️ Повідомлення служби підтримки: Досягнуто AngularJS кінець терміну служби 31 грудня 2021 року і не отримує подальших виправлень чи виправлень безпеки. Наведена нижче директива залишається актуальною для підтримки існуючих програм AngularJS 1.x; у сучасних Angular еквівалентом є <router-outlet>.

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

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

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

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

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

Замість двох окремих веб-сторінок, однієї для «Перегляду замовлень» та однієї для «Нових замовлень», AngularJS використовує два представлення на одній сторінці, до яких можна дістатися через два посилання, #show та #new:

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

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

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

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

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

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

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

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

У цьому прикладі користувачеві пропонуються два варіанти: відобразити подію та додати подію. Натискання Додати подію відображається режим перегляду «Додати подію», і те саме стосується режиму «Відобразити подію».

Крок 1) Включіть файл angular-route як посилання на скрипт. Цей файл потрібен для використання кількох маршрутів та представлень і доступний на сайті AngularJS.

Включити файл angular-route

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

  1. Додайте теги href, що посилаються на «Додати нову подію» та «Відобразити подію».
  2. Додайте div, що містить ng-view директива для позначення області перегляду. Відповідний перегляд вставляється туди щоразу, коли натискається будь-яке з посилань.

Додайте теги href та тег div

Крок 3) У тегу скрипта AngularJS додайте конфігурацію маршрутизації.

  1. Коли користувач натискає на Нова подія посилання, завантаження AngularJS add_event.html, вставляє свою розмітку у вигляд та використовує AddEventController для бізнес-логіки.
  2. Коли користувач натискає на Подія відображення посилання, воно завантажується show_event.html і використовує ShowDisplayController.
  3. Команда otherwise встановлює вигляд за замовчуванням, який відображається користувачеві, тут це DisplayEvent.

Конфігурація маршрутизації

Крок 4) Додайте контролери для обробки бізнес-логіки обох функцій. Кожна з них просто встановлює повідомлення для свого об'єкта області видимості, яке відображається, коли відображається відповідне представлення.

Додати контролери

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.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 to display an Event";
    });
</script>

</body>
</html>

⚠️ Три виправлення до початкового списку. Спочатку посилання читаються #!NewEvent без косої риски, тоді як маршрути оголошені як /NewEvent, тому нічого не збіглося. Починаючи з AngularJS 1.6, хеш-префікс за замовчуванням такий !, що робить адресу правильною #!/NewEvent — коса риска після знака оклику. По-друге, ShowDisplayController встановити повідомлення «Це відображення події», пропустивши слово до що цитується в навколишньому тексті. По-третє, lib/bootstrap.js було завантажено з відносного шляху, який нікуди не веде та ніколи не використовується, тому його було видалено.

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

Крок 5) Створіть сторінки add_event.html та show_event.htmlКожен містить заголовок та вираз, який відображає повідомлення, введене його контролером.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

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

вихід:

Вивід ng-view

Вивід ng-view

Поширені помилки ng-view та як їх виправити

Майже кожен збій ng-view виникає через підключення модуля, формат адреси або спосіб обслуговування сторінки, а не через саму директиву.

  • Область перегляду залишається порожньою: ngRoute модуль не був вказаний як залежність, або angular-route.js не було завантажено. Обидва обов'язкові, а скрипт має йти після angular.min.js.
  • Посилання змінюють адресу, але нічого не відображається: href не відповідає маршруту. З AngularJS 1.6 адреса потребує #!/Route; використано старіший код, написаний для версії 1.5 #/Route.
  • Шаблони не завантажуються через помилку CORS: сторінку було відкрито безпосередньо з диска. Обслуговуйте її через HTTP, оскільки templateUrl отримується AJAX-запитом з блоків протоколу файлу.
  • З'являється лише останній перегляд: більше одного елемента містить ng-view. AngularJS обробляє одну область перегляду на сторінці.
  • При першому завантаженні нічого не відображається: немає otherwise речення налаштоване таким чином, що порожня адреса не відповідає жодному маршруту.

Поширені запитання

Ні. ngRoute підтримує одну область перегляду на сторінку. Для кількох іменованих областей одночасно використовуйте бібліотеку ui-router, яка надає ui-view та підтримує вкладені та споріднені представлення.

Увімкнути режим HTML5 за допомогою $locationProvider.html5Mode(true) і додати базовий тег. Потім сервер повинен перезаписати невідомі шляхи до index.html, інакше оновлення поверне помилку 404.

Значною мірою. AI Інструменти конвертують таблиці маршрутів у масиви Angular Routes та замінюють ng-view на router-outlet. Контролери все ще потрібно переписувати як компоненти вручну.

Помічники ШІ швидко перевіряють три звичайні підозрювані: відсутню залежність ngRoute, хеш-префікс, який не відповідає маршруту, та шаблон шляху, який браузер не може отримати.

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

Підсумуйте цей пост за допомогою: