Понятие routing и templates в приложении AngularJS. Использование ngRoute, $routeProvider.

Применение routing и templates в AngularJS. Использование ngRoute, $routeProvider.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть как применяется routing и templates в AngularJS. Определение ngRoute, $routeProvider.

2. Структура проекта

routingStructure

Структура проекта с предыдущими частями не поменялась. Рассматриваемая тема находится в представлении routing.jsp. В статье будут использованы два шаблона из пакета resources/angularjs/templates (getUser.html и listUsers.html). Из этого же пакета будут взяты angular-resource.min.js и angular-route.min.js (они были подключены с самого начала, но именно здесь мы будем с ними работать).

3. Описание routing и templates AngularJS

Для начала напомню схему одной из первых статей этого раздела.

angularRouting

После конфигурации модуля есть возможность использовать routing, т.е. переключаться между представлениями и контроллерами. Причем представления могут быть созданы с помощью шаблонов (templates). Для этой задачи в AngularJS предусмотрен модуль ngRoute. Модуль ngRoute позволяет соединить контроллер и шаблон по определенному URL (или URL шаблону). Routing в Angular задается с помощью $routeProvider, который является провайдером для сервиса $route. Этот сервис позволяет объединять (связывать) вместе контроллеры, шаблоны представлений и текущий URL в браузере. С помощью этой возможности можно исключить историю браузера, кнопки вперед\назад и закладки.

Сервис $route обычно используется вместе с директивой ngView. Роль этой директивы заключается в том, что в нее будет встроен шаблон представления для текущего route. Сам шаблон — это какой-либо код представления (например html страница) в которой прописаны некие переменные. Эти переменные при связывание будут заполнены данными. Теперь перейдем к коду, чтобы текст выше стал понятнее.

4. Применение routing

Для использования маршрутизации (routing) нужно подключить angular-route.min.js и angular-resource.min.js. Они были подключены сразу в начале обзора AngularJS в шаблоне header’а angular-temaplate.tag. Это было сделано с помощью импорта js файлов.

Далее создаем модуль в зависимости которому передаем модуль ngRoute. А так же создадим объект users с несколькими полями.

Создадим еще один контроллер для нашего модуля. В функцию передадим специальный сервис $http, который будет обрабатывать REST запросы и ответы (этот сервис будет рассмотрен в следующей статье). Зададим маппинг в виде ‘/rest/users‘. В случае успешной обработки ответа сработает метод success и в переменную users запишутся данные ответа.

Еще один контроллер будет использовать сервис $routeParams. Этот сервис содержит мапу параметров, которые находятся в маршруте (route). Здесь следует обратить внимание, что с помощью $http.get(‘/rest/users’) будет вызван метод из Spring MVC класса RestTemplateController. А именно метод getRestUsers() (он описывался в Работа с JSON и XML (преобразование объектов) в Spring MVC. Формирование ответа и обработка запроса). С помощью этого метода мы получаем JSON ответ от стороннего (внешнего) сервера с перечислением Users.

Теперь нужно непосредственно задать конфигурацию для модуля ngRoute (вспомните схему в начале статьи, где после модуля идет Config).

В конфигурацию передаем провайдер $routeProvider и далее задаем случаи, когда этот провайдер будет срабатывать и что делать.

  • При URL /users будет использован шаблон listUsers.html и контроллер ListUserController. В шаблоне будут выведены пользователи, которые были заданы при определении модуля в самом начале.
  • /usersJSON использует тот же шаблон, но будет вызван контроллер ListUserControllerJSON. Наше приложение отправит запрос по адресу /rest/uesers (описан в angular контроллере) и в результате будет вызван контроллер из Spring MVC (который замапин на этот URL) — RestTemplateController.getRestUsers(). Там будет возвращен JSON ответ, который будет вставлен в шаблон listUsers.html.
  •  /users/:userId, где :userId — параметр для ангуляр контроллера GetUserController. Он будет подставлен в id:$routeParams.userId вместо $routeParams.
  • Если ничего не задано или не удовлетворяет условиям в when, то будет совершен редирект к /users, т.е. см. первый пункт.

5. Шаблоны (templates) AngularJS

В проекте использовались два разных шаблона. Они просты, очень просты!

getUser.html:

listUsers.html:

Во втором шаблоне используется директива ng-repeat с помощью которой будет идти перечисление пользователей, полученных в RestTemplateController.

5.1 Подстановка шаблона в представление

При маршрутизации наши шаблоны будут подставляться вместо участка <div ng-view> </div>.

6. Запуск проекта

Результат работы представлен на скриншоте.

routingRun

routingRun2

По нажатию на ссылки будет происходить переключения между контроллерами.

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
5
6103 Total Views 1 Views Today

Добавить комментарий