ANGULARJS
ANGULARJS
INTRODUCCIÓN Y PRIMEROS PASOS
INTRODUCCIÓN Y PRIMEROS PASOS
+ David Rubert @tombatossals
/
QUÉ ES ANGULARJS
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
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
POR QUÉ ANGULARJS
Esto se consigue actualizando la vista automáticamente
cuando cambia el modelo, o viceversa. Two-way data
binding.
POR QUÉ ANGULARJS
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
POR QUÉ ANGULARJS
3. Reausability. Permite crear componentes (directivas)
fácilmente reutilizables (que permiten aislar totalmente
su función, no chocan con otros).
4. Testing. Al tener componentes aislados, podemos testear
su comportamiento de manera independiente.
5. Inyección de dependencias. Si necesitamos hacer uso
de un servicio, lo inyectamos en nuestro controlador
directamente y funciona.
VOCABULARIO
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
VOCABULARIO
Controlador. Es el código con la lógica que comunica el
modelo con la vista.
VOCABULARIO
VOCABULARIO
Modelo. Son los datos, que junto con la plantilla producen
las vistas.
VOCABULARIO
VOCABULARIO
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
funde con el modelo y se renderiza en el árbol DOM.
VOCABULARIO
VOCABULARIO
Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
funde con el modelo y se renderiza en el árbol DOM.
MONTANDO LA
MONTANDO LA
INFRAESTRUCTURA
INFRAESTRUCTURA
$ git clone https://github.com/tombatossals/angularjs-tutorial
$ git checkout phase1
ng-app
ng-controller
ng-model
ng-show
{{ template_vars }}
MÁS DIRECTIVAS Y SERVICIOS
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.
Crear cuenta
Comentarios de: Tutorial sencillo de AngularJS (0)
No hay comentarios