Лёгкие контроллеры с 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!

Заинтересовавшихся прошу ознакомиться.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.