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