AngularJS Tutorial => Iniziare con AngularJS

Osservazioni

AngularJS è un framework di applicazioni Web progettato per semplificare lo sviluppo di applicazioni client avanzate. Questa documentazione è per Angular 1.x , il predecessore del più moderno Angular 2 o consultare la documentazione Stack Overflow per Angular 2 .

Versioni

Versione	Data di rilascio
1.6.5	2017/07/03
1.6.4	2017/03/31
1.6.3	2017/03/08
1.6.2	2017/02/07
1.5.11	2017/01/13
1.6.1	2016/12/23
1.5.10	2016/12/15
1.6.0	2016/12/08
1.6.0-rc.2	2016/11/24
1.5.9	2016/11/24
1.6.0-rc.1	2016/11/21
1.6.0-rc.0	2016/10/26
1.2.32	2016/10/11
1.4.13	2016/10/10
1.2.31	2016/10/10
1.5.8	2016/07/22
1.2.30	2016/07/21
1.5.7	2016/06/15
1.4.12	2016/06/15
1.5.6	2016/05/27
1.4.11	2016/05/27
1.5.5	2016/04/18
1.5.4	2016/04/14
1.5.3	2016/03/25
1.5.2	2016/03/19
1.4.10	2016/03/16
1.5.1	2016/03/16
1.5.0	2016/02/05
1.5.0-rc.2	2016/01/28
1.4.9	2016/01/21
1.5.0-rc.1	2016/01/16
1.5.0-rc.0	2015/12/09
1.4.8	2015/11/20
1.5.0-beta.2	2015/11/18
1.4.7	2015/09/30
1.3.20	2015/09/30
1.2.29	2015/09/30
1.5.0-beta.1	2015/09/30
1.5.0-beta.0	2015/09/17
1.4.6	2015/09/17
1.3.19	2015/09/17
1.4.5	2015/08/28
1.3.18	2015/08/19
1.4.4	2015/08/13
1.4.3	2015/07/15
1.3.17	2015/07/07
1.4.2	2015/07/07
1.4.1	2015/06/16
1.3.16	2015/06/06
1.4.0	2015/05/27
1.4.0-rc.2	2015/05/12
1.4.0-rc.1	2015/04/24
1.4.0-rc.0	2015/04/10
1.3.15	2015/03/17
1.4.0-beta.6	2015/03/17
1.4.0-beta.5	2015/02/24
1.3.14	2015/02/24
1.4.0-beta.4	2015/02/09
1.3.13	2015/02/09
1.3.12	2015/02/03
1.4.0-beta.3	2015/02/03
1.3.11	2015/01/27
1.4.0-beta.2	2015/01/27
1.4.0-beta.1	2015/01/20
1.3.10	2015/01/20
1.3.9	2015/01/15
1.4.0-beta.0	2015/01/14
1.3.8	2014/12/19
1.2.28	2014/12/16
1.3.7	2014/12/15
1.3.6	2014/12/09
1.3.5	2014/12/02
1.3.4	2014/11/25
1.2.27	2014/11/21
1.3.3	2014/11/18
1.3.2	2014/11/07
1.3.1	2014/10/31
1.3.0	2014/10/14
1.3.0-rc.5	2014/10/09
1.2.26	2014/10/03
1.3.0-rc.4	2014/10/02
1.3.0-rc.3	2014/09/24
1.2.25	2014/09/17
1.3.0-rc.2	2014/09/17
1.2.24	2014/09/10
1.3.0-rc.1	2014/09/10
1.3.0-rc.0	2014/08/30
1.2.23	2014/08/23
1.3.0-beta.19	2014/08/23
1.2.22	2014/08/12
1.3.0-beta.18	2014/08/12
1.2.21	2014/07/25
1.3.0-beta.17	2014/07/25
1.3.0-beta.16	2014/07/18
1.2.20	2014/07/11
1.3.0-beta.15	2014/07/11
1.2.19	2014/07/01
1.3.0-beta.14	2014/07/01
1.3.0-beta.13	2014/06/16
1.3.0-beta.12	2014/06/14
1.2.18	2014/06/14
1.3.0-beta.11	2014/06/06
1.2.17	2014/06/06
1.3.0-beta.10	2014/05/24
1.3.0-beta.9	2014/05/17
1.3.0-beta.8	2014/05/09
1.3.0-beta.7	2014/04/26
1.3.0-beta.6	2014/04/22
1.2.16	2014/04/04
1.3.0-beta.5	2014/04/04
1.3.0-beta.4	2014/03/28
1.2.15	2014/03/22
1.3.0-beta.3	2014/03/21
1.3.0-beta.2	2014/03/15
1.3.0-beta.1	2014/03/08
1.2.14	2014/03/01
1.2.13	2014/02/15
1.2.12	2014/02/08
1.2.11	2014/02/03
1.2.10	2014/01/25
1.2.9	2014/01/15
1.2.8	2014/01/10
1.2.7	2014/01/03
1.2.6	2013/12/20
1.2.5	2013/12/13
1.2.4	2013/12/06
1.2.3	2013/11/27
1.2.2	2013/11/22
1.2.1	2013/11/15
1.2.0	2013/11/08
1.2.0-rc.3	2013/10/14
1.2.0-rc.2	2013/09/04
1.0.8	2013/08/22
1.2.0rc1	2013/08/13
1.0.7	2013/05/22
1.1.5	2013/05/22
1.0.6	2013/04/04
1.1.4	2013/04/04
1.0.5	2013/02/20
1.1.3	2013/02/20
1.0.4	2013/01/23
1.1.2	2013/01/23
1.1.1	2012/11/27
1.0.3	2012/11/27
1.1.0	2012/09/04
1.0.2	2012/09/04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-RC2	2012-03-16
1.0.0rc1	2012-03-14
0.10.6	2012-01-17
0.10.5	2011-11-08
0.10.4	2011-10-23
0.10.3	2011-10-14
0.10.2	2011-10-08
0.10.1	2011-09-09
0.10.0	2011-09-02
0.9.19	2011-08-21
0.9.18	2011-07-30
0.9.17	2011-06-30
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	2011-04-01
0.9.13	2011-03-14
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	2011-01-27
0.9.9	2011-01-14
0.9.7	2010-12-11
0.9.6	2010-12-07
0.9.5	2010-11-25
0.9.4	2010-11-19
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	2010-10-27
0.9.0	2010-10-21

