AngularJS Mostrar todas las construcciones angulares comunes


Ejemplo

El siguiente ejemplo muestra construcciones AngularJS comunes en un archivo:

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

A continuación se explica cada línea del archivo:

Demo en vivo

  1. ng-app="myDemoApp" , la directiva ngApp que inicia la aplicación y le dice a Angular que un elemento DOM está controlado por un angular.module específico llamado "myDemoApp" ;
  2. <script src="angular.min.js"> es el primer paso para arrancar la biblioteca AngularJS ;

Se DemoController tres funciones ( MyDataService , DemoController y startup ), que se utilizan (y explican) a continuación.

  1. angular.module(...) utilizado con una matriz como segundo argumento crea un nuevo módulo. Esta matriz se utiliza para proporcionar una lista de dependencias de módulo. En este ejemplo, encadenamos llamadas sobre el resultado de la función del module(...) ;

  2. .service(...) crea un servicio angular y devuelve el módulo para el encadenamiento;

  3. .controller(...) crea un controlador angular y devuelve el módulo para el encadenamiento;

  4. .config(...) Utilice este método para registrar el trabajo que debe realizarse en la carga del módulo.

  5. .run(...) se asegura de que el código se ejecute en el momento del inicio y tome una matriz de elementos como parámetro. Utilice este método para registrar el trabajo que se debe realizar cuando el inyector haya terminado de cargar todos los módulos.

    • el primer elemento es hacerle saber a Angular que la función de startup requiere que el servicio $rootScope se inyecte como un argumento;
    • el segundo elemento es permitir que Angular sepa que la función de startup requiere que el servicio integrado de $window se inyecte como un argumento;
    • el último elemento de la matriz, startup , es la función real para ejecutar en el inicio;
  6. ng-class es la directiva ngClass para establecer una class dinámica, y en este ejemplo utiliza hasStarted en $rootScope dinámicamente

  7. ng-cloak es una directiva para evitar que la plantilla html de Angular no procesada (por ejemplo, " {{ msg }} ") se muestre brevemente antes de que Angular haya cargado completamente la aplicación.

  8. ng-controller es la directiva que le pide a Angular que cree una instancia de un nuevo controlador con un nombre específico para orquestar esa parte del DOM;

  9. ng-repeat es la directiva para hacer una iteración angular sobre una colección y clonar una plantilla DOM para cada elemento;

  10. {{ msg }} muestra la interpolación : la representación en el lugar de una parte del alcance o controlador;