AngularJS Iniziare

Esempio

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:

  1. Carica il framework angolare da una rete di Content Delivery.

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    
  2. Definire il documento HTML come un'applicazione Angolare con la direttiva ng-app

    <html ng-app>
    
  3. 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.

  4. Associare i dati dal modello alla vista sui controlli HTML. Associare un <input> alla proprietà name con ng-model

    <input ng-model="name" />
    
  5. Mostra contenuti dal modello usando doppie parentesi {{ }}

    <span>Hello, {{ name }}</span>
    
  6. 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.