frameworks js - uniandesisis3710/...módulo angular 2 (ngmodule feature module 1 feature module 2...

FRAMEWORKS JSISIS 3710

Módulo Angular

Template

Template

Template

Controller

Controller

Controller

Scope

ServiceService

Service

Router

Módulo Angular 2 (NGModule

Template

Template Component

Component

Component

Service

Service

Service

Template

Root Module

Módulo Angular 2 (NGModule

Feature Module 1 Feature Module 2 Feature Module n

Módulo

app/app.module.ts

Módulo

Otros módulos requeridos

app/app.module.ts

Módulo

Servicios

app/app.module.ts

Módulo

Componentes en el módulo

app/app.module.ts

Módulo

Elementos públicos del módulo

app/app.module.ts

Módulo (Bootstaping)

app/main.ts

Dinámico: se compila en el browser (JIT-compiler)

Estático: pre-compilación (AoT-compiler)

Módulo

Componente principal (solo para el módulo raíz)

app/app.module.ts

Componentes

Un componente se encarga de una parte de la GUI (View)

Un componente se implementa como clase ligera que provee una API para la vista

Componentes

Componentes

Tag a usar en una plantilla <book-list> </book-list>

app/book-list.component.ts

Componentes

Plantilla asociada al componente

app/book-list.component.ts

Componentes

Servicios usados por el componente

app/book-list.component.ts

Componentes

Componentes (ciclo de vida)

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Templates

Templates

app/book-list.component.html

Templates

app/book-list.component.html

Data binding

{{valor}}

[propiedad] = “valor”

(evento) = “handler”

[(ng-model)] = “propiedad”

DOM Componente Angular

Data binding

{{valor}}

[propiedad] = “valor”

(evento) = “handler”

[(ng-model)] = “propiedad”

Interpolation

Property binding

Event binding

Two-way binding

Data binding

Data binding

Data binding

Data binding

Data binding

Data binding

Combina property and event binding

Data binding

Template

Componente

Componente padre

Template padre

Componente hijo

Property binding

Event binding

Property binding

Event binding

Directivas

Estructurales Modifican DOM (layout)

Directivas

Tipo atributo Modifican apariencia o comportamiento de un elemento

Servicios

Clase plana que implementa una funcionalidad o propiedades que son consumidas por un componente

index.html

index.html

Archivo para bootstraping

Selector del componente

index.html

app/main.ts

app/book-list.component.ts

Ejemplos

https://angular.io/docs/ts/latest/guide/ngmodule.html