Abbiamo visto come un modulo può contenere componenti di tipo diverso con un'organizzazione che essenzialmente dipende da noi e dall'architettura che intendiamo dare alla nostra applicazione. Ma che cos'è in fondo una applicazione?
In Angular un'applicazione non è altro che un modulo con due caratteristiche fondamentali:
- è identificato dalla direttiva ng-app
- è a conoscenza di tutti gli altri moduli
Abbiamo già avuto modo di vedere come possiamo creare un'applicazione. È sufficiente definire un modulo ed associare il suo nome alla direttiva ng-app:
<body ng-app="myApp">
...
</body>La definizione del modulo della nostra applicazione dovrà dichiarare la dipendenza di tutti i moduli utilizzati:
angular.module("myApp", ["modulo1", "modulo2", "modulo3"]);In questo modo le funzionalità dei diversi moduli vengono messe a disposizione dell'intera applicazione.
Oltre all'assemblaggio dei moduli che compongono la nostra applicazione, possiamo sfruttare questo modulo principale per effettuare configurazioni globali ed inizializzazioni. Queste attività si basano su due metodi config() e run() che corrispondono a due fasi cronologicamente distinte dell'avvio di un'applicazione Angular.
Durante la fase di configurazione abbiamo la possibilità di definire costanti ed effettuare impostazioni sui servizi che andremo ad usare. Ad esempio, se nella nostra applicazioni avremo necessità di passare un header HTTP in tutte le chiamate che faremo, possiamo farlo in questa fase invece di aggiungere l'header ad ogni singola chiamata:
angular.module("myApp", [])
.config(function($httpProvider) {
$httpProvider.defaults.headers.common["Authorization"] = "Basic cGlwcG86cGx1dG8=";
});In questo esempio abbiamo impostato l'header della Basic Authentication che verrà inviato al server in tutte le future chiamate effettuate tramite il servizio $http. Come possiamo notare, non facciamo riferimento direttamente al servizio $http ma al suo provider $httpProvider. Infatti in questa fase i servizi non sono ancora instanziati e non è possibile fare riferimento ad essi.
Il metodo run() ci consente di effettuare eventuali inizializzazioni dopo che tutti i moduli sono stati caricati. Possiamo ad esempio specificare una funzione che imposta la versione corrente della nostra applicazione:
angular.module("myApp", [])
.run(function($rootScope) {
$rootScope.appVersion = "1.0";
});Nell'esempio abbiamo impostato la versione corrente su una variabile dello scope di più alto livello, in modo che sia disponibile in qualsiasi scope della gerarchia.
Normalmente, un'applicazione Angular viene eseguita in maniera automatica al caricamento della pagina Web che contiene la direttiva ng-app. In determinate situazioni potremmo voler far partire l'applicazione da codice. In questo caso eviteremo di inserire la direttiva ng-app nel codice HTML della pagina e ricorreremo al metodo bootstrap() di Angular come nel seguente esempio:
angular.bootstrap(document, ["myApp"]);In questo caso stiamo avviando la nostra applicazione definita nel modulo myApp assegnandole come contesto il document del DOM.