Контроллер ng-controller AngularJS. Наследование контроллеров

Пример использования директивы ng-controller AnugularJS, внедрение контроллера из внешнего js файла, наследование контроллеров.

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

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

Рассмотреть использование директивы ng-controller AnugularJS, внедрение контроллера из внешнего js файла.

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

ngControllerStructure

В данной статье будет использован JavaScript файл externalController.js и представление ng-controller.jsp.

3. Описание контроллера в AngularJS

До этого уже было описание контроллера в AngularJS Hello world example. Основы AngularJS: модуль, контроллер, выражения. Рассмотрим дополнительную информацию о контроллерах в фреймворке AngularJS.

  • Контроллеры определяются и присоединяются к HTML DOM с помощью директивы ng-controller.
  • После создания контроллера AngularJS к нему присоединяется объект $scope.
  • Контроллеры должны использоваться для инициализации переменных в $scope.
3.1. Создание и наследование контроллеров

На HTML страницу можно подключить контроллер с помощью стороннего JS файла. Это делается путем обычного импорта зависимости на странице.

externalController.js:

Контроллер имеет один метод с значением переменной true.

На одной странице можно создать несколько контроллеров, которые могут использовать наследование. Ниже созданы несколько контроллеров в параметры которых передается объект $scope.

Здесь созданы несколько контроллеров, где у каждого есть свои переменные, но один контекст $scope. Чтобы продемонстрировать наследование в разных контроллерах были созданы переменные с одинаковыми именами (firstVar, secondVar).

В параметры метода controller могут быть переданы другие параметры, например сервис.

3.2. ng-controller

Для того чтобы присоединить контроллер к DOM элементу используется директива ng-controller. В общем виде каждая новая директива ng-controller создает новую область видимости (новый $scope) и следовательно у $scope может появиться иерархия. Контроллеры ниже по иерархии имеют доступ к свойствам и методам вышестоящих контроллеров.

Здесь создана таблица, в которой на каждой новой строке выводятся одни и те же переменные. В результате наследования контроллеров, значения строк с одинаковыми названиями переменных (firstVar, secondVar) будут переопределяться. В тоже время для внутренних контроллеров отсутствует переменная zeroVar из первого контроллера, но они всё равно будут иметь к ней доступ.

В конце продемонстрирован вызов метода из импортированного контроллера externalController внутри FirstController.

4. Результа выполнения кода

ngControllerStart

Как видите для каждого контроллера переменная имеет своё, указанное внутри соответствующего контроллера, значение.

 

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

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

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

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