AngularJS - Configurazione dell'ambiente

Questo capitolo descrive come impostare la libreria AngularJS da utilizzare nello sviluppo di applicazioni web. Descrive inoltre brevemente la struttura della directory e il suo contenuto.

Quando apri il link https://angularjs.org/, vedrai che ci sono due opzioni per scaricare la libreria AngularJS -

View on GitHub - Facendo clic su questo pulsante, verrai reindirizzato a GitHub e riceverai tutti gli ultimi script.
Download AngularJS 1 - Facendo clic su questo pulsante, in una schermata viene visualizzata una finestra di dialogo mostrata come -

Questa schermata offre varie opzioni di utilizzo di Angular JS come segue:

Downloading and hosting files locally
- Sono disponibili due diverse opzioni: Legacy e Latest. I nomi stessi sono auto-descrittivi. Il Legacy ha una versione inferiore alla 1.2.x e il Latest arriva con la versione 1.3.x.
- Possiamo anche utilizzare la versione ridotta a icona, non compressa o compressa.
CDN access- Hai anche accesso a un CDN. Il CDN ti dà accesso ai data center regionali. In questo caso, l'host di Google. La CDN trasferisce la responsabilità di ospitare i file dai propri server a una serie di server esterni. Offre anche un vantaggio che se il visitatore della tua pagina web ha già scaricato una copia di AngularJS dallo stesso CDN, non è necessario scaricarlo nuovamente.

Stiamo utilizzando le versioni CDN della libreria durante questo tutorial.

Esempio

Ora scriviamo un semplice esempio usando la libreria AngularJS. Creiamo un file HTML myfirstexample.html mostrato di seguito -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Esaminiamo il codice sopra in dettaglio -

Includi AngularJS

Includiamo il file JavaScript AngularJS nella pagina HTML in modo che possiamo usarlo -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

Puoi controllare l'ultima versione di AngularJS sul suo sito ufficiale.

Seleziona l'app AngularJS

Successivamente, è necessario indicare quale parte dell'HTML contiene l'app AngularJS. Puoi farlo aggiungendo l'attributo ng-app all'elemento HTML radice dell'app AngularJS. Puoi aggiungerlo all'elemento html o all'elemento body come mostrato di seguito -

<body ng-app = "myapp">
</body>

Visualizza

La vista è questa parte -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller dice ad AngularJS quale controller usare con questa vista. helloTo.title dice ad AngularJS di scrivere il valore del modello denominato helloTo.title in HTML in questa posizione.

Controller

La parte del controller è:

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Questo codice registra una funzione del controller denominata HelloController nel modulo angolare denominato myapp . Studieremo di più sui moduli e sui controllori nei rispettivi capitoli. La funzione controller viene registrata in angular tramite la chiamata della funzione angular.module (...). Controller (...).

Il modello del parametro $ scope viene passato alla funzione controller. La funzione controller aggiunge un oggetto helloTo JavaScript e in quell'oggetto aggiunge un campo del titolo .

Esecuzione

Salva il codice sopra come myfirstexample.html e aprilo in qualsiasi browser. Puoi vedere il seguente output:

Welcome AngularJS to the world of Tutorialspoint!

Cosa succede quando la pagina viene caricata nel browser? Facci vedere -

Il documento HTML viene caricato nel browser e valutato dal browser.
Il file JavaScript AngularJS viene caricato, viene creato l' oggetto globale angolare .
Viene eseguito il JavaScript che registra le funzioni del controller.
Successivamente, AngularJS esegue la scansione dell'HTML per cercare app AngularJS e visualizzazioni.
Una volta individuata, la vista collega quella vista alla funzione del controller corrispondente.
Successivamente, AngularJS esegue le funzioni del controller.
Quindi esegue il rendering delle viste con i dati del modello popolato dal controller. La pagina è ora pronta.