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

| Пятница, 2 августа, 2013

Метки: AngularJS, Javascript Комментарии: 0

Паттерн Model-View-Controller (MVC, "модель-представление-контроллер") появился очень давно. Данная концепция описана еще в 1979 году. И по прошествии многих лет MVC получил множество интерпретаций. Angular перенял основные принципы, лежащие в основе оригинальной архитектуры MVC и преобразовал их в собственный способ построения клиентских веб-приложений. Разберемся подробнее - как это работает.

Из отличительных признаков MVC можно выделить следующие:

  • Разделение приложения на три ярко выраженные составляющие: представление, данные и бизнес-логика.
  • Соблюдение слабой связанности (loose coupling) между тремя выше перечисленными компонентами.

С помощью сервисов и паттерна "внедрения зависимости - dependency injection)" MVC делает приложения angular более структурированными, легкими в поддержке и c хорошей автоматической тестируемостью.

Сервисы в Angular выполняют ту же функцию, что и сервисы в приложениях на сервере, сервисы работают как постоянные легко-заменяемые блоки, объекты или компоненты, которые связаны между собой через паттерн внедрения зависимости (dependency injection).

Для понимания того, как Angular использует MVC в веб-приложениях, рассмотрим по отдельности как каждый из компонентов MVC действует в Angular:

Компонент Model

В зависимости от контекста понятие model может обозначать как один объект, представляющий одну сущность (например объект "phones" со значением массива телефонов), так и модель всех данных приложения (много разных сущностей).

В Angular моделью могут быть любые данные, которые являются свойством встроенного angular-объекта $scope. Идентификатором модели является имя свойства. Значением свойства может быть любой Javascript-объект. (включая массивы и простые типы).

Единственное требование для того, чтобы объект JavaScript являлся моделью – это то, чтобы свойство объекта $scope ссылалось на него. Свойство может быть создано явно или неявно.

Явно модели можно создавать как свойства объекта $scope следующими способами:

  • Например, можно присвоить значение свойству объекта $scope прямо в коде Javascript, это обычно применяется в контроллерах:
    function MyCtrl($scope) {
        // создаем свойство 'foo' для объекта $scope контроллера MyCtrl
        // и присваиваем ему значение 'bar'
        $scope.foo = 'bar';
     }
    
  • Можно использовать выражения Angular с оператором присваивания в шаблоне:
    <button ng-click="{{foo='bar'}}">Click me</button>
    
  • Можно использовать директиву ngInit, но это только в любопытствующих целях, в реальных приложениях так делать не рекомендуется.
    <body ng-init=" foo = 'bar' ">
    

Неявно Angular создает модели (создавая свойство для $scope и присваивая нужное значение), когда обрабатывает следующие конструкции:

  • Html-элементы для форм такие, как input, select, textarea и тому подобные:
    <input ng-model="query" value="fluffy cloud">
    
    В коде выше создается модель с именем "query" для текущего объекта $scope и этой модели присваивается значение "fluffy cloud".
  • Итератор ngRepeater:
    <p ng-repeat="phone in phones"></p>
    
    В этом коде для каждого элемента массива "phones" создается дочерний объект $scope и в каждом этом объекте создается свойство "phone" со значением элемента массива.

В Angular объект JavaScript перестает быть моделью если:

  • В объекте $scope нет свойства, ссылающегося на этот объект JavaScript.
  • Все объекты $scope, которые содержат свойство со ссылкой на объект JavaScript, устарели и ожидают удаления сборщиком мусора.

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

Комментарии
Никто еще не оставил здесь комментарий.
Войдите, чтобы написать комментарий , или воспользуйтесь формой ниже.
 

Copyright © CodeHint.ru 2013-2024 (v2.4.7 - работает на Angular Universal)Калькулятор инвест-портфеля