Angularjs minimise les meilleures pratiques

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
la source

Réponses:

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
la 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_
la 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
la 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
la 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
la 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
la source