AngularJS Mostrare tutti i costrutti angolari comuni


Esempio

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

  1. 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" ;
  2. <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.

  1. 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(...) ;

  2. .service(...) crea un servizio angolare e restituisce il modulo per il concatenamento;

  3. .controller(...) crea un controller angolare e restituisce il modulo per il concatenamento;

  4. .config(...) Utilizzare questo metodo per registrare il lavoro che deve essere eseguito sul caricamento del modulo.

  5. .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;
  6. ng-class è la direttiva ngClass per impostare una class dinamica, e in questo esempio utilizza hasStarted sul $rootScope modo dinamico

  7. 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.

  8. ng-controller è la direttiva che chiede ad Angular di creare un nuovo controller di nome specifico per orchestrare quella parte del DOM;

  9. ng-repeat è la direttiva per rendere l'iterazione angolare su una raccolta e clonare un modello DOM per ciascun elemento;

  10. {{ msg }} mostra l' interpolazione : rendering in loco di una parte dell'ambito o del controller;