103

Sto leggendo http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html e si è scoperto che l'iniezione di dipendenza angularjs ha problemi se minimizzi il tuo javascript quindi io Mi chiedo se invece di

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

dovresti usare

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

tutto sommato pensavo che il secondo snippet fosse per la vecchia versione di angularjs ma ...

Devo sempre usare la modalità di iniezione (la seconda)?

javascript angularjs dependency-injection

— Whisher
fonte

102

Sì , sempre! Quindi in questo modo, anche se il tuo minifer converte $ scope nella variabile a e $ http nella variabile b, la loro identità viene comunque preservata nelle stringhe.

Vedi questa pagina di documenti AngularJS, scorri verso il basso fino a A Note on Minification .

AGGIORNARE

In alternativa, puoi usare ng-annotate pacchetto npm nel tuo processo di compilazione per evitare questo livello di dettaglio.

— Selvam Palanimalai
fonte

Questo e alcuni altri problemi sono spiegati molto bene su egghead.io. JFYI

— Wottensprels

@Sprottenwels: Sì! Molte risorse utili lì.

— Selvam Palanimalai

8

Invece di usare questa sintassi più dettagliata, puoi usare ngmin e uno strumento di compilazione (come Grunt) prima di eseguire la minificazione. In questo modo puoi minimizzare correttamente ma anche usare la sintassi di inserimento delle dipendenze.

— jkjustjoshing

4

Una nota sulla minificazione è stata spostata qui docs.angularjs.org/tutorial/step_07

— Razvan.432

Vedi anche AngularJS Developer Guide - Implicit Annotation .

— georgeawg

36

È più sicuro utilizzare la seconda variante ma è anche possibile utilizzare la prima variante in sicurezza con ngmin .

AGGIORNAMENTO:
ora ng-annotate diventa un nuovo strumento predefinito per risolvere questo problema.

— OZ_
fonte

7

Sì, è necessario utilizzare l' inserimento esplicito delle dipendenze (seconda variante). Ma poiché Angular 1.3.1 è possibile disattivare l'inserimento di dipendenze implicite , è davvero utile risolvere i potenziali problemi con la ridenominazione in una volta (prima della minificazione).

Disattivazione DI implicita, utilizzando la strictDiproprietà di configurazione:

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

Disattivazione DI implicita, utilizzando la ng-strict-didirettiva:

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

— dizel3d
fonte

7

Solo per sottolineare che se usi

piccolo terriero

non c'è bisogno di fare il simile

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

perché grugnito durante minify tiene conto di come gestire DI.

— Whisher
fonte

1

Come ha detto OZ_, usa ngmin per minimizzare tutti i file js angolari, come direttiva.js service.js. Dopodiché puoi usare il compilatore Closure per ottimizzarlo.

ref:

Come minimizzare gli script angularjs

Costruisci con YO

— FXP
fonte

0

Potresti voler usare $injectcome menzionato qui :

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

— nessun id
fonte

0

Utilizzare l'iniezione di dipendenza rigorosa per diagnosticare i problemi

Con l' annotazione implicita , il codice si interrompe quando minimizzato.

Dai documenti:

Annotazione implicita

Attenzione: se prevedi di minimizzare il codice, i nomi dei servizi verranno rinominati e la tua app verrà interrotta.

È possibile aggiungere una ng-strict-didirettiva sullo stesso elemento ng-appper optare in modalità DI rigorosa.

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

La modalità rigorosa genera un errore ogni volta che un servizio tenta di utilizzare annotazioni implicite.

Questo può essere utile per determinare la ricerca di problemi.

Per ulteriori informazioni, vedere

— georgeawg
fonte

Angularjs minimizza le migliori pratiche

Utilizzare l'iniezione di dipendenza rigorosa per diagnosticare i problemi

Annotazione implicita