Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.
По мере роста приложения, контроллеры имеют обыкновение разрастаться до такой степени, что однажды среди них становится достаточно сложно ориентироваться. Classy использует подход на основе классов и наследует некоторые идеи из AngularDart, чтобы сделать код более чистым и структурированным.
Те, кто пытался минифицировать Angular-код знают, что для его корректной работы необходима аннотация зависимостей. Нативный код с повторениями при этом выглядит примерно так:
Помимо того, что такого рода аннотация занудна, она и выглядит как-то не очень… С Classy всё обстоит по-другому:
В большинстве случаев, когда мы создаём функцию в контроллере, нам важно, чтобы она была доступна в $scope, например, чтобы иметь к ней доступ из шаблона. Знайте: все функции объекта будут автоматически добавлены в $scope. Иными словами, нативный код без Classy выглядящий так:
С Classy выглядит так:
А если вы не хотите, чтобы та или иная функция была добавлена в $scope, просто используйте символ «_» в качестве префикса в её названии.
Для доступа к свойствам $scope можно просто обращаться к
Вместо захламления метода init кучей вызовов
Обратите внимание на
И это ещё не все приятности, которые есть в Classy!
Заинтересовавшихся прошу ознакомиться.
Структура
По мере роста приложения, контроллеры имеют обыкновение разрастаться до такой степени, что однажды среди них становится достаточно сложно ориентироваться. 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!
Заинтересовавшихся прошу ознакомиться.
