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 
— Біля
джерело

Відповіді:

102

Так , завжди! Таким чином, навіть якщо ваш мініфер перетворить $ range у змінну a і $ http на змінну b, їх ідентичність все ще зберігається в рядках.

Дивіться цю сторінку документів AngularJS, прокрутіть униз до Примітка про мінімізацію .

ОНОВЛЕННЯ

Крім того, ви можете використовувати пакет ng-annotate npm у процесі збирання, щоб уникнути цього багатослів’я.

— Сельвам Паланімай
джерело
Це та деякі інші питання дуже добре пояснено на egghead.io. JFYI
— Wottensprels
@Sprottenwels: Так! Там багато корисних ресурсів.
— Сельвам Паланімай
8
Замість використання цього більш багатослівного синтаксису ви можете використовувати ngmin та інструмент збірки (як Grunt), перш ніж запускати мініфікацію. Таким чином, ви можете правильно мінімізувати, але також використовувати синтаксис ін'єкцій залежностей.
— jkjustjoshing
4
Повідомлення про мінімізацію було переміщено сюди docs.angularjs.org/tutorial/step_07
— Razvan.432
— georgeawg
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

Просто щоб зазначити, що якщо ви користуєтесь

Yeoman

не потрібно робити так

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.

— Біля
джерело
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>

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

Це може бути корисно для визначення проблем пошуку.

Для отримання додаткової інформації див

— georgeawg
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.