В наши дни все бы услышали о «Одностраничных приложениях». Многие из известных веб-сайтов, таких как Gmail, используют концепцию одностраничных приложений (SPA).
SPA — это концепция, при которой, когда пользователь запрашивает другую страницу, приложение не будет переходить на эту страницу, а вместо этого отображает представление новой страницы на самой существующей странице.
Это дает пользователю ощущение, что он никогда не покинул страницу. То же самое может быть достигнуто в Angular с помощью Views в сочетании с Routes.
В этом уроке вы узнаете
Что такое вид?
Представление — это контент, который показан пользователю. В основном то, что хочет видеть пользователь, соответственно, то представление приложения будет показано пользователю.
Комбинация представлений и маршрутов помогает разделить приложение на логические представления и связать разные представления с контроллерами.
Разделение приложения на разные виды и использование маршрутизации для загрузки разных частей приложения помогает логически разделить приложение и сделать его более управляемым.
Предположим, у нас есть приложение для заказа, в котором клиент может просматривать заказы и размещать новые.
Приведенная ниже диаграмма и последующее объяснение демонстрируют, как сделать это приложение одностраничным.
Теперь вместо AngularJS вместо двух разных веб-страниц, одной для «Просмотр заказов» и другой для «Новые заказы», вы должны создать на одной странице два разных представления, которые называются «Просмотр заказов» и «Новые заказы».
У нас также будет 2 ссылочные ссылки в нашем приложении, которые называются #show и #new.
- Поэтому, когда приложение переходит в MyApp / # show, оно отображает представление View Orders, при этом оно не покидает страницу. Он просто обновит раздел существующей страницы информацией «Просмотр заказов». То же самое касается представления «Новые заказы».
Таким образом, становится проще разделить приложение на разные представления, чтобы сделать его более управляемым и легко вносить изменения при необходимости.
И каждое представление будет иметь соответствующий контроллер для управления бизнес-логикой для этой функциональности.
Директива ng-view в AngularJS
«NgView» — это директива, которая дополняет службу $ route путем включения отображаемого шаблона текущего маршрута в основной файл макета (index.html).
Каждый раз, когда текущий маршрут изменяется, включенное представление изменяется в соответствии с конфигурацией службы $ route без изменения самой страницы.
Мы рассмотрим маршруты в следующей главе, а сейчас мы сосредоточимся на добавлении нескольких представлений в наше приложение.
Ниже приведена блок-схема всего процесса. Мы подробно рассмотрим каждый процесс в нашем примере, показанном ниже.
Пример ng-view
Давайте посмотрим на пример того, как мы можем реализовать представления.
В нашем примере мы собираемся представить пользователю два варианта,
- Один из них — «Событие», а другой — «Событие».
- Когда пользователь нажимает на ссылку «Добавить событие», ему отображается представление «Добавить событие», и то же самое относится и к «Показать событие».
Пожалуйста, следуйте инструкциям ниже, чтобы получить этот пример на месте.
Шаг 1) Включите файл angular-route в качестве ссылки на скрипт.
Этот файл маршрута необходим для того, чтобы использовать функции наличия нескольких маршрутов и видов. Этот файл можно скачать с сайта angularJS.
Шаг 2) На этом этапе
- Добавьте теги 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
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{message}}
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода мы можем заметить 2 вещи
- Адресная строка будет отображать то, что отображается в данный момент. Таким образом, поскольку по умолчанию отображается экран «Показать событие», в адресной строке отображается адрес «DisplayEvent».
- Этот раздел является представлением, которое создается на лету. Поскольку представление по умолчанию — это Показать событие, это то, что отображается для пользователя.
Теперь нажмите на ссылку Добавить новое событие на отображаемой странице. Теперь вы получите вывод ниже.
Вывод:
- Адресная строка теперь будет отображать, что текущее представление теперь является представлением «Добавить новое событие». Обратите внимание, что вы все равно будете на той же странице приложения. Вы не будете перенаправлены на новую страницу приложения.
- Этот раздел является представлением, и теперь он изменится, чтобы показать HTML-код для функции «Добавить новое событие». Поэтому теперь в этом разделе пользователю отображается тег заголовка «Добавить новое событие» и текст «Это добавить новое событие».