Angularjs

@iamchertacherta.info

Estudiante de Analista en Tecnologías de la Información. Trabajé TCS Uy, TCS Arg, GuruYu, moove-it y ahora en InfUy.Desarrollo web apps en ruby, rails, javascript, java, felx (sí todavía existe) y sap

Por qué un framework

Cómo llegamos hasta acá

● El browser como plataforma por encima del SO

● Javascript es el único lenguaje del browser

● La capacidad de los clientes es mayor

● Nuestras necesidades no son las mismas que hace 10 años.

Aplicaciones más

complejas

Que desafíos enfrentamos

Nuevas funcionalidades Más código

Menor visibilidadMás puntos de fallos

Menor calidad

Qué es angularjs

Es un framework que implementa MVW para desarrollar aplicaciones web utilizando HTML.

No trata de sobreponerse al HTML sino extenderlo.

Mmmm... A mi me parece que es un framework MVVM

Model View ViewModel

Las vistas son suficientemente complejas como para tener su propia lógica que no es lógica de negocios, si no lógica de vista.

El View Model es una representación del problema de la vista.

Model View ViewModel

Passcards* firstName* lastName* email* phone* primaryAddress* alternateAddress* valid?

Address* address1* address2* city* state* country* zip

Anatomía de una app

Podemos usar angular sin ninguna estructura pero se recomienda usar angular-seed o yeoman.

Scope

Un scope es un objeto encargado de conectar las vistas con los controllers.

En él vive el view-model.

Angular crea scopes de forma jerárquica bajo el rootScope.

La clase tiene un método que permite observar cambios en el view model ($watch) y otro que permite propagar esos cambios a las vistas ($apply).

Controllers

En angularjs un controller es una función que se usa para crear hijos del rootScope.

Más específicamente se usan para: ● Setear el estado inicial del scope● Agregar comportamiento a un scope

Los controllers reciben el scope como parámetro: function AppCtrl($scope) {

$scope.person = {};}

Dependency Injection

Angular usa DI para el manejo de todas las dependencias tanto en módulos como en controllers.

Data binding

Es el "cableado" de las propiedades de un modelo con los elementos de la vista o template.

Funciona tanto para mostrar como para asignar valores (two way data binding).

Data binding (beneficios)

Eliminamos la vista de nuestro problema y nos enfocamos a resolver el problema (controller + scope)

Nuestro código es más testeable. No nos importa testear el glue code de cambiar el DOM, testeamos directamente el controller.

Templates

Los templates en son código HTML y CSS + elementos específicos de angular que agregan comportamiento y hacen del HTML estático vistas dinámicas.

Los elementos pueden ser:● Directive● Markup o expressions● Filter● Form controls

Directives

Las directivas son una forma de extender HTML.

Angular viene con muchas directivas como ng-repeat o ng-model y nos permite crear las nuestras.

Expression

Son contenidas en {{expression}} y se evalúan cuando angular compila el template.

Filter

Los filtros formatean expresiones en los templates

<h1> {{person.name | uppercase}}</h1>

También se pueden encadenar

<h1> {{person.name | uppercase | reverse}}</h1>

Form y control

Los forms y los controles son componentes (directivas de angular) que facilitan el desarrollo de formularios.

La clave está en la directiva ng-model. Cuando seteamos esta directiva no sólo estamos agregando el binding bi direccional sino también comportamientos específicos para validar y manejar el estado de los formularios.

Angular provee implementaciones para casi todos los componentes de html5 (text, number, url, email, radio,checkbox) y también algunas directivas como required,

pattern, minlength, maxlength, min, max.

Service

Los services son dependencias que se inyectan en los controllers y proveen funcionalidad específica.

$scope es un servicio igual que $http y $resource.

Testing