Programacin AngularJS

1.2*

Introduccin

www.chileforma.cl
AngularJS
Framework Javascript creado por google

Arquitectura de nuestras aplicaciones

Extiende el lenguaje HTML

Jquery es opcional*

Inyeccin de dependencia

Integracin con otras libreras

Arquitecturas escalables
AngularJS
Reducimos cdigo

Reducimos libreras

Legibilidad

DRY

Separacin lgica - layout

Posibilidad de refactorizar el layout sin grandes

impactos en las funcionalidad

SPA
Qu no es?

No es una librera para manipular DOM (Jquery)

No es un lenguaje o plataforma (java, javascript)

No es un lenguaje como coffescript para compilar js

No te abstrae de HTML duro o CSS

No es un framework visual (bootstrap, material)

Angular diferencia jQuery(core)
Jquery es la base de muchos frameworks y cada quien
tiene su propio Jquery

Jquery es ms bien una librera que un framework

Jquery suple deficiencias de los navegadores

Angular es un framework que te obliga a utilizar su

arquitectura dispuesta

Angular es ms estructurado, ordena la forma de trabajar

de los equipos de trabajo

Angular maneja un enfoque estilo KendoUI o KnockoutJS,

two way
Angularjs y nodejs
Angular caractersticas
AngularJS Version 2?
Actual : 1.5
AngularJS Browsers
AngularJS Modules - arquitectura de una aplicacin
AngularJS Ventajas!
 Controller
Model(ViewModel)
View
AngularJS Controller

Encapsulan el comportamiento

Asociado a una vista

Encargados de inyectar recursos y servicios a la vista

Posibilidad de emitir eventos y escucharlos

No se accede en ningn caso al DOM

Separacin de la vista(HTML) y las funcionalidades(JS)

 CONTROLLER

C M
$scope

V
AngularJS Model

Contienen toda la informacin a

desplegarse en las vistas.

Se insertan a travs de $scope.

Pueden ser tipos primitivos, objetos,

clases, etc.
AngularJS DATA BINDING
AngularJS Model

Los eventos de actualizacin son continuos y

bidireccionales
 BIDIRECCIN

C M
$scope

V
AngularJS View

Despliegan la informacin contenida en los modelos de

un controlador en especfico.

Pueden declarar distintos controladores para diferentes

reas

Puede extenderse el HTML estndar, las denominadas

directivas: <mitag miatt=selected >{{array}}</mitag>

Puede combinarse con otras libreras, jQuery, jqgrid,

fullcalendar, hightchart, etc

Podemos aplicar filtros pre-definidos <p>{{dni | filter}}</p>

AngularJS Routing

Controla el flujo de la aplicacin.

SPA (Single Page Applications).

Ayudan a separar la aplicacin en responsabilidades.

Permite hacer bookmark/favs de una url en especfica

Permite recepcin de parmetros

 FASES

Recin en este punto nuestra aplicacin esta disponible junto

OK con los componentes angular

M config run OK

linea tiempo
AngularJS SPA
 RUTAS CONFIG

M fase
config

cambio
VIEW-PLANTILLA plantilla

CONTENIDO DINAMICO
AngularJS Si no tuvisemos Angular?

Algunos casos
AngularJS Hola Mundo, Modulos

Todo parte con un modulo

AngularJS Hola Mundo, Modulos

Todo parte con un modulo

AngularJS Hola Mundo, Modulos

Todo parte con un modulo

AngularJS Hola Mundo, Controller

Los controller son un tipo de Servicio, que tiene la

caracterstica de poseer un scope.

La idea de los controller es la de actuar una interfaz entre los servicios

y el estado, acciones y comportamientos asociado en el HTML.
AngularJS Scope
El scope, es un contexto, que puede contener variables y funciones. El alcance
de este, est definido el elemento del DOM al cual se encuentra atachado.

$scope
AngularJS Scope

Guardamos la info JS de nuestra pgina

controller viewmodel view

$scope.i=1 magia <p>{{i}}</p>

AngularJS DataBinding, no ms: $(#)

Relaciona el HTML con nuestro modelo de datos

Modelo: Variables JS con la informacin

Plantilla: El tpico HTML que programamos

HTML: Resultado despus de unir el modelo y la plantilla,

reemplazando las expresiones {{}} por ejemplo.
AngularJS Lo mejorable

Rendimiento: El manejo de memoria, servicios, directivas

y otros componentes se preparan sin necesariamente
utilizarlo, o por mal uso de los componentes.

Documentacin: A veces no hay suficientes ejemplos

para comenzar.

MonoFW?: Cerrado en su arquitectura inicial.

AngularJS Hola Mundo, expresiones {{ }}
AngularJS Hola Mundo, eventos: ng-*

*No abusar de
expresiones en los ng-
AngularJS Hola Mundo, inputs: ng-model
AngularJS Hola Mundo, funcin

Funciones que pueden ser llamadas desde el HTML

view controller
AngularJS Hola Mundo

Filtros utilizables en cualquier sector del HTML

AngularJS Servicios

Objeto JS para obtener informacin

Puede inyectarse en controladores u otros

servicios

Existen servicios angular($http, $log, etc) y los

que nosotros crearemos.
module
Por lo general esta las llamadas a un Host,
ejemplo, operaciones de un servicio RestFull

Servicio para validar un formato RUN, DNI,

Dates, etc.
AngularJS Servicios

Factory&Service
AngularJS Servicios

Service&Factory, otro ejemplo

AngularJS Servicios

Cual podemos utilizar?

AngularJS Servicios

DI = Agregamos objetos instanceados a la clase

AngularJS Servicios

DI (Inyeccin de Dependencia)
AngularJS Directivas

Sirven para enlazar los

modelos con las vistas.

Extienden el comportamiento
de las etiquetas HTML.

Permiten la creacin de nuevas

etiquetas y/o atributos.

Son globales para todo el

proyecto.
AngularJS Modelo completo
EJEMPLOS - REVISAR

EX_01
 EJEMPLOS - REVISAR

EX_02
Hacer un delete
 EJEMPLOS - MODULOS

M S

D
V
 EJEMPLOS - MODULOS

COMUNICACIN

F
M S

D
V
 EJEMPLOS - ESCALABLE PT1

D M M D

D M M D

F C
M
S D
 EJEMPLOS - REVISAR

EX_03
poner un ver ms
(5 filas como mximo)
 EJEMPLOS - REVISAR

EX_04
1. MathService debe poder recibir
cualquier # de exponente x y
EJEMPLOS - REVISAR

EX_05