Angularjs минимизирует передовой опыт

Я читаю http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html и оказалось, что инъекция зависимостей angularjs имеет проблемы, если вы минимизируете свой javascript поэтому мне интересно, если вместо

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .success(function(commits) {
        $scope.commits = commits
      })
  }

вы должны использовать

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}]

В целом я думал, что второй фрагмент был для старой версии angularjs, но....

Должен ли я всегда использовать инъекционный способ (второй)?

Ответ 1

Да, всегда! Таким образом, даже если ваш minifer преобразует $scope в переменную a и $http в переменную b, их сильная идентификация сохраняется в строках.

См. эту страницу в документах AngularJS, прокрутите вниз до Примечание по вопросам защиты.

UPDATE

В качестве альтернативы вы можете использовать ng-annotate пакет npm в процессе сборки, чтобы избежать этой многословности.

Ответ 2

Безопаснее использовать второй вариант, но также можно безопасно использовать первый вариант с ngmin.

UPDATE:
Теперь ng-annotate становится новым инструментом по умолчанию для решения этой проблемы.

Ответ 3

Просто укажите, что если вы используете

Yeoman

нет необходимости делать, например,

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}]

потому что grunt во время minify учитывает, как управлять DI.

Ответ 4

Да, вам нужно использовать явную инъекцию зависимостей (второй вариант). Но поскольку Angular 1.3.1 вы можете отключить неявное инъекцию зависимостей, это действительно помогает решить потенциальные проблемы с переименование сразу (перед изменением).

Отключение неявного DI, используя свойство strictDi config:

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

Отключение неявного DI, используя директиву ng-strict-di:

<html ng-app="myApp" ng-strict-di>

Ответ 5

Как и OZ_ сказал: используйте ngmin для минимизации всего файла angular js, например, directive.js service.js. После этого вы можете использовать компилятор Closure для его оптимизации.

ref:

Как уменьшить скрипты angularjs

Построить с YO

Ответ 6

Возможно, вы захотите использовать $inject, как упоминалось здесь:

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}