Architettura MVC di AngularJS Introduzione a AngularJS

Configurazione dell'ambiente AngularJS

Questo capitolo spiega come configurare la libreria AngularJS per lo sviluppo di applicazioni web. Descrive anche la struttura dei directory e il loro contenuto.

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

Visualizza su GitHub −Cliccando su questo pulsante, verrai trasferito su GitHub e otterrai tutti gli script più recenti.
Scarica AngularJS 1 −Cliccando su questo pulsante, vedrai una schermata che mostra

Questa schermata offre le seguenti opzioni per l'uso di Angular JS

Scaricare e ospitare file localmente

Ci sono due opzioni diverse: "tradizionale" e "ultimissima". Il nome è autoesplicativo. La versione vecchia è inferiore a 1.2.x, mentre la versione più recente è 1.7.x.
Possiamo anche usare la versione minificata, non compressa o compressa.

Accesso CDN−Puoi anche accedere al CDN. Il CDN ti permette di accedere ai data center regionali. In questo caso, è gestito da Google. Il CDN trasferisce la responsabilità di ospitare i file da tuoi server a una serie di server esterni. Fornisce anche un vantaggio, se i visitatori del tuo sito web hanno già scaricato una copia di AngularJS dallo stesso CDN, non è necessario scaricare di nuovo.

In questo tutorial, abbiamo sempre usato la versione CDN della libreria.

Esempio online

Ora, usiamo la libreria AngularJS per scrivere un esempio semplice. Creiamo un file HTMLmyfirstexample.htmlcome segue -

Esempio

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

Testa per vedere ‹/›

Leggiamo attentamente il codice sopra riportato-

Includere AngularJS

Includiamo il file JavaScript di AngularJS nella pagina HTML in modo da poterlo utilizzare-

<head>
　　　<script src="https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
　　　</script>
</head>

Puoi vedere la versione più recente di AngularJS sul suo sito web ufficiale.

Punta all'applicazione AngularJS

Di seguito, è necessario determinare quale parte dell'HTML contiene l'applicazione AngularJS. Puoi farlo aggiungendo l'attributo ng-app all'elemento HTML radice dell'applicazione AngularJS. Puoi aggiungerlo all'elemento html o body, come segue-

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

Vista

La vista è questa parte-

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

ng-controllerdice a AngularJS quale controller utilizzare in questa vista.helloTo.titledice a AngularJS di scrivere un valore modello chiamato helloTo.title in questa posizione HTML.

Controller

La parte del controller è-

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

Questo codice si trova nel nomemyappNel modulo di angolo denominato HelloController è registrata la funzione di controller. Studieremo in dettaglio i moduli e i controller nei rispettivi capitoli. La funzione di controller è registrata tramite la chiamata di funzione controller(...) di angular.module(...).

$scope Il modello dei parametri viene passato alla funzione del controller. La funzione del controller aggiunge un oggetto helloTo JavaScript e aggiunge un campo title all'oggetto.

Esegui

Salva il codice sopra comemyfirstexample.html, e in qualsiasi browserInSi apre. Vedrete il seguente output-

Benvenuti AngularJS nel mondo di w3codebox!

Cosa succede quando si carica una pagina nel browser? Vediamo -

Il documento HTML è stato caricato nel browser e valutato dal browser.
Il file JavaScript AngularJS è stato caricato, angoloGlobaleL'oggetto è stato creato.
Esegue il JavaScript per registrare le funzioni del controller.
Poi, AngularJS scansiona l'HTML per cercare applicazioni e viste AngularJS.
Dopo aver trovato la vista, la collega alla funzione del controller corrispondente.
Poi, AngularJS esegue le funzioni del controller.
Poi, utilizza i dati del modello riempiti dal controller per presentare la vista. Ora la pagina è pronta.