103

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

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

Tu devrais utiliser

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

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

Dois-je toujours utiliser la méthode d'injection (la deuxième)?

javascript angularjs dependency-injection

— Whisher
source

103

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 documentation AngularJS, faites défiler jusqu'à A Note on Minification .

METTRE À JOUR

Vous pouvez également utiliser le package ng-annotate npm dans votre processus de génération pour éviter cette verbosité.

— Selvam Palanimalai
source

Ceci, et quelques autres problèmes sont très bien expliqués sur egghead.io. JFYI

— Wottensprels

@Sprottenwels: Ouais! Beaucoup de ressources utiles là-bas.

— Selvam Palanimalai

8

Au lieu d'utiliser cette syntaxe plus détaillée, vous pouvez utiliser ngmin et un outil de construction (comme Grunt) avant d'exécuter la minification. De cette façon, vous pouvez réduire correctement mais également utiliser l'une ou l'autre syntaxe d'injection de dépendances.

— jkjustjoshing

4

Une note sur la minification a été déplacée ici docs.angularjs.org/tutorial/step_07

— Razvan.432

Voir aussi AngularJS Developer Guide - Implicit Annotation .

— georgeawg

36

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 .

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

— OZ_
source

7

Oui, vous devez utiliser l' injection de dépendances explicite (deuxième variante). Mais depuis Angular 1.3.1 vous pouvez désactiver l' injection de dépendances implicites , il est vraiment utile de résoudre les problèmes potentiels de changement de nom en une seule fois (avant la minification).

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

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

Désactivation de la DI implicite, à l'aide de la ng-strict-didirective:

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

— dizel3d
source

7

Juste pour souligner 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')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

parce que grognement pendant minify prend en compte la façon de gérer DI.

— Whisher
source

1

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

réf:

Comment réduire les scripts angularjs

Construire avec YO

— fxp
source

0

Vous voudrez peut-être utiliser $injectcomme indiqué ici :

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

— pas d'identifiant
source

0

Utiliser l'injection de dépendance stricte pour diagnostiquer les problèmes

Avec l' annotation implicite , le code se cassera une fois minifié.

À partir des documents:

Annotation implicite

Attention: si vous prévoyez de réduire votre code, les noms de vos services seront renommés et endommageront votre application.

Vous pouvez ajouter une ng-strict-didirective sur le même élément que ng-apppour opter en mode DI strict.

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

Le mode strict génère une erreur chaque fois qu'un service tente d'utiliser des annotations implicites.

Cela peut être utile pour déterminer les problèmes de recherche.

Pour plus d'informations, consultez

— georgeawg
source

Angularjs minimise les meilleures pratiques

Utiliser l'injection de dépendance stricte pour diagnostiquer les problèmes

Annotation implicite