AngularJS ng-view с примером: как реализовать представление
Сегодня каждый слышал бы об «Одностраничных приложениях». Многие известные веб-сайты, такие как Gmail, используют концепцию одностраничных приложений (SPA).
SPA — это концепция, согласно которой, когда пользователь запрашивает другую страницу, приложение не будет переходить на эту страницу, а вместо этого отображает представление новой страницы внутри самой существующей страницы.
Это дает пользователю ощущение, что он вообще никогда не покидал страницу. Того же самого можно добиться в Angular с помощью Views в связке с Routes.
В этом уроке вы узнаете-
- Что такое представление?
- Директива ng-view в AngularJS
- Как реализовать ng-view в AngularJS на примере
Что такое представление?
Представление — это контент, который отображается пользователю. По сути, то, что пользователь хочет видеть, соответственно, пользователю будет показано именно это представление приложения.
Комбинация представлений и маршрутов помогает разделить приложение на логические представления и привязать разные представления к контроллерам.
Разделение приложения на разные представления и использование маршрутизации для загрузки разных частей приложения помогает логически разделить приложение и сделать его более управляемым.
Предположим, у нас есть приложение для заказа, в котором клиент может просматривать заказы и размещать новые.
На приведенной ниже диаграмме и в последующем пояснении показано, как сделать это приложение одностраничным.
Теперь вместо двух разных веб-страниц, одной для «Просмотра заказов», а другой для «Новых заказов», в AngularJS, вместо этого вы создадите два разных представления под названием «Просмотр заказов» и «Новые заказы» на одной странице.
В нашем приложении также будет две ссылочные ссылки: #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» и «Добавить новое событие».
Мы просто добавляем переменную сообщения к каждому объекту области действия для каждого контроллера. Это сообщение будет отображаться, когда пользователю будет показано соответствующее представление.
<!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 для функции «Добавить новое событие». Итак, теперь в этом разделе пользователю отображаются тег заголовка «Добавить новое событие» и текст «Это добавление нового события».