Урок 16 AngularJS: виды и маршруты

Содержание

1. Введение
2. Представления и маршрутизация
3. Добавление файлов представлений
4. Настройка маршрутов
5. Добавление контроллера
6. Установка URL-адресов перехода
7. Очищение URL-адресов
8. Вывод

Введение

В этом уроке мы рассмотрим вопросы, связанные с представлениями и маршрутизацией в AngularJS. Мы уже создали одно представление с помощью шаблона в предыдущих уроках, но когда наше приложение станет более сложным, у нас появится необходимость создавать разные представления для различных страниц. В AngularJS обычно используется одностраничное приложение (SPA), что означает, что при переходе по ссылке страница не перезагружается, а запрашивается новое представление, которое затем помещается в область контента.

Представления и маршрутизация

Для начала нам нужно создать файлы представлений. Создадим папку с названием "views" и в ней создадим два файла - "directory.html" и "home.html". В "directory.html" мы разместим представление для списка ниндзя, а в "home.html" представление для домашней страницы.

Добавление файлов представлений

Откроем файл "index.html" и добавим в него директиву "ng-view". Эта директива указывает AngularJS, куда вставлять представления при переходе по ссылкам. Теперь область контента готова для отображения представлений.

Настройка маршрутов

Для настройки маршрутизации в AngularJS используется провайдер $routeProvider. Мы добавим его в блок "config" нашего приложения. В методе "config" мы определим маршруты с помощью метода "when". Для каждого маршрута мы указываем URL и соответствующий шаблон представления. Мы также создадим обработчик для случая, когда пользователь переходит по несуществующему URL, с помощью метода "otherwise".

Добавление контроллера

В представлениях мы можем использовать контроллеры для управления функциональностью. В файле "app.js" создадим контроллер "NinjaController", который будет отвечать за представление со списком ниндзя.

Установка URL-адресов перехода

Теперь давайте настроим URL-адреса для перехода между представлениями. Добавим в шапку ссылки с атрибутом "href", указывающим на соответствующие URL-адреса для домашней страницы и списка ниндзя.

Очищение URL-адресов

В URL-адресах AngularJS использует символ "#", чтобы создавать свои маршруты. Если мы хотим удалить этот символ из URL-адресов, мы можем воспользоваться специальной настройкой. Мы рассмотрим это подробнее в следующем уроке.

Вывод

В этом уроке мы разобрались с представлениями и маршрутизацией в AngularJS. Мы настроили представления для домашней страницы и списка ниндзя, добавили контроллер для управления функциональностью, установили URL-адреса для перехода между представлениями и разобрались с очисткой URL-адресов. Теперь наше приложение готово к использованию разных представлений.