Dependency injection in Angular

Abbiamo visto come le funzionalità definite nei vari moduli che possono comporre un'applicazione Angular vengono messe a disposizone all'interno dell'applicazione stessa dichiarandone le dipendenze in fase di creazione:

angular.module("myApp", ["modulo1", "modulo2", "modulo3"]);

In questo modo i servizi, i filtri, i controller e gli altri componenti Angular definiti nei vari moduli sono potenzialmente utilizzabili da qualsiasi altro componente dell'applicazione.

Ma in concreto, come si possono utilizzare queste funzionalità dall'interno dei singoli componenti?

Ci viene incontro in questo compito il meccanismo di dependency injection di cui Angular fa largo uso.

In sintesi, la dependency injection è un design pattern che delega ad un'entità esterna il compito di individuare e fornire una risorsa di cui un oggetto ha bisogno. Nel nostro caso, se un componente Angular, come ad esempio un controller, ha bisogno delle funzionalità di messe a disposizione da un servizio non deve fare altro che specificare il suo nome tra i parametri della sua definizione:

angular.module("myApp")
	.controller("myController", function(myService) {
		// ...
		myService.metodo1();
		// ...
	});

In questo modo la nostra definizione di controller delega al framework il compito di individuare l'oggetto myService e di renderlo disponibile all'interno del nostro componente.

Angular individua il componente da iniettare basandosi sul nome del parametro. Questo meccanismo è abbastanza semplice e immediato, ma ha purtroppo una grande limitazione: se minifichiamo il codice JavaScript per ridurre le dimensioni dei nostri script utilizzando un comune tool come ad esempio UglifyJS, i nomi delle nostre variabili verranno stravolti. Quindi al posto di myService avremo molto probabilmente un nome come a o b, rendendo di fatto inefficace il meccanismo di individuazione delle risorse che abbiamo descritto.

Per fronteggiare questo problema abbiamo due strade.

La prima strada consiste nell'usare le annotazioni, cioè stringhe che definiscono i nomi delle risorse da cui dipende un componente. La definizione precedente integrata con le annotazioni avrà la seguente forma:

angular.module("myApp")
	.controller("myController", ["myService", function(myService) {
		// ...
		myService.metodo1();
		// ...
	}]);

Come possiamo vedere, il secondo parametro del metodo controller() non è più una funzione ma un array composto da una stringa e una funzione. La stringa è l'annotazione che rappresenta il nome della risorsa da mappare al primo argomento della funzione. In questo modo, siamo liberi di utilizzare per il parametro il nome che vogliamo, dal momento che Angular individuerà la risorsa da iniettare basandosi sull'annotazione e mappandola sul parametro in base alla posizione e non al nome. In altre parole, in seguito al processo di minificazione potremmo avere la seguente situazione:

.controller("myController",["myService",function(z){...}]);

Questo non avrà conseguenze sull'individuazione del servizio myService in quanto Angular si baserà sul valore della stringa per individuarlo e lo associerà al parametro z.

Se un componente ha più dipendenze è sufficiente inserire le corrispondenti annotazioni nell'array mantenendo sempre come ultimo elemento la funzione ed avendo cura di far corrispondere l'ordine delle annotazioni con l'ordine degli argomenti:

angular.module("myApp")
	.controller("myController", ["myService", "myFilter", function(myService, myFilter) {
	}]);

La seconda strada, sotto certi aspetti più semplice, consiste nell'utilizzare ng-annotate, un tool che si occupa si inserire le annotazioni in maniera automatica. In pratica possiamo ignorare le annotazioni appena descritte e continuare a scrivere il nostro codice senza preoccuparci degli effetti della minificazione. Prima della minificazione del codice eseguiremo ng-annotate che inserirà le annotazioni al posto nostro.