Iniziare

Crea un nuovo file HTML e incolla il seguente contenuto:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Dimostrazione dal vivo

Quando apri il file con un browser, vedrai un campo di input seguito dal testo Hello, World! . La modifica del valore nell'input aggiornerà il testo in tempo reale, senza la necessità di aggiornare l'intera pagina.

Spiegazione:

Carica il framework angolare da una rete di Content Delivery.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

Definire il documento HTML come un'applicazione Angolare con la direttiva ng-app
```
<html ng-app>
```
Inizializza la variabile del name usando ng-init
```
<body ng-init=" name = 'World' ">
```
Si noti che ng-init deve essere usato solo a scopi dimostrativi e di test. Quando si crea un'applicazione vera e propria, i controller devono inizializzare i dati.
Associare i dati dal modello alla vista sui controlli HTML. Associare un <input> alla proprietà name con ng-model
```
<input ng-model="name" />
```
Mostra contenuti dal modello usando doppie parentesi {{ }}
```
<span>Hello, {{ name }}</span>
```
Un altro modo per legare la proprietà name è usare ng-bind invece dei manubri "{{ }}"
```
 <span ng-bind="name"></span>
```

Gli ultimi tre passaggi stabiliscono il collegamento dati bidirezionale . Le modifiche apportate all'input aggiornano il modello , che si riflette nella vista .

C'è una differenza tra l'uso di manubri e ng-bind . Se usi i manubri, potresti vedere il vero Hello, {{name}} mentre la pagina viene caricata prima che l'espressione sia risolta (prima che i dati siano caricati) mentre se usi ng-bind , mostrerà solo i dati quando il nome è risolto. In alternativa, la direttiva ng-cloak può essere utilizzata per impedire che i manubri vengano visualizzati prima di essere compilati.

Mostrare tutti i costrutti angolari comuni

L'esempio seguente mostra i comuni costrutti AngularJS in un file:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Di seguito viene spiegata ogni riga del file:

Dimostrazione dal vivo

ng-app="myDemoApp" , la direttiva ngApp che avvia l'applicazione e dice angolare che un elemento DOM è controllato da uno specifico angular.module denominato "myDemoApp" ;
<script src="angular.min.js"> è il primo passo per avviare la libreria AngularJS ;

Vengono dichiarate tre funzioni ( MyDataService , DemoController e startup ), che vengono utilizzate (e spiegate) di seguito.

angular.module(...) utilizzato con un array come secondo argomento crea un nuovo modulo. Questo array viene utilizzato per fornire un elenco di dipendenze del modulo. In questo esempio chiamiamo a catena il risultato della funzione module(...) ;
.service(...) crea un servizio angolare e restituisce il modulo per il concatenamento;
.controller(...) crea un controller angolare e restituisce il modulo per il concatenamento;
.config(...) Utilizzare questo metodo per registrare il lavoro che deve essere eseguito sul caricamento del modulo.
.run(...) assicura che il codice venga eseguito all'avvio e assuma una serie di elementi come parametro. Utilizzare questo metodo per registrare il lavoro che deve essere eseguito quando l'iniettore ha finito di caricare tutti i moduli.
- il primo elemento sta permettendo a Angular di sapere che la funzione di startup richiede che il servizio $rootScope sia iniettato come argomento;
- il secondo elemento sta permettendo a Angular di sapere che la funzione di startup richiede che il startup incorporato $window venga iniettato come argomento;
- l' ultimo elemento nell'array, l' startup , è la funzione effettiva da eseguire all'avvio;
ng-class è la direttiva ngClass per impostare una class dinamica, e in questo esempio utilizza hasStarted sul $rootScope modo dinamico
ng-cloak è una direttiva per impedire che il template html Angolare non restituito (ad esempio " {{ msg }} ") venga mostrato brevemente prima che Angular abbia caricato completamente l'applicazione.
ng-controller è la direttiva che chiede ad Angular di creare un nuovo controller di nome specifico per orchestrare quella parte del DOM;
ng-repeat è la direttiva per rendere l'iterazione angolare su una raccolta e clonare un modello DOM per ciascun elemento;
{{ msg }} mostra l' interpolazione : rendering in loco di una parte dell'ambito o del controller;

L'importanza dell'ambito

Poiché Angular utilizza l'HTML per estendere una pagina Web e un semplice Javascript per aggiungere la logica, semplifica la creazione di una pagina Web utilizzando ng-app , ng-controller e alcune direttive incorporate come ng-if , ng-repeat , ecc. Con la nuova sintassi controllerAs , i nuovi utenti Angular possono associare funzioni e dati al proprio controller invece di utilizzare $scope .

Tuttavia, prima o poi, è importante capire che cosa sia esattamente questa cosa di $scope . Continuerà a mostrarsi negli esempi, quindi è importante avere una certa comprensione.

La buona notizia è che è un concetto semplice ma potente.

Quando crei il seguente:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Dove vive il nome ?

La risposta è che Angular crea un oggetto $rootScope . Questo è semplicemente un normale oggetto Javascript e quindi name è una proprietà $rootScope :

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

E proprio come con lo scope globale in Javascript, di solito non è una buona idea aggiungere elementi all'ambito globale o $rootScope .

Naturalmente, la maggior parte delle volte, creiamo un controller e inseriamo le funzionalità richieste in quel controller. Ma quando creiamo un controller, Angular fa la magia e crea un oggetto $scope per quel controller. Questo è a volte indicato come ambito locale .

Quindi, creando il seguente controller:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

consentirebbe all'ambito locale di essere accessibile tramite il parametro $scope .

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

Un controller senza un parametro $scope potrebbe semplicemente non averne bisogno per qualche motivo. Ma è importante rendersi conto che, anche con la sintassi del controllerAs , esiste l'ambito locale.

Poiché $scope è un oggetto JavaScript, Angular lo imposta magicamente per ereditare prototipicamente da $rootScope . E come puoi immaginare, ci può essere una catena di scopi. Ad esempio, è possibile creare un modello in un controllore principale e collegarlo all'ambito del controllore genitore come $scope.model .

Quindi tramite la catena di prototipi, un controller figlio poteva accedere localmente allo stesso modello con $scope.model .

Niente di tutto questo è inizialmente evidente, poiché è solo Angular che fa la sua magia in background. Ma capire $scope è un passo importante per conoscere come funziona Angular.

Il più semplice possibile Hello World angolare.

Angular 1 è il cuore di un compilatore DOM. Possiamo passarlo in HTML, sia come modello o semplicemente come una normale pagina web, e poi averlo compilare un'app.

Possiamo dire ad Angular di trattare una regione della pagina come un'espressione usando la sintassi in stile {{ }} manubri. Qualunque cosa tra le parentesi graffe verrà compilata, in questo modo:

{{ 'Hello' + 'World' }}

Questo produrrà:

HelloWorld

ng-app

Indichiamo ad Angular quale parte del nostro DOM viene trattata come modello principale utilizzando la direttiva ng-app . Una direttiva è un attributo o elemento personalizzato che il compilatore di template Angolare sa come gestire. Aggiungiamo ora una direttiva ng-app:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

Ora ho detto all'elemento del corpo di essere il modello radice. Tutto sarà compilato.

direttive

Le direttive sono direttive del compilatore. Estendono le funzionalità del compilatore Angular DOM. Ecco perché Misko , il creatore di Angular, descrive Angular come:

"Che sarebbe stato un browser Web se fosse stato creato per le applicazioni web.

Creiamo letteralmente nuovi attributi ed elementi HTML e Angular li compila in un'app. ng-app è una direttiva che semplicemente attiva il compilatore. Altre direttive includono:

ng-click , che aggiunge un gestore di clic,
ng-hide , che nasconde in modo condizionale un elemento, e
<form> , che aggiunge un comportamento aggiuntivo a un elemento del modulo HTML standard.

Angular viene fornito con circa 100 direttive incorporate che consentono di eseguire le attività più comuni. Possiamo anche scrivere il nostro, e questi saranno trattati allo stesso modo delle direttive incorporate.

Costruiamo un'app Angular con una serie di direttive, cablate insieme con HTML.

Minificazione in Angolare

Cos'è il Minification?

È il processo di rimozione di tutti i caratteri non necessari dal codice sorgente senza modificarne la funzionalità.

Sintassi normale

Se usiamo la normale sintassi angolare per scrivere un controller, dopo aver ridotto i nostri file interromperà la nostra funzionalità.

Controller (prima della minificazione):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

Dopo aver usato lo strumento di minificazione, verrà ridotto come di seguito.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Qui, la minimizzazione ha rimosso spazi non necessari e la variabile $ scope dal codice. Quindi, quando usiamo questo codice miniato, non stamperà nulla sulla vista. Perché $ scope è una parte cruciale tra controller e view, che ora è sostituita dalla piccola variabile 'e'. Pertanto, quando si esegue l'applicazione, viene generato un errore di dipendenza "e" del provider sconosciuto.

Esistono due modi per annotare il codice con le informazioni sul nome del servizio che sono minime:

Sintassi di annotazione in linea

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject Sintassi di annotazione di proprietà

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

Dopo la minificazione, questo codice sarà

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

Qui, angolare considererà la variabile 'a' da trattare come $ scope, e mostrerà l'output come 'Hello World!'.

AngularJS Guida introduttiva Tutorial video

Ci sono molti buoni video tutorial per il framework AngularJS su egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

AngularJS Tutorial
Iniziare con AngularJS

Ricerca…