Comenzando con AngularJS

Empezando

Cree un nuevo archivo HTML y pegue el siguiente contenido:

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

Demostración en vivo

Cuando abra el archivo con un navegador, verá un campo de entrada seguido del texto ¡Hola, mundo!. La edición del valor en la entrada actualizará el texto en tiempo real, sin necesidad de actualizar toda la página.


Explicación:

  1. Cargue el marco Angular desde una red de entrega de contenido.

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    
  2. Defina el documento HTML como una aplicación Angular con la directiva ng-app

    <html ng-app>
    
  3. Inicializa la variable name usando ng-init

    <body ng-init=" name = 'World' ">
    

Tenga en cuenta que ng-init debe usarse solo con fines demostrativos y de prueba. Al crear una aplicación real, los controladores deben inicializar los datos.

  1. Enlace datos del modelo a la vista en controles HTML. Vincule un <input> a la propiedad name con ng-model

    <input ng-model="name" />
    
  2. Muestre el contenido del modelo usando llaves dobles {{ }}

    <span>Hello, {{ name }}</span>
    
  3. Otra forma de vincular la propiedad name es usar ng-bind en lugar de handlebars"{{ }}"

     <span ng-bind="name"></span>
    

Los últimos tres pasos establecen el enlace de datos bidireccional. Los cambios realizados en la entrada actualizan el modelo, que se refleja en la vista.

Hay una diferencia entre usar handlebars y ng-bind. Si usa handlebars, es posible que vea Hello, {{name}} cuando la página se carga antes de que se resuelva la expresión (antes de que se carguen los datos), mientras que si usa ng-bind, solo mostrará el datos cuando se resuelve el nombre. Como alternativa, se puede usar la directiva ng-cloak para evitar que se muestren los handlebars antes de que se compile.

Mostrando todas las construcciones angulares comunes

El siguiente ejemplo muestra construcciones comunes de AngularJS 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>

Cada línea del archivo se explica a continuación:

Demostración en vivo

  1. ng-app="myDemoApp", la directiva ngApp que arranca 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 declaran 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ódulos. En este ejemplo encadenamos llamadas al resultado de la función módulo(...);

  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 al cargar el módulo.

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

    • the first item is letting Angular know that the startup function requires the built-in $rootScope service to be injected as an argument;
    • the second item is letting Angular know that the startup function requires the built-in $window service to be injected as an argument;
    • the last item in the array, startup, is the actual function to run on startup;
  6. ng-class es la directiva ngClass para establecer una clase 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 de nombre específico para orquestar esa parte del DOM;

  9. ng-repeat es la directiva para hacer que Angular itere sobre una colección y clone una plantilla DOM para cada elemento;

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

La importancia del alcance

Como Angular usa HTML para extender una página web y Javascript simple para agregar lógica, facilita la creación de una página web usando ng-app, *ng-controller * y algunas directivas integradas como ng-if, ng-repeat, etc. Con la nueva sintaxis controllerAs, los recién llegados a Angular los usuarios pueden adjuntar funciones y datos a su controlador en lugar de usar $scope.

Sin embargo, tarde o temprano, es importante entender qué es exactamente esta cosa $scope. Seguirá apareciendo en ejemplos, por lo que es importante tener algo de comprensión.

La buena noticia es que es un concepto simple pero poderoso.

Cuando creas lo siguiente:

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

¿Dónde vive nombre?

La respuesta es que Angular crea un objeto $rootScope. Este es simplemente un objeto Javascript normal y, por lo tanto, nombre es una propiedad en el objeto $rootScope:

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

Y al igual que con el ámbito global en Javascript, normalmente no es una buena idea agregar elementos al ámbito global o $rootScope.

Por supuesto, la mayoría de las veces, creamos un controlador y ponemos nuestra funcionalidad requerida en ese controlador. Pero cuando creamos un controlador, Angular hace su magia y crea un objeto $scope para ese controlador. Esto a veces se denomina alcance local.

Entonces, creando el siguiente controlador:

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

permitiría acceder al alcance local a través del parámetro $scope.

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

Un controlador sin un parámetro $scope puede simplemente no necesitarlo por alguna razón. Pero es importante darse cuenta de que, incluso con la sintaxis de controladorAs, el alcance local existe.

Como $scope es un objeto de JavaScript, Angular lo configura mágicamente para heredar prototípicamente de $rootScope. Y como puedes imaginar, puede haber una cadena de alcances. Por ejemplo, podría crear un modelo en un controlador principal y adjuntarlo al alcance del controlador principal como $scope.model.

Luego, a través de la cadena de prototipos, un controlador secundario podría acceder a ese mismo modelo localmente con $scope.model.

Nada de esto es evidente inicialmente, ya que es solo Angular haciendo su magia en segundo plano. Pero comprender $scope es un paso importante para conocer cómo funciona Angular.

Minificación en Angular

¿Qué es Minificación?

Es el proceso de eliminar todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad.

Sintaxis normal

Si usamos la sintaxis angular normal para escribir un controlador, luego de minimizar nuestros archivos, romperá nuestra funcionalidad.

Controlador (antes de la minificación):

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

Después de usar la herramienta de minificación, se minimizará como se muestra a continuación.

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

Aquí, la minificación eliminó los espacios innecesarios y la variable $scope del código. Entonces, cuando usamos este código minimizado, no va a imprimir nada a la vista. Porque $scope es una parte crucial entre el controlador y la vista, que ahora se reemplaza por la pequeña variable ’e’. Entonces, cuando ejecute la aplicación, dará un error de dependencia ’e’ del proveedor desconocido.

Hay dos formas de anotar su código con la información del nombre del servicio que son seguras para la minificación:

Sintaxis de anotación en línea

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

$inject Sintaxis de anotación de propiedades

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

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

Después de la minificación, este código será

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

Aquí, angular considerará que la variable ‘a’ se trata como $ alcance, y mostrará la salida como ‘¡Hola mundo!’.

Videotutoriales de introducción a AngularJS

Hay muchos buenos tutoriales en video para el marco AngularJS en egghead.io

ingrese la descripción de la imagen aquí

  • https://egghead.io/courses/angularjs-app-from-scratch-getting-started
  • https://egghead.io/courses/angularjs-application-architecture
  • https://egghead.io/courses/angular-material-introduction
  • https://egghead.io/courses/building-an-angular-1-x-ionic-application
  • https://egghead.io/courses/angular-and-webpack-for-modular-applications
  • https://egghead.io/courses/angularjs-autenticación-con-jwt
  • https://egghead.io/courses/angularjs-data-modeling
  • https://egghead.io/courses/automatización-angular-con-gulp
  • https://egghead.io/courses/learn-protractor-testing-for-angularjs
  • https://egghead.io/courses/ionic-quickstart-for-windows
  • https://egghead.io/courses/build-angular-1-x-apps-with-redux
  • https://egghead.io/courses/using-angular-2-patterns-in-angular-1-x-apps

El Angular Hello World más simple posible.

Angular 1 es en el fondo un compilador DOM. Podemos pasarle HTML, ya sea como una plantilla o simplemente como una página web normal, y luego hacer que compile una aplicación.

Podemos decirle a Angular que trate una región de la página como una expresión usando la sintaxis de estilo de manillar {{ }}. Cualquier cosa entre las llaves se compilará, así:

{{ 'Hello' + 'World' }}

Esto generará:

HelloWorld

de la aplicación

Le decimos a Angular qué parte de nuestro DOM tratar como la plantilla maestra usando la directiva ng-app. Una directiva es un atributo o elemento personalizado que el compilador de plantillas Angular sabe cómo manejar. Agreguemos una directiva ng-app ahora:

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

Ahora le he dicho al elemento del cuerpo que sea la plantilla raíz. Cualquier cosa en él será compilado.

Directrices

Las directivas son directivas del compilador. Extienden las capacidades del compilador Angular DOM. Es por eso que Misko, el creador de Angular, describe Angular como:

“Lo que habría sido un navegador web si se hubiera creado para aplicaciones web.

Literalmente creamos nuevos atributos y elementos HTML, y hacemos que Angular los compile en una aplicación. ng-app es una directiva que simplemente activa el compilador. Otras directivas incluyen:

  • ng-click, que agrega un controlador de clics,
  • ng-hide, que oculta condicionalmente un elemento, y
  • <formulario>, que agrega un comportamiento adicional a un elemento de formulario HTML estándar.

Angular viene con alrededor de 100 directivas integradas que le permiten realizar las tareas más comunes. También podemos escribir las nuestras, y estas serán tratadas de la misma manera que las directivas integradas.

Creamos una aplicación Angular a partir de una serie de directivas, conectadas con HTML.