Your SlideShare is downloading. ×
0
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Angular js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular js

1,743

Published on

ppt's de la meetup js del 7 de febrero

ppt's de la meetup js del 7 de febrero

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,743
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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ódigofuncionalidadesMás puntos de Menor visibilidad fallosMenor calidad
  • 6. Qué es angularjsEs un framework que implementa MVW para desarrollaraplicaciones web utilizando HTML.No trata de sobreponerse al HTML sino extenderlo. Mmmm... A mi me parece que es un framework MVVM
  • 7. Model View ViewModelLas vistas son suficientemente complejas como para tenersu propia lógica que no es lógica de negocios, si no lógicade vista.El View Model es una representación del problema de lavista.
  • 8. Model View ViewModel Passcards * firstName * lastName * email * phone * primaryAddress * alternateAddress * valid? Address * address1 * address2 * city * state * country * zip
  • 9. Anatomía de una appPodemos usar angular sin ninguna estructura pero serecomienda usar angular-seed o yeoman.
  • 10. ScopeUn scope es un objeto encargado de conectar las vistascon 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 enel view model ($watch) y otro que permite propagar esoscambios a las vistas ($apply).
  • 11. ControllersEn angularjs un controller es una función que se usa paracrear hijos del rootScope.Más específicamente se usan para: ● Setear el estado inicial del scope ● Agregar comportamiento a un scopeLos controllers reciben el scopecomo parámetro: function AppCtrl($scope) { $scope.person = {}; }
  • 12. Dependency InjectionAngular usa DI para el manejo de todas las dependenciastanto en módulos como en controllers.
  • 13. Data bindingEs el "cableado" de las propiedades de un modelo con loselementos 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 enfocamosa resolver el problema (controller + scope)Nuestro código es más testeable. No nos importa testear elglue code de cambiar el DOM, testeamos directamente elcontroller.
  • 15. TemplatesLos templates en son código HTML y CSS + elementosespecíficos de angular que agregan comportamiento yhacen del HTML estático vistas dinámicas.Los elementos pueden ser: ● Directive ● Markup o expressions ● Filter ● Form controls
  • 16. DirectivesLas 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. ExpressionSon contenidas en {{expression}} y se evalúan cuandoangular compila el template.
  • 18. FilterLos 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 controlLos forms y los controles son componentes (directivas deangular) que facilitan el desarrollo de formularios.La clave está en la directiva ng-model. Cuando seteamosesta directiva no sólo estamos agregando el binding bidireccional sino también comportamientos específicos paravalidar y manejar el estado de los formularios.Angular provee implementaciones para casi todos loscomponentes de html5 (text, number, url, email, radio,checkbox) y también algunas directivas como required,pattern, minlength, maxlength, min, max.
  • 20. ServiceLos services son dependencias que se inyectan en loscontrollers y proveen funcionalidad específica.$scope es un servicio igual que $http y $resource.
  • 21. Testing

×