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
источник

1

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

ссылка:

Как минимизировать скрипты angularjs

Строить с YO

— FXP
источник

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>

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

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

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

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

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

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

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