Vous êtes sur la page 1sur 17

Tutorial sencillo de AngularJS

Pgina 1 de 17

ANGULARJS
INTRODUCCIN Y PRIMEROS
PASOS
+ David Rubert / @tombatossals

GUARDAR COMO PDF

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 2 de 17

QU ES ANGULARJS
Una tecnologa nueva en la capa de cliente que nos permite
realizar cosas chachis en nuestras pginas sin necesidad de
montar jaleos de cdigo. Separa muy bien la
responsabilidad de cada tecnologa en su mbito: CSS,
HTML y Javascript, y las comunica cuando lo considera
necesario.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 3 de 17

POR QU ANGULARJS
Caracterstica principal. No manosees el rbol DOM para
acceder al valor de un elemento.
/ / Est o noooooo por f avoooor !
var t i t ul o = $( " #el em" ) . up( " l i " ) . f i r st ( " p" ) . down( " span. ol al a" ) . val ( ) ;
/ / Est o se ve mej or : )
var t i t ul o = $scope. t i t ul o;

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 4 de 17

POR QU ANGULARJS
Esto se consigue actualizando la vista automticamente
cuando cambia el modelo, o viceversa. Two-way data
binding.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 5 de 17

POR QU ANGULARJS
Disponemos de plantillas que extienden el vocabulario del
cdigo HTML para proporcionarnos la introduccin de
lgica en la representacin de nuestra informacin.
<di v ng- cont r ol l er =" Al bumCt r l " >
<ul >
<l i ng- r epeat =" i mage i n i mages" >
<i mg ng- sr c=" { { i mage. t humbnai l } } " al t =" { { i mage. descr i pt i on} } " >
</ l i >
</ ul >
</ di v>

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 6 de 17

POR QU ANGULARJS
3. Reausability. Permite crear componentes (directivas)
fcilmente reutilizables (que permiten aislar totalmente
su funcin, no chocan con otros).
4. Testing. Al tener componentes aislados, podemos testear
su comportamiento de manera independiente.
5. Inyeccin 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.
<! doct ype ht ml >
<ht ml ng- app>
<head> . . . </ head>
<body>
<di v ng- cont r ol l er =" Gr eet Ct r l " >
Hel l o { { name} } !
</ di v>
<di v ng- cont r ol l er =" Li st Ct r l " >
<ol >
<l i ng- r epeat =" name i n names" >{ { name} } </ l i >
</ ol >
</ di v>
</ body>
</ ht ml >

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

Pgina 7 de 17

18/02/2015

Tutorial sencillo de AngularJS

Pgina 8 de 17

VOCABULARIO
Controlador. Es el cdigo con la lgica que comunica el
modelo con la vista.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 9 de 17

VOCABULARIO
Modelo. Son los datos, que junto con la plantilla producen
las vistas.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 10 de 17

VOCABULARIO
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
funde con el modelo y se renderiza en el rbol DOM.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

Pgina 11 de 17

VOCABULARIO
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
funde con el modelo y se renderiza en el rbol DOM.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

Pgina 12 de 17

18/02/2015

Tutorial sencillo de AngularJS

Pgina 13 de 17

PASO 1
MONTANDO LA
INFRAESTRUCTURA
http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

Pgina 14 de 17

18/02/2015

Tutorial sencillo de AngularJS

Pgina 15 de 17

$ gi t cl one ht t ps: / / gi t hub. com/ t ombat ossal s/ angul ar j s- t ut or i al


$ gi t checkout phase1

ng-app
ng-controller
ng-model
ng-show
{{ template_vars }}

PASO 2
MS DIRECTIVAS Y
SERVICIOS
http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015

Tutorial sencillo de AngularJS

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

Pgina 16 de 17

18/02/2015

Tutorial sencillo de AngularJS

Pgina 17 de 17

$ gi t cl one ht t ps: / / gi t hub. com/ t ombat ossal s/ angul ar j s- t ut or i al


$ gi t checkout phase2

Filtro number. Nmeros 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.

http://tombatossals.github.io/angularjs-tutorial/?print-pdf

18/02/2015