AngularJS Tutorial => Empezando con AngularJS

Observaciones

AngularJS es un marco de aplicación web diseñado para simplificar el desarrollo de aplicaciones del lado del cliente enriquecido. Esta documentación es para Angular 1.x , el antecesor de la versión más moderna de Angular 2 o consulte la documentación de Stack Overflow para Angular 2 .

Versiones

Versión	Fecha de lanzamiento
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

Empezando

Crea un nuevo archivo HTML y pega 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>

Demo en vivo

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

Explicación:

Cargue el marco angular desde una red de entrega de contenido.

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

Defina el documento HTML como una aplicación Angular con la directiva ng-app
```
<html ng-app>
```
Inicialice la variable de name usando ng-init
```
<body ng-init=" name = 'World' ">
```
Tenga en cuenta que ng-init debe utilizarse únicamente con fines demostrativos y de prueba. Al crear una aplicación real, los controladores deben inicializar los datos.
Enlazar datos del modelo a la vista en controles HTML. Enlazar una <input> a la propiedad de name con ng-model
```
<input ng-model="name" />
```
Mostrar contenido del modelo usando llaves dobles {{ }}
```
<span>Hello, {{ name }}</span>
```
Otra forma de enlazar la propiedad de name es usar ng-bind lugar de manillares "{{ }}"
```
 <span ng-bind="name"></span>
```

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

Hay una diferencia entre usar manillares y ng-bind . Si usa manillares, puede ver el Hello, {{name}} real Hello, {{name}} medida que se carga la página antes de que se resuelva la expresión (antes de que se carguen los datos), mientras que si usa ng-bind , solo mostrará los datos cuando el nombre esta resuelto. Como alternativa, se puede utilizar la directiva ng-cloak para evitar que se muestren los manillares antes de compilarlos.

Mostrar todas las construcciones angulares comunes

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

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

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(...) ;
.service(...) crea un servicio angular y devuelve el módulo para el encadenamiento;
.controller(...) crea un controlador angular y devuelve el módulo para el encadenamiento;
.config(...) Utilice este método para registrar el trabajo que debe realizarse en la carga del módulo.
.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;
ng-class es la directiva ngClass para establecer una class dinámica, y en este ejemplo utiliza hasStarted en $rootScope dinámicamente
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.
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;
ng-repeat es la directiva para hacer una iteración angular sobre una colección y clonar una plantilla DOM para cada elemento;
{{ msg }} muestra la interpolación : la representación en el lugar de una parte del alcance 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 del controlador , los usuarios nuevos de Angular pueden adjuntar funciones y datos a su controlador en lugar de usar $scope .

Sin embargo, tarde o temprano, es importante entender qué es exactamente este asunto del $scope . Seguirá apareciendo en ejemplos, por lo que es importante tener un poco 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 el nombre ?

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

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

Y al igual que con el alcance global en Javascript, generalmente no es una buena idea agregar elementos al alcance 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 magia y crea un objeto $scope para ese controlador. Esto se refiere a veces como el alcance local .

Entonces, creando el siguiente controlador:

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

permitiría que se pueda acceder al ámbito 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 de $scope puede simplemente no necesitarlo por alguna razón. Pero es importante darse cuenta de que, incluso con la sintaxis de controllerAs , el alcance local existe.

Dado que $scope es un objeto de JavaScript, Angular lo configura mágicamente para heredarlo prototípicamente de $rootScope . Y como puedes imaginar, puede haber una cadena de ámbitos. 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 al mismo modelo localmente con $scope.model .

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

El mundo angular más simple posible.

Angular 1 es en el fondo un compilador DOM. Podemos pasarlo en 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 manillares {{ }} . Cualquier cosa entre las llaves se compilará, así:

{{ 'Hello' + 'World' }}

Esto dará como resultado:

HelloWorld

ng-app

Le decimos a Angular qué parte de nuestro DOM debe tratar como la plantilla maestra usando la directiva ng-app . Una directiva es un atributo o elemento personalizado con el que el compilador de plantillas angulares sabe cómo tratar. 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á compilada.

Directivas

Las directivas son directivas de compilación. Extienden las capacidades del compilador Angular DOM. Por eso Misko , el creador de Angular, describe a Angular como:

"Lo que habría sido un navegador web si se hubiera construido 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 enciende el compilador. Otras directivas incluyen:

ng-click , que agrega un controlador de clic,
ng-hide , que oculta condicionalmente un elemento, y
<form> , que agrega 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 el nuestro, y estos serán tratados de la misma manera que las directivas integradas.

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

Minificación en Angular

¿Qué es la 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, se 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 minificado, no se imprimirá nada a la vista. Porque $ scope es una parte crucial entre el controlador y la vista, que ahora es reemplazada por la pequeña variable 'e'. Por lo tanto, cuando ejecute la aplicación, se producirá un error de dependencia de Unknown Provider 'e'.

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

Sintaxis de anotación en línea

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

$ inyectar Sintaxis de anotación de propiedad

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

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

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

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

Aquí, angular considerará la variable 'a' para ser tratada como $ scope, y mostrará la salida como 'Hello World!'.

Tutoriales de vídeo de inicio de AngularJS

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

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

AngularJS Tutorial
Empezando con AngularJS

Buscar..