Qué es AngularJS
Una tecnología nueva en la capa de cliente que nos permite realizar cosas chachis en nuestras páginas sin necesidad de montar jaleos de código. Separa muy bien la responsabilidad de cada tecnología en su ámbito: CSS, HTML y Javascript, y las comunica cuando lo considera necesario.
Por qué AngularJS
Característica principal. No manosees el árbol DOM para acceder al valor de un elemento.
// Esto noooooo por favoooor!
var titulo = $("#elem").up("li").first("p").down("span.olala").val();
// Esto se ve mejor :)
var titulo = $scope.titulo;
Por qué AngularJS
Esto se consigue actualizando la vista automáticamente cuando cambia el modelo, o viceversa. Two-way data binding.
Por qué AngularJS
Disponemos de plantillas que extienden el vocabulario del código HTML para proporcionarnos la introducción de lógica en la representación de nuestra información.
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
Por qué AngularJS
- Reausability. Permite crear componentes (directivas) fácilmente reutilizables (que permiten aislar totalmente su función, no chocan con otros).
- Testing. Al tener componentes aislados, podemos testear su comportamiento de manera independiente.
- Inyección de dependencias. Si necesitamos hacer uso de un servicio, lo inyectamos en nuestro controlador directamente y funciona.
Vocabulario
Scope. Es el responsable de detectar los cambios en el modelo y proporciona el contexto a las plantillas.
<!doctype html>
<html ng-app>
<head> ... </head>
<body>
<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="name in names">{{name}}</li>
</ol>
</div>
</body>
</html>
Vocabulario
Controlador. Es el código con la lógica que comunica el modelo con la vista.
Vocabulario
Modelo. Son los datos, que junto con la plantilla producen las vistas.
Vocabulario
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.
Vocabulario
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.
Let's go slowly inside the code!
Paso 1
Montando la infraestructura
$ git clone https://github.com/tombatossals/angularjs-tutorial
$ git checkout phase1
- ng-app
- ng-controller
- ng-model
- ng-show
- {{ template_vars }}
Paso 2
Más directivas y servicios
$ git clone https://github.com/tombatossals/angularjs-tutorial
$ git checkout phase2
- Filtro number. Números decimales.
- ng-cloak. Esperar antes de renderizar la plantilla.
- Watches. Inspeccionando variables del modelo.
- Servicio routeProvider. Enrutador.
- Vistas parciales. Cargar mini-plantillas.
- Tests E2E. Tests End-to-End.