web-dev-qa-db-fra.com

Angularjs minimise les meilleures pratiques

Je lis http://www.alexrothenberg.com/2013/02/11/the-magic-bel-angularjs-dependency-injection.html andit s'est avéré que l'injection de dépendance angularjs a des problèmes si vous réduisez votre javascriptso je me demande si au lieu de 

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

tu devrais utiliser 

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

dans l'ensemble, je pensais que le deuxième extrait était destiné à l'ancienne version d'angularjs mais ....

Devrais-je toujours utiliser le moyen d'injection (le second)?

javascriptangularjs
98
Whisher

Oui, toujours! Ainsi, même si votre minifer convertit $ scope en variable a et $ http en variable b, leur identité est toujours conservée dans les chaînes.

Voir cette page de la documentation AngularJS, faites défiler jusqu’à Une note sur l’agrandissement.

MISE À JOUR

Alternativement, vous pouvez utiliser le paquet ng-annotate npm dans votre processus de construction pour éviter cette verbosité.

99
Selvam Palanimalai

Il est plus sûr d’utiliser la deuxième variante, mais il est également possible d’utiliser la première variante en toute sécurité avec ngmin .

METTRE À JOUR:
Now ng-annotate devient un nouvel outil par défaut pour résoudre ce problème.

36
OZ_

Juste pour signaler que si vous utilisez 

Yeoman

il n'y a pas besoin de faire comme

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

parce que grogner pendant minify prendre en compte comment gérer DI.

6
Whisher

Oui, vous devez utiliser l'injection de dépendance explicit (deuxième variante). Mais puisque Angular 1.3.1 vous pouvez désactiver l’injection de dépendance implicite, il est vraiment utile de résoudre les problèmes potentiels de changement de nom immédiatement (avant la minification).

Désactivation de DI implicite, à l'aide de la propriété strictDi config:

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

Désactivation de DI implicite à l'aide de la directive ng-strict-di:

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

Comme dit OZ_, utilisez ngmin pour minifier tous les fichiers js angulaires, comme directive.js service.js. Après cela, vous pouvez utiliser le compilateur Closure pour l’optimiser. 

ref: 

Comment minifier les scripts angularjs

Construire avec YO

1
fxp

Vous voudrez peut-être utiliser $inject comme il est mentionné ici :

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