Angularjs minimieren Best Practice

103

Ich lese http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html und es stellte sich heraus, dass die Angularjs-Abhängigkeitsinjektion Probleme hat, wenn Sie Ihr Javascript minimieren, also ich Ich frage mich, ob statt

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

du solltest benutzen

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
    })
}]

Alles in allem dachte ich, der zweite Ausschnitt sei für die alte Version von anglejs, aber ...

Sollte ich immer den Injektionsweg verwenden (den zweiten)?

javascript angularjs dependency-injection Whisher
quelle

Antworten:

102

Ja immer! Selbst wenn Ihr Minifer $ scope in Variable a und $ http in Variable b konvertiert, bleibt seine Identität auf diese Weise in den Zeichenfolgen erhalten.

Sehen Sie sich diese Seite der AngularJS-Dokumente an und scrollen Sie nach unten zu A Hinweis zur Minimierung .

AKTUALISIEREN

Alternativ können Sie das Paket ng-annotate npm in Ihrem Erstellungsprozess verwenden, um diese Ausführlichkeit zu vermeiden.

Selvam Palanimalai
quelle
Dies und einige andere Probleme werden auf egghead.io sehr gut erklärt. JFYI
Wottensprels
@ Prottenwels: Ja! Viele nützliche Ressourcen dort.
Selvam Palanimalai
8
Anstatt diese ausführlichere Syntax zu verwenden, können Sie ngmin und ein Build-Tool (wie Grunt) verwenden, bevor Sie die Minifizierung ausführen. Auf diese Weise können Sie ordnungsgemäß minimieren, aber auch eine der beiden Abhängigkeitsinjektionssyntax verwenden.
jkjustjoshing
4
Ein Hinweis zur Minimierung wurde hierher verschoben docs.angularjs.org/tutorial/step_07
Razvan.432
Siehe auch AngularJS Developer Guide - Implizite Annotation .
Georgeawg
36

Es ist sicherer, die zweite Variante zu verwenden, aber es ist auch möglich, die erste Variante sicher mit ngmin zu verwenden .

UPDATE:
Jetzt wird ng-annotate zu einem neuen Standardwerkzeug, um dieses Problem zu lösen.

OZ_
quelle
7

Ja, Sie müssen eine explizite Abhängigkeitsinjektion verwenden (zweite Variante). Aber da Angular 1.3.1 können Sie implizite deaktivieren Dependency Injection, ist es wirklich hilfreich ist , um potenzielle Probleme zu lösen mit Umbenennung auf einmal (vor minification).

Deaktivieren der impliziten DI mithilfe der strictDiEigenschaft config:

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

Deaktivieren der impliziten DI mithilfe der ng-strict-diDirektive:

<html ng-app="myApp" ng-strict-di>
dizel3d
quelle
7

Nur um darauf hinzuweisen, wenn Sie verwenden

Yeoman

es besteht keine Notwendigkeit zu mögen

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
    })
}]

weil Grunzen während der Minimierung berücksichtigen, wie DI zu verwalten ist.

Whisher
quelle
0

Vielleicht haben Sie verwenden möchten , $injectwie es erwähnt hier :

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
    })
}
keine ID
quelle
0

Verwenden Sie Strict Dependency Injection, um Probleme zu diagnostizieren

Mit der impliziten Anmerkung wird der Code beim Minimieren unterbrochen.

Aus den Dokumenten:

Implizite Anmerkung

Achtung : Wenn Sie Ihren Code minimieren möchten, werden Ihre Dienstnamen umbenannt und Ihre App wird beschädigt.

Sie können eine ng-strict-diDirektive für dasselbe Element hinzufügen, um den ng-appstrengen DI-Modus zu aktivieren.

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

Der strikte Modus löst einen Fehler aus, wenn ein Dienst versucht, implizite Anmerkungen zu verwenden.

Dies kann hilfreich sein, um Probleme zu finden.

Weitere Informationen finden Sie unter

georgeawg
quelle