Лёгкие контроллеры с 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! Заинтересовавшихся прошу ознакомиться.
