AngularJS ng-изглед с пример

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

Изгледите (Views) в 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 приложения; в съвременните ъглов еквивалентът е <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 нататък префиксът hash по подразбиране е !, което прави адреса правилен #!/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 приема един view регион на страница.
  • При първото зареждане нищо не се показва: Не. otherwise Клаузата е конфигурирана така, че празен адрес не съответства на маршрут.

Въпроси и Отговори

Не. ngRoute поддържа един регион за преглед на страница. За няколко именувани региона едновременно използвайте библиотеката ui-router, която предоставя ui-view и поддържа вложени и сродни изгледи.

Активирайте HTML5 режим с $locationProvider.html5Mode(true) и добавете базов етикет. След това сървърът трябва да пренапише неизвестни пътища към index.html, в противен случай обновяването връща грешка 404.

До голяма степен. AI Инструментите конвертират таблиците за маршрутизация в масиви Angular Routes и заместват ng-view с router-outlet. Контролерите все още трябва да се пренаписват като компоненти ръчно.

Асистентите с изкуствен интелект бързо проверяват трите обичайни заподозрени: липсваща зависимост ngRoute, хеш префикс, който не съответства на маршрута, и шаблонен път, който браузърът не може да извлече.

Да. Добавете resolve блок към маршрута. AngularJS изчаква тези обещания да се установят, преди да създаде инстанция на контролера, което предотвратява мигането на празен изглед, докато данните пристигат.

Обобщете тази публикация с: