Angularjs минимизировать лучшие практики

103

Я читаю 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')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

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

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

в общем, я думал, что второй фрагмент предназначен для старой версии angularjs, но ....

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

javascript angularjs dependency-injection Whisher
источник

Ответы:

103

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

См. Эту страницу документации AngularJS, прокрутите вниз до раздела «Примечание по минификации» .

ОБНОВИТЬ

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

Сельвам Паланималаи
источник
Этот и некоторые другие вопросы очень хорошо объясняются на сайте egghead.io. JFYI
Wottensprels
@Sprottenwels: Ага! Там много полезных ресурсов.
Selvam Palanimalai
8
Вместо использования этого более подробного синтаксиса вы можете использовать ngmin и инструмент сборки (например, Grunt) перед запуском минификации. Таким образом, вы можете правильно минимизировать, но также можете использовать любой синтаксис внедрения зависимостей.
jkjustjoshing
4
Заметка о минификации перенесена сюда docs.angularjs.org/tutorial/step_07
Razvan.432
См. Также Руководство разработчика AngularJS - Неявная аннотация .
georgeawg 05
36

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

ОБНОВЛЕНИЕ:
теперь ng-annotate становится новым инструментом по умолчанию для решения этой проблемы.

OZ_
источник
7

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

Отключение неявного DI с помощью strictDiсвойства config:

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

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

<html ng-app="myApp" ng-strict-di>
dizel3d
источник
7

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

Йомен

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

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

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

Whisher
источник
0

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

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

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}
нет идентификатора
источник
0

Используйте строгое внедрение зависимостей для диагностики проблем

При использовании неявной аннотации код при минификации сломается.

Из Документов:

Неявная аннотация

Осторожно: если вы планируете минимизировать свой код, имена ваших сервисов будут переименованы и ваше приложение сломается.

Вы можете добавить ng-strict-diдирективу к тому же элементу, ng-appчтобы выбрать строгий режим DI.

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

Строгий режим выдает ошибку всякий раз, когда служба пытается использовать неявные аннотации.

Это может быть полезно для определения проблем.

Для получения дополнительной информации см.

Джорджог
источник