Manual de Angularjs

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
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.
18/02/2015
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;
18/02/2015
Pgina 4 de 17
POR QU ANGULARJS
Esto se consigue actualizando la vista automticamente
cuando cambia el modelo, o viceversa. Two-way data
binding.
18/02/2015
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>
18/02/2015
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 >
18/02/2015
Pgina 7 de 17
18/02/2015
Pgina 8 de 17
VOCABULARIO
Controlador. Es el cdigo con la lgica que comunica el
modelo con la vista.
18/02/2015
Pgina 9 de 17
VOCABULARIO
Modelo. Son los datos, que junto con la plantilla producen
las vistas.
18/02/2015
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.
18/02/2015
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.
18/02/2015
Pgina 12 de 17
18/02/2015
Pgina 13 de 17
PASO 1
MONTANDO LA
INFRAESTRUCTURA
18/02/2015
Pgina 14 de 17
18/02/2015
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
18/02/2015
Pgina 16 de 17
18/02/2015
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.
18/02/2015

Manual de Angularjs

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Angularjs

Uploaded by

Copyright:

Available Formats

Tutorial sencillo de AngularJS

GUARDAR COMO PDF

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

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

Tutorial sencillo de AngularJS

Tutorial sencillo de AngularJS

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

Filtro number. Nmeros decimales.

You might also like