Хобрук: Ваш путь к мастерству в программировании

Какова цель использования квадратных скобок в Angular?

Я хотел бы понять разницу между объявлением MyOtherService и MyOtherComplexService. В частности, какова цель квадратной скобки? Когда их использовать, а когда нет?

var myapp = angular.module('myapp', []);

myapp.factory('MyService', function($rootScope, $timeout) {
    return {
        foo: function() {
            return "MyService";
        }
    }
});

myapp.factory('MyOtherService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherService";
        }
    }
});

myapp.factory('MyOtherComplexService', ['$rootScope', '$timeout', 'MyService', function($rootScope, $timeout, MyService) {
    return {
        foo: function() {
            return "MyOtherComplexService";
        }
    } 
}]);

myapp.controller('MyController', function($scope, MyOtherService, MyOtherComplexService) {

    $scope.x = MyOtherService.foo();
    $scope.y = MyOtherComplexService.foo(); 
});
javascript angularjs
03.08.2013

Ответы:


1

Это позволяет минимизировать код AngularJS. AngularJS использует имена параметров для ввода значений в функцию вашего контроллера. В процессе минификации JavaScript эти параметры переименовываются в более короткие строки. Сообщая, какие параметры вводятся в функцию с помощью массива строк, AngularJS может вводить правильные значения при переименовании параметров.

03.08.2013

2

Чтобы добавить к ответ Уфука:

ngmin — компилирует ваши стандартные модули в мини-безопасные модули

Минимальная квадратная скобка Angular явно менее удобна, потому что вам нужно вводить каждую зависимость дважды, а порядок аргументов имеет значение. Существует инструмент под названием ngmin, который компилирует ваши стандартные модули в мини-безопасные модули, поэтому вам не нужно управлять всеми те вещи своими руками.

Угловой + CoffeeScript

Если вы используете CoffeeScript, ситуация еще хуже. Вы можете выбрать между ngmin, который уничтожит вашу исходную карту, или, если вы хотите написать все самостоятельно, вам придется заключить весь код в квадратные скобки , что очень некрасиво.

angular.module('whatever').controller 'MyCtrl', ['$scope', '$http' , ($scope, $http) ->
  # wrapped code
]

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

deps = (deps, fn) ->
  deps.push fn
  deps

Это очень простая функция, которая принимает два аргумента. Первый — это массив строк, содержащих ваши зависимости, второй — функция вашего модуля. Вы можете использовать его следующим образом:

angular.module('whatever').controller 'MyCtrl', deps ['$scope', '$http'] , ($scope, $http) ->
  # unwrapped code \o/
03.08.2013

3

Просто чтобы проиллюстрировать то, что уже было сказано, если вы используете следующий синтаксис:

myapp.factory('MyService', function($scope, $http, MyService) { ... });

большинство минификаторов JS изменит его на:

myapp.factory('MyService', function(a, b, c) { ... });

поскольку имена аргументов функций обычно можно переименовывать в более короткие имена. Это сломает код Angular.

В Angular, чтобы ваш код можно было минимизировать во всех минификаторах, вы используете синтаксис скобок:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function($scope, $http, MyService) { ... }]);

который будет уменьшен до:

myapp.factory('MyService', ['$scope', '$http', 'MyService', function(a, b, c) { ... }]);

Обратите внимание, что минификаторы не затрагивают строки, поэтому Angular увидит минимизированный код и сопоставит аргументы по порядку:

$scope    = a
$http     = b
MyService = c

Чтобы избежать этого уродливого синтаксиса квадратных скобок, вы должны использовать интеллектуальные минификаторы, такие как ng-annotate.

07.06.2015

4

На данный момент ng-min устарел. Вместо этого используйте ng-annotate.

Хорошей практикой является использование ng-annotate в вашем задании сборки, чтобы вам не приходилось иметь дело с нотацией min-safe / скобки при разработке, так как это затрудняет чтение и обслуживание кода.

Существует grunt-plugin и плагин gulp доступен на npm.

14.11.2014
Новые материалы
Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
стройный-i18следующий
Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..