Вторник, 30 мая, 2017

Как шаблон проектирования Model-View-Controller (MVC) работает в AngularJS?

комментарии: 1

Компонент Controller

В Angular контроллер – это функция Javascript, которая служит для управления экземплярами объектов $scope, кроме корневого.

В основном контроллеры используются для двух целей:

  • Задание первоначальных значений для состояния объекта $scope.
  • Задания поведения для объекта $scope.
Задание первоначальных значений у объекта $scope

Обычно в начале создания приложения нужно задать первоначальные значения для моделей объекта $scope.

Angular прикрепляет функцию конструктора контроллера к новому Angular объекту $scope (аналогично действию Javascript функции apply). Это значит, что Angular никогда не создает экземпляры контроллеров (например с помощью оператора new для контроллера). Конструкторы всегда прикрепляются к уже существующему объекту $scope.

Так задаются модели-свойства объекта $scope:

function GreetingCtrl($scope) {
   $scope.greeting = 'Hola!';
}

В контроллере GreetingCtrl создается модель greeting, которая может быть доступна в шаблоне.

Стоит отметить. Большинство приведенных здесь примеров показывают создание функций для глобального объекта $scope. Это только демонстрация! В реальных приложениях нужно использовать метод .controller для вашего модуля Angular для вашего приложения, например так:

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
   $scope.greeting = 'Hola!';
}]);

Обратите внимание также, что используется запись в виде массива для явного определения зависимости контроллера от объекта $scope, предоставленным Angular.

Определение поведения объекту $scope

Поведение объекта $scope – это методы, которые доступны в шаблонах и представлениях. Поведение взаимодействует и изменяет значения модели приложения.

Как уже было описано ранее любой Javascript объект или примитив присоединенный к объекту $scope является моделью. Также любые функции/методы объекта $scope доступны в шаблонах и представлениях, и они могут быть вызваны через выражения Angular через ng обработчиков событий, типа ngClick.

Правильное использование контроллеров

В общем, контроллер не должен пытаться выполнять слишком много работы. Он должен содержать только логику, необходимую для одного представления.

Самый распространенный способ держать контроллеры не перегруженными кодом – это делегировать работу, которая не нужна в контроллере, в сервисы. А затем использовать эти сервисы в контроллерах через паттерн внедрение зависимости.

Как не нужно использовать контроллеры:

  • Не манипулируйте с моделью DOM – Контроллеры должны содержать только бизнес-логику. Манипуляция DOM-моделью – это презентативная логика приложения и ее очень трудно тестировать. Размещение любой презентативной логики в контроллерах значительно усложняет тестируемость бизнес-логики. У Angular есть замечательное средство такое, как связывание данных для автоматического обновления DOM. Но если все таки нужно выполнить манипуляцию элементами DOM собственными силами, то включайте презентативную логику в директивы.
  • Не используйте для форматирования ввода – для это есть управляющие элементы форм Angular.
  • Не используйте для фильтрации вывода – В Angular применяются фильтры.
  • Не обменивайтесь кодом через контроллеры (с сохранением состояния или нет) – Используйте сервисы.
  • Не управляйте жизнью объекта или компонента (типа создания экземпляра сервиса).
Пример Контроллера Spicy
<body ng-controller="SpicyCtrl">
   <button ng-click="chiliSpicy()">Chili</button>
   <button ng-click="jalapenoSpicy()">Jalapeño</button>
   <p>The food is {{spice}} spicy!</p>
</body>
function SpicyCtrl($scope) {
   $scope.spice = 'very';
   $scope.chiliSpicy = function() {
      $scope.spice = 'chili';
   }
   $scope.jalapenoSpicy = function() {
      $scope.spice = 'jalapeño';
   }
}

Отметим некоторые моменты в примере выше:

  1. Директива ngController используется для неявного создания объекта $scope для нашего шаблона. И этот объект $scope управляется контроллером SpicyCtrl.
  2. SpicyCtrl – это просто функция Javascript. По принятым негласным соглашениям имя начинается с заглавной буквы и заканчивается суффиксом “Ctrl” или “Controller”.
  3. Присваивание свойств $scope, приводит к созданию или обновлению моделей.
  4. Методы контролера могут созданы через прямое присваивание объекту $scope (метод chiliSpicy)
  5. Оба метода контроллера доступны в шаблоне (это для элемента body и его внутренних элементов)
  6. Примечание: В предыдущих версиях Angular (до 1.0 RC) позволялось использовать this вперемешку с методом $scope, но теперь это не так. Внутри методов, определенных в области видимости, this и $scope являются взаимозаменяемыми (Angular устанавливает this в $scope), но не наоборот.
  7. Примечание: В предыдущих версиях Angular (до 1.0 RC) прототип методов добавлялся в область видимости автоматически, но теперь это не так; все методы должны добавляться в области видимости вручную.

Комментарии

loosblog loosblog 06 декабря, 2013, 03:12
Спасибо. Хорошее обьяснение!

 

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

Войти через Twitter Войти через Facebook Войти через ВКонтакте Войти через Github Войти через Google Войти через LinkedIn

Copyright © 2013 All Rights Reserved for CodeHint.ru      Powered by Windows Azure