introducción a angularjs

18
AngularJS Superheroic Javascript MVW Framework

Upload: luis-felipe-natividad-alejos

Post on 12-Apr-2017

246 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Introducción a AngularJS

AngularJSSuperheroic Javascript MVW Framework

Page 2: Introducción a AngularJS

Luis Felipe Natividad Alejos◇ Ingeniero de Software de la Universidad

Nacional Mayor de San Marcos.◇ Jefe de Proyectos en Grupo El Comercio

(Orbis Ventures).◇ Colaborador en Frontend Labs

(frontendlabs.io)◇ @feluis23

Page 3: Introducción a AngularJS

AngularJS es un framework javascript del lado del frontend mantenido por Google, nace en el 2009, pero se hace popular a finales del 2012. Framework MVW(Model-View-Whatever), donde whatever nos indica “lo que nos sirva a cada uno”.

Hablemos de AngularJS

Page 4: Introducción a AngularJS

“AngularJS extiende el HTML de tal manera que podemos decir que le da súper poderes, permitiéndonos crear aplicaciones dinámicas, con mucha interacción del usuario y altamente escalables.

Page 5: Introducción a AngularJS

Two-Way data binding

Page 6: Introducción a AngularJS

Inyección de dependenciasEste principio es muy usado por AngularJS, y permite que se inyecten los objetos o dependencias en vez que el mismo módulo donde estamos trabajando sea quien lo cree. Esto permite tener un código desacoplado.

Page 7: Introducción a AngularJS

$scopeScope es el ámbito donde interactúa algun modulo o componente definido por AngularJS

1

Page 8: Introducción a AngularJS

Módulos(module)Los módulos son contenedores de diferentes partes de nuestra aplicación.

2

Page 9: Introducción a AngularJS

Controladores(controller)Los controladores en AngularJS son objetos que permiten desarrollar la lógica de la aplicación, enlaza el $scope con la vista y permite tener un control total de los datos.

3

Page 10: Introducción a AngularJS

Directivas(directive)Las directivas vienen a ser la forma en que extendemos nuestro html, permitiéndonos agregar una porción de código hasta una funcionalidad completa.

4● ng-app● ng-controller● ng-model● ng-view● ng-click

● ng-init● ng-repeat● ng-change● ng-hide● ng-show … entre otros

Page 11: Introducción a AngularJS

Servicios(service) y Fábricas(factory)Los servicios y fábricas, son módulos que permiten agrupar una funcionalidad específica e inyectarlos donde queramos.5

Page 12: Introducción a AngularJS

Filtros(filter)Los filtros son los encargados de transformar los datos para luego mostrarlos.6

Page 13: Introducción a AngularJS

Para tener en cuenta

◇ AngularJS es una solución completa, por lo cual no se puede comparar con Jquery.

◇ Es un framework que está diseñado para ser testeable fácilmente.

◇ Esta diseñado para desarrollar aplicaciones no páginas web.

Page 14: Introducción a AngularJS

Vs. OtrosBackboneJSFramework javascript MVC, que permite trabajar aplicaciones pequeñas y medianas, ligero y de muy baja curva de aprendizaje.Jquery y Underscore

EmberJSFramework javascript MVC, permite desarrollar aplicaciones single page de manera ordenada y óptima.Jquery y Handelbars.

ReactJSNo es un framework javascript, es una librería que ha tomado mucha relevancia últimamente en la comunidad y permite interfaces de usuarios y no puede ser comparado con AngularJS.

Page 15: Introducción a AngularJS

AngularJS es genial!!!Nos brinda un sin número de herramientas, como routing, inyección de dependencias, templates entre otros, que hacen de este framework muy completo.

Page 16: Introducción a AngularJS

Ionic FrameworkThe beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.

Place your screenshot here

Page 17: Introducción a AngularJS

Aplicaciones que usan AngularJS

Plunker

Page 18: Introducción a AngularJS

Thanks!Preguntas?Pueden ubicarme en:◇ @feluis23◇ [email protected]◇ http://frontendlabs.io