ppt's de la meetup js del 7 de febrero

1. Angularjs

2. 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
@iamcherta
cherta.info

3. Por qué un framework

4. Cómo llegamos hasta acá
● El browser como plataforma por
encima del SO
● Javascript es el único lenguaje Aplicaciones
del browser
más
● La capacidad de los clientes es
mayor complejas
● Nuestras necesidades no son
las mismas que hace 10 años.

5. Que desafíos enfrentamos
Nuevas
Más código
funcionalidades
Más puntos de
Menor visibilidad
fallos
Menor calidad

6. 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

7. 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.

8. Model View ViewModel
Passcards
* firstName
* lastName
* email
* phone
* primaryAddress
* alternateAddress
* valid?
Address
* address1
* address2
* city
* state
* country
* zip

9. Anatomía de una app
Podemos usar angular sin ninguna estructura pero se
recomienda usar angular-seed o yeoman.

10. 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).

11. 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 = {};
}

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

13. 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).

14. 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.

15. 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

16. 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.

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

18. Filter
Los filtros formatean expresiones en los templates
<h1>
{{person.name | uppercase}}
</h1>
También se pueden encadenar
<h1>
{{person.name | uppercase | reverse}}
</h1>

19. 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.

20. 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.

21. Testing