SPA + AngularJS

Desarrollo web refactorizado: desarrollo de aplicación web de una sola pagina

con AngularJS

  carlos.uscamayta  uscamayta.carlos@gmail.com  @carlosUscamayta

  Carlos Álvaro Uscamayta.

  Team Development Member

  INNOVISION S.A.  Geovanna.serrranov

  Yovi2009.gs@gmail.com  @GSYovi

  Geovanna Serrano.  Team Development

Member  INNOVISION

S.A.

Desarrollo Web sin SPA

VIEW1 VIEW2VIEW3

VIEW4

SPA – Single Page Aplication

VIEW1

VIEW3VIEW4

VIEW2

Desafío de SPA

Y ahora quien podrá ayudarnos?

OH!!

YO!!!!!!

TRANSCLUS

ION RESTRICTIONDIRECTIVE

SCOPE

ROUTE

CONTROLLER

?

Empecemos…

• Fase 0

• Directives, filters & data bindings

• Views, controllers & scope

• Modules, routes & factories

Que la fuerza os acompañe

FASE 0

Descargar

https://angularjs.org

Instalar

DIRECTIVES, FILTERS AND DATA BINDINGS

Directives & binding

Directives

Iterando con la directiva ng-repeat

https://docs.angularjs.org/api/ng/directive

Usando filters

https://docs.angularjs.org/api/ng/filter

VIEWS, CONTROLLERS AND SCOPE

Views

Controller

The ‘GLUE’

Scope

VIEW

CONTROLLER

Creando un controller

MODULES, ROUTES & FACTORIES

Modules & containers

Creando un moduloQue es esto?

Nuestro módulo depende de otro módulo

Creando un controller en un módulo

Definimos nuestro controller

El rol de los routes

VIEW1 VIEW2

VIEW3VIEW4/view4

/view3

/view2

/view1

Definiendo Routes

Usando factories & services

El rol de las factories

Demostración

https://github.com/cuscamayta/AngularJSDemo

Conclusión

GRACIAS!!!