Лёгкие контроллеры с Angular Classy

от автора

Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.


Структура

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


Нет необходимости подробно описывать зависимости

Те, кто пытался минифицировать Angular-код знают, что для его корректной работы необходима аннотация зависимостей. Нативный код с повторениями при этом выглядит примерно так:

app.controller('AppCtrl',   ['$scope', '$location', '$http',   function($scope, $location, $http) {     // ... }]); 

Помимо того, что такого рода аннотация занудна, она и выглядит как-то не очень… С Classy всё обстоит по-другому:

app.classy.controller({   name: 'AppCtrl',   inject: ['$scope', '$location', '$http'],   //... }); 


Удобный $scope

В большинстве случаев, когда мы создаём функцию в контроллере, нам важно, чтобы она была доступна в $scope, например, чтобы иметь к ней доступ из шаблона. Знайте: все функции объекта будут автоматически добавлены в $scope. Иными словами, нативный код без Classy выглядящий так:

$scope.editTodo = function(todo) {   //... } 

С Classy выглядит так:

editTodo: function(todo) {   //... } 

А если вы не хотите, чтобы та или иная функция была добавлена в $scope, просто используйте символ «_» в качестве префикса в её названии.

Кроткая запись $scope

Для доступа к свойствам $scope можно просто обращаться к this.$.foo = 'bar'; вместо this.$scope.foo = 'bar';. При этом использование this.$scope также не возбраняется.


Специальный объект для слушателей $watch

Вместо захламления метода init кучей вызовов $scope.$watch, Classy предлагает складывать их в специальный объект:

watch: {   'location.path()': function(newValue, oldValue) {     // ...   },   '{object}todos': function (newValue, oldValue) {     // ...   } } 

Обратите внимание на {object} в названии второго слушателя. Такая запись позволяет указать тип слушателя. Так, присутствие {collection} или {shallow} будет указывать на то, что к объекту следует применять $watchCollection(). Полный список возможных значений можно найти на сайте Classy.


И это ещё не все приятности, которые есть в Classy!
Заинтересовавшихся прошу ознакомиться.

ссылка на оригинал статьи http://habrahabr.ru/post/221903/


Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *