AngularJS поддерживает одностраничное приложение через несколько видов на одной странице. Для этого AngularJS предоставил директивы ng-view и ng-template и $routeProvider.
ng-view
Тег ng-view просто создает место, где соответствующий вид (html или ng-template view) может быть размещен на основе конфигурации.
Внимание!!!
Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!
Opera
Google Chrome
Mozilla Firefox
Yandex
Применение
Определите div с ng-view в главном модуле.
ng-template
Директива ng-template используется для создания html-представления с использованием тега script. Он содержит атрибут «id», который используется $ routeProvider для сопоставления представления с контроллером.
Применение
Определите блок сценария с типом как ng-шаблон в основном модуле.
$routeProvider
$routeProvider - это ключевой сервис, который устанавливает конфигурацию URL-адресов, сопоставляет их с соответствующей html-страницей или ng-шаблоном и присоединяет контроллер с тем же.
Применение
Определите блок сценария с типом как ng-шаблон в основном модуле.
Применение
Определите блок сценария с основным модулем и настройте конфигурацию маршрутизации.
Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.
- $RouteProvider определяется как функция в конфигурации модуля mainApp, используя ключ как «$routeProvider».
- $RouteProvider.when определяет URL-адрес «/ addStudent», который затем отображается на «addStudent1.htm». addStudent1.htm должен присутствовать на том же пути, что и главная страница html. Если страница htm не определена, то ng-template используется с id = "addStudent.htm".
- "otherwise" используется для установки представления по умолчанию.
- «Контроллер» используется для установки соответствующего контроллера для представления.
Пример
В следующем примере будут показаны все вышеупомянутые директивы.
Результат
Откройте textAngularJS.htm в веб-браузере.
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
Предыдущие статьи
- AngularJS - Ajax - 20/07/2018 17:08
- AngularJS - Подключение вебстраниц - 20/07/2018 17:06
- AngularJS - Формы - 20/07/2018 17:02
- AngularJS - Модули - 20/07/2018 16:34
- AngularJS - HTML DOM - 20/07/2018 16:30
- AngularJS - Таблицы - 20/07/2018 16:26
- AngularJS - Фильтры - 20/07/2018 16:13
- AngularJS - Контроллеры - 20/07/2018 16:09
- AngularJS - Выражения - 20/07/2018 16:03
- AngularJS - Директивы - 20/07/2018 16:02
- AngularJS - первое приложение - 20/07/2018 15:57
- AngularJS - Архитектура MVC - 20/07/2018 15:54
- AngularJS - настройка среды - 20/07/2018 15:43
- Обзор AngularJS - 20/07/2018 15:38
- Изучаем AngularJS - 20/07/2018 15:35