AngularJS ng-view с примером
Джеймс Хартман
⚡ Умное резюме
В AngularJS представления позволяют одной странице менять свое содержимое вместо перехода на другую страницу, что и создает ощущение мгновенной загрузки контента в одностраничном приложении. Директива ng-view указывает область, которую каждый маршрут заменяет собственным шаблоном и контроллером.
Известные сайты, такие как Gmail Используйте концепцию одностраничных приложений (Single Page Applications). Когда пользователь запрашивает другую страницу, приложение не переходит на другую страницу; оно отображает представление новой страницы внутри существующей страницы, поэтому создается ощущение, что пользователь и не покидал сайт. То же самое достигается в AngularJS с помощью представлений (views) и маршрутов (routes).
⚠️ Уведомление службы поддержки: AngularJS достиг Прекращение поддержки 31 декабря 2021 года. и не получает дальнейших исправлений или обновлений безопасности. Приведенная ниже директива остается актуальной для поддержки существующих приложений AngularJS 1.x; в современных Угловой эквивалентом является <router-outlet>.
Что такое представление?
Представление — это контент, отображаемый пользователю. Все, что пользователь хочет увидеть, отображается в соответствующем представлении приложения.
Объединение представлений и маршрутов разделяет приложение на логические представления и связывает каждое из них с определенным маршрутом. контроллерчто делает приложение более удобным в использовании.
Предположим, у нас есть приложение для оформления заказов, в котором клиент может просматривать заказы и размещать новые. На диаграмме ниже показано, как оно превращается в одностраничное приложение.
Вместо двух отдельных веб-страниц, одной для «Просмотра заказов» и другой для «Новых заказов», AngularJS использует два представления на одной странице, доступ к которым осуществляется по двум ссылкам. #show и #new:
- Переход к
MyApp/#showОтображает раздел «Просмотр заказов», не покидая страницу. Обновляется только этот раздел текущей страницы. - Переход к
MyApp/#newТо же самое относится и к разделу «Новые заказы».
Разделение приложения на представления таким образом делает его управляемым и простым в изменении, при этом каждое представление имеет соответствующий контроллер, содержащий бизнес-логику для данной функции.
Директива ng-view в AngularJS
нгвиев Директивы дополняет $route сервиса путем включения отрисованного шаблона текущего маршрута в основной файл разметки, обычно index.html.
При каждом изменении текущего маршрута соответствующее отображение также изменяется. $route настройка, без перезагрузки самой страницы. Маршруты Эти вопросы рассматриваются отдельно; здесь же основное внимание уделяется добавлению нескольких представлений.
Приведенная ниже блок-схема показывает весь процесс, который затем пошагово рассматривается в примере.
Как реализовать ng-view в AngularJS
В этом примере пользователю предлагаются два варианта: отобразить событие и добавить событие. Нажатие кнопки мыши Добавить событие Отображается окно «Добавить событие», и то же самое относится к окну «Отобразить событие».
Шаг 1) Включите файл angular-route в качестве ссылки на скрипт. Этот файл необходим для использования нескольких маршрутов и представлений и доступен на сайте AngularJS.
Шаг 2) Добавьте теги href и тег div.
- Добавьте теги href, ведущие к разделам «Добавить новое событие» и «Отобразить событие».
- Добавьте div, содержащий
ng-viewДиректива для обозначения области просмотра. Соответствующее представление добавляется туда при каждом щелчке по любой из ссылок.
Шаг 3) В теге <script> AngularJS добавьте конфигурацию маршрутизации.
- Когда пользователь щелкает Новое событие ссылка, AngularJS загружает
add_event.htmlвнедряет свою разметку в представление и используетAddEventControllerдля бизнес-логики. - Когда пользователь щелкает DisplayEvent ссылка, она загружается
show_event.htmlи используетShowDisplayController. -
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
<h2>Add New Event</h2> {{message}}
- show_event.html
<h2>Show Event</h2> {{message}}
Если код будет выполнен успешно, в браузере отобразится следующий результат.
Выход:
Распространенные ошибки 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Условие задано, поэтому пустой адрес не соответствует ни одному маршруту.
