tutorial angularjs
DESCRIPTION
Tutorial sencillo de angular JSTRANSCRIPT
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 1 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
ANGULARJSINTRODUCCIÓN Y PRIMEROS PA-
SOS /
+ David Rubert @tombatossals
GUARDAR COMO PDF
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 2 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
QUÉ ES ANGULARJSUna tecnología nueva en la capa de cliente que nos permiterealizar cosas chachis en nuestras páginas sin necesidad de
montar jaleos de código. Separa muy bien laresponsabilidad de cada tecnología en su ámbito: CSS,HTML y Javascript, y las comunica cuando lo considera
necesario.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 3 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
POR QUÉ ANGULARJS
Característica principal. No manosees el árbol DOM paraacceder 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;
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 4 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
POR QUÉ ANGULARJSEsto se consigue actualizando la vista automáticamentecuando cambia el modelo, o viceversa. Two-way databinding.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 5 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
POR QUÉ ANGULARJSDisponemos de plantillas que extienden el vocabulario delcódigo HTML para proporcionarnos la introducción de lógicaen 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>
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 6 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
POR QUÉ ANGULARJS3. Reausability. Permite crear componentes (directivas)
fácilmente reutilizables (que permiten aislar totalmentesu función, no chocan con otros).
4. Testing. Al tener componentes aislados, podemos testearsu comportamiento de manera independiente.
5. Inyección de dependencias. Si necesitamos hacer usode un servicio, lo inyectamos en nuestro controladordirectamente y funciona.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 7 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
VOCABULARIOScope. Es el responsable de detectar los cambios en elmodelo 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>
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 8 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
VOCABULARIOControlador. Es el código con la lógica que comunica elmodelo con la vista.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 9 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
VOCABULARIOModelo. Son los datos, que junto con la plantilla producenlas vistas.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 10 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
VOCABULARIOVistas. Lo que el usuario visualiza. Parte de una plantilla, sefunde con el modelo y se renderiza en el árbol DOM.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 11 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
VOCABULARIOVistas. Lo que el usuario visualiza. Parte de una plantilla, sefunde con el modelo y se renderiza en el árbol DOM.
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 12 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 13 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 14 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
PASO 1
MONTANDO LA IN-FRAESTRUCTURA
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 15 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
$ git clone https://github.com/tombatossals/angularjs-tutorial$ git checkout phase1
ng-app
ng-controller
ng-model
ng-show
{{ template_vars }}
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 16 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
PASO 2
MÁS DIRECTIVAS Y SERVI-CIOS
10/26/15, 7:45 AMTutorial sencillo de AngularJS
Page 17 of 17http://tombatossals.github.io/angularjs-tutorial/?print-pdf
$ 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.