webentwicklung-frage-antwort-db.com.de

Angularjs minimieren die beste Praxis

Ich lese gerade http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html undes stellte sich heraus, dass die Injektion von anglejs Abhängigkeit Probleme hat Wenn Sie Ihr Javascript minimierenso frage ich mich, wenn statt 

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

du solltest benutzen 

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

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

Soll ich immer den Injektionsweg verwenden (den zweiten)?

javascriptangularjs
98
Whisher

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

Siehe diese Seite in AngularJS-Dokumenten, scrollen Sie nach unten zu Ein Hinweis zur Minimierung.

UPDATE

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

99
Selvam Palanimalai

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

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

36
OZ_

Nur um darauf hinzuweisen, wenn Sie verwenden 

Yeoman

es ist nicht nötig, etwas zu tun

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

weil grunt während minify berücksichtigt, wie man DI verwaltet.

6
Whisher

Ja, Sie müssen die explizite Abhängigkeitsinjektion (zweite Variante) verwenden. Aber da Angular 1.3.1 Sie die implizite Abhängigkeitsinjektion deaktivieren können, ist es sehr hilfreich, potenzielle Probleme beim Umbenennen sofort zu lösen (vor der Verkleinerung).

Deaktivieren Sie die implizite DI mit der Eigenschaft strictDi config:

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

Implizite DI deaktivieren mit ng-strict-di Richtlinie:

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

Wie OZ_ sagte: Verwenden Sie ngmin, um alle eckigen JS-Dateien zu minimieren, wie z. B. direct.js service.js. Danach können Sie den Closure-Compiler zur Optimierung verwenden. 

ref: 

Minimieren von anglejs-Skripts

Mit YO bauen

1
fxp

Vielleicht möchten Sie $inject verwenden, wie er hier :

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
    })
}
0
Ilia Nedoluzhko