Внедрение зависимостей (Dependency Injection) в AngularJS

Пример использования внедрения зависимостей в AngularJS.

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

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

Рассмотреть пример использования внедрения зависимостей в AnugularJS.

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

angularDIStructure

Внедрение зависимостей рассматривается на странице angularDI.jsp. Внедряемые зависимости были добавлены в пакет resources\angularjs\dependencies (factory.jsprovider.jsroot.jsservice.js)

3. Внедрение зависимостей в AngularJS

  • AngularJS поддерживает модульную разработку и предоставляет возможность разделения приложения на слои.
  • Приложения AngularJS начинаются с определения главного модуля.
  • Модули могут быть заданы в различных js файлах.
  • Модули могут быть внедрены в другие модули.
  • Разработчики могут определять контроллеры, сервисы, фильтры, фабрики, директивы и т.п. в различных модулях.
  • Различные модули можно импортировать с помощью <script src=’test.js’> </script>
3.1. Способы внедрения зависимостей

Существует несколько способов внедрения зависимостей в AngularJS.

  • Использование массива с перечислением (рекомендуется).
  • Использование свойства $inject.
  • Непосредственно из имени параметра функции (существуют оговорки)

Итак рассмотрим по порядку. С помощью массива зависимости внедряются следующим образом:

С помощью $inject:

С помощью неявного внедрения (через функцию):

4. Применение внедрения зависимостей в AngularJS

Сначала мы добавляем на страницу несколько javascript файлов, которые будут предоставлять нам определенный код, который мы будем внедрять в необходимые html элементы.

4.1. factory.js

Этот файл создает зависимости по требованию. После того как загрузка дойдет до вызова контроллера factoryController будет произведена инициализация переменных с помощью метода factory().

4.2. provider.js

Провайдер это фабрика, настроенная особым образом. Провайдер ожидает функцию $get, которая будет внедрять другую часть приложения. Здесь в функции определяется переменная name и по запросу к $get будет возвращено значение Java Spring MCV and AngularJS.

4.3. root.js

Определяем некий root элемент (rootObject = someObject), который затем используется на html странице с помощью выражения {{rootObject}}.

4.4. service.js

Здесь определяется вызов определенной функции с передачей параметра внутрь функции.

5. Запуск приложения

При загрузке страницы будут всплывать алерты с указанием внедренной зависимости. После этого мы увидим следующую страницу с данными.

angularDI

 

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

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

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

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