2015-11-03 10 views
16

Recentemente mi sono imbattuto nella modalità DI rigorosa di AngularJS. Qual è lo scopo del vantaggio & di usarlo? Otterremo un significativo miglioramento delle prestazioni usandolo soprattutto sui dispositivi mobili?Qual è il vantaggio della modalità DI rigorosa AngularJS?

Provo ad applicarlo al mio codice e non ho fatto nessuna annotazione durante la scrittura del codice. Tuttavia, ho il mio codice per essere minify, e ng-annotate durante la build. Ma perché dopo aver aggiunto la modalità DI rigorosa al mio codice ho ancora ricevuto l'errore "Richiesto annotazione esplicita"?

+2

Credo che uno dei principali vantaggi sia che il codice non-strict-di non può essere minimizzato, poiché si basa sull'ispezione dei nomi delle variabili in fase di runtime. – CollinD

+0

Che strumenti di costruzione stai usando? –

+0

@OlaviSau Sto usando gulp-ng-annotate e gulp-uglify come i miei strumenti di costruzione – user1995781

risposta

24

La modalità DI rigorosa genera fondamentalmente errori quando, in fase di esecuzione, viene rilevato un pezzo di codice non conforme alla minificazione; ma nota che il codice potrebbe essere corretto e senza errori logico-sintattici.

Citando la documentazione:

se questo attributo è presente sull'elemento app, l'iniettore verrà creato nella modalità "stretta-di". Ciò significa che l'applicazione non riuscirà a richiamare funzioni che non usano l'annotazione funzione esplicita (e quindi non sono adatte per la minificazione), come descritto nella guida Dipendenza iniezione e utili informazioni di debug aiuteranno a rintracciare la radice di questi bug .

Per esempio, questo codice genera un errore perché ($scope, $http, $filter) non sono esplicitamente iniettato usando $inject o dando al metodo .controller(A,B) una matrice come secondo campo.

angular.module("myApp", []) 
// BadController cannot be invoked, because 
// the dependencies to be injected are not 
// explicitly listed. 
.controller("BadController", function($scope, $http, $filter) { 
    // ... 
}); 

frammento di destra:

angular.module("myApp", []) 
    .controller("GoodController1", GoodController1); 

GoodController1.$inject = ["$scope", "$http", "$filter"]; 

function GoodController1($scope, $http, $filter){} 

o:

angular.module("myApp", []) 
    .controller("GoodController1", 
       ["$scope", "$http", "$filter", function ($scope, $http, $filter){ 
    //... 
}]); 

per rispondere alla tua domanda non v'è alcun miglioramento significativo delle prestazioni usandolo. Ti concede solo la sicurezza dell'errore di minimificabilità. Questo perché la minificazione modifica i nomi delle variabili infrangendo il codice quando ad esempio si utilizza $scope senza un'annotazione esplicita.

5

Il rigido angolare DI applica il codice minificabilità.

Quando il codice viene ridotto, i nomi dei parametri vengono abbreviati, il che interrompe il DI angolare. Per contrastare questo problema, l'angolare ha aggiunto due (forse più ora) modi alternativi per aggiungere la dipendenza.

Forse il modo più comune e quello utilizzato da ng-annotate è posizionare una matrice invece di una funzione come secondo parametro. Le dipendenze sono le stringhe prima dell'ultimo elemento dell'array, le stringhe sono i nomi delle dipendenze.

controller.$inject(['$scope']); 

angular.module('app', ['dependency']).controller('myCtrl', ['myFirstDep', 
function(willBeInjectedHere){}]) 

L'annotazione ng probabilmente non è in esecuzione prima che angolare controlli. Assicurati di non eseguire uglify insieme a annotate, fallo esplicitamente PRIMA. Se il tuo codice genera un errore, molto probabilmente c'è un punto in cui l'annotazione non è stata fatta.

+0

Giusto per essere chiari, 'ng-annotate' è una build strumento che prenderà le vostre iniezioni di dipendenza implicita e aggiungerà annotazioni di array in linea. Quindi puoi scrivere 'angular.module ('myApp', []). Controller ('myCtrl', function ($ q) {...});' e dopo che gira 'ng-annotate', diventerà : 'angular.module ('myApp', []). controller ('myCtrl', ['$ q', function ($ q) {}]);'. – Tommy

3

Le buone pratiche utilizzano strict-di. L'app non può essere eseguita quando invoca funzioni che non utilizzano l'annotazione della funzione esplicita. Ciò significa che i metodi utilizzati devono essere dichiarati. L'uso di ng-strict-di assicurerà che l'app stia confermando con la linea guida per le dipendenze e non funzionerà se non lo è.

È possibile ottenere che utilizzando ng-strict-di:

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

See guida per gli sviluppatori: https://docs.angularjs.org/guide/di

+1

Sì ma _why_? Dire che le linee guida dicono così non è una spiegazione. Qualcuno, altri hanno già spiegato che è perché minification manipolerà i nomi delle variabili in modo che l'injector delle dipendenze non sappia più cosa sia, e quindi è necessario le stringhe di annotazione esplicite, in quanto non verranno alterate. – Sammi

2

È inoltre possibile aggiungere stretto-di come questo:

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

quando si utilizzano applicazioni di tipo meteorico angolare es6.