frameworks js - uniandesisis3710/...módulo angular 2 (ngmodule feature module 1 feature module 2...
TRANSCRIPT
![Page 1: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/1.jpg)
FRAMEWORKS JSISIS 3710
![Page 2: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/2.jpg)
![Page 3: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/3.jpg)
Módulo Angular
Template
Template
Template
Controller
Controller
Controller
Scope
ServiceService
Service
Router
![Page 4: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/4.jpg)
Módulo Angular 2 (NGModule
Template
Template Component
Component
Component
Service
Service
Service
Template
![Page 5: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/5.jpg)
Root Module
Módulo Angular 2 (NGModule
Feature Module 1 Feature Module 2 Feature Module n
![Page 6: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/6.jpg)
Módulo
app/app.module.ts
![Page 7: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/7.jpg)
Módulo
Otros módulos requeridos
app/app.module.ts
![Page 8: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/8.jpg)
Módulo
Servicios
app/app.module.ts
![Page 9: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/9.jpg)
Módulo
Componentes en el módulo
app/app.module.ts
![Page 10: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/10.jpg)
Módulo
Elementos públicos del módulo
app/app.module.ts
![Page 11: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/11.jpg)
Módulo (Bootstaping)
app/main.ts
Dinámico: se compila en el browser (JIT-compiler)
Estático: pre-compilación (AoT-compiler)
![Page 12: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/12.jpg)
Módulo
Componente principal (solo para el módulo raíz)
app/app.module.ts
![Page 13: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/13.jpg)
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
![Page 14: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/14.jpg)
Componentes
![Page 15: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/15.jpg)
Componentes
Tag a usar en una plantilla <book-list> </book-list>
app/book-list.component.ts
![Page 16: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/16.jpg)
Componentes
Plantilla asociada al componente
app/book-list.component.ts
![Page 17: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/17.jpg)
Componentes
Servicios usados por el componente
app/book-list.component.ts
![Page 18: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/18.jpg)
Componentes
![Page 19: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/19.jpg)
Componentes (ciclo de vida)
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
![Page 20: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/20.jpg)
Templates
![Page 21: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/21.jpg)
Templates
app/book-list.component.html
![Page 22: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/22.jpg)
Templates
app/book-list.component.html
![Page 23: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/23.jpg)
Data binding
{{valor}}
[propiedad] = “valor”
(evento) = “handler”
[(ng-model)] = “propiedad”
DOM Componente Angular
![Page 24: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/24.jpg)
Data binding
{{valor}}
[propiedad] = “valor”
(evento) = “handler”
[(ng-model)] = “propiedad”
Interpolation
Property binding
Event binding
Two-way binding
![Page 25: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/25.jpg)
Data binding
![Page 26: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/26.jpg)
Data binding
![Page 27: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/27.jpg)
Data binding
![Page 28: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/28.jpg)
Data binding
![Page 29: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/29.jpg)
Data binding
![Page 30: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/30.jpg)
Data binding
Combina property and event binding
![Page 31: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/31.jpg)
Data binding
Template
Componente
Componente padre
Template padre
Componente hijo
Property binding
Event binding
Property binding
Event binding
![Page 32: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/32.jpg)
Directivas
Estructurales Modifican DOM (layout)
![Page 33: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/33.jpg)
Directivas
Tipo atributo Modifican apariencia o comportamiento de un elemento
![Page 34: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/34.jpg)
Servicios
Clase plana que implementa una funcionalidad o propiedades que son consumidas por un componente
![Page 35: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/35.jpg)
index.html
![Page 36: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/36.jpg)
index.html
Archivo para bootstraping
Selector del componente
![Page 37: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/37.jpg)
index.html
app/main.ts
app/book-list.component.ts
![Page 38: FRAMEWORKS JS - Uniandesisis3710/...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](https://reader035.vdocuments.mx/reader035/viewer/2022062606/6016f2bca6559347337578d9/html5/thumbnails/38.jpg)
Ejemplos
https://angular.io/docs/ts/latest/guide/ngmodule.html