Upload File

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

  • Home
  • Documents
  • 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
38
FRAMEWORKS JS ISIS 3710

Upload: others

Post on 28-Sep-2020

8 views

Category:

Documents


0 download

Report

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

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
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ejemplos

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


MÓDULO 6. MÓDULO 6.- EMPEZAR CON POWER POINT

Módulo de young, módulo de corte y - Rocio

Manual Módulo Honorarios · Manual Módulo Honorarios 2 Módulo Honorarios ¿Cómo acceder al Módulo Honorarios? Para acceder al Módulo Honorarios debe presionar el botón que

Manual de Usuario - Módulo de Logística Sub Módulo

Dynamic Braking Module Módulo de Freno Dinámico …ecatalog.weg.net/files/wegnet/WEG-cfw-11-modulo-de-frenagem-reo... · Módulo de Freno Dinámico Módulo de Frenagem Reostática

Módulo 2 - Freddie Mac · Módulo 2: Administrando su dinero 51 52 Module 2: Managing Your Money Steps for Developing a Successful Spending PlanThe following items must be considered

USB Communication Plug-in Module Módulo Plug-in de ...€¦ · USB Communication Plug-in Module Módulo Plug-in de Comunicación USB Módulo Plug-in de Comunicação USB CFW500 Installation,

Grill Module Installation Guide - Sub-Zero · Instalación del módulo Retire el módulo y los componentes del empaque de envío y recicle los materiales de embalaje. 1 Deslice el

Wireless Module Module sans fil Módulo inalámbrico Wireless-Modul … · Wireless-Modul Modulo senza fili ... Attach this product to the wireless module compatible USB A-type terminal

video módulo 2 módulo 3 módulo 4 módulo bienvenida e ...static.vgroup.cl/pdf/2015/12/fichasUChile/Ficha... · módulo 1 e-learning módulo 2 e-learning + módulo 3 e-learning

AURICAL FreeFit Módulo do Otosuite PMM Módulo de

Feature Extraction Module

Dynamic Braking Module Módulo de Freno Dinámico … · Módulo de Freno Dinámico Módulo de Frenagem Reostática DBW04 ... 1.2 SAFETY WARNINGS IN THE PRODUCT ... 3.3.4 Control

Digital I/Os Plug-in Module Módulo Plug-in de … · Digital I/Os Plug-in Module Módulo Plug-in de Expansión de I/Os Digitales Módulo Plug-in de Expansão de I/Os Digitais CFW500

MÓDULO COMPRENSIÓN Y PRODUCCIÓN TEXTUAL IIsfdb3980dd85f527d.jimcontent.com/download/version/1448903894/module... · FICHA TÉCNICA Nombre Módulo COMPRENSIÓN Y PRODUCCIÓN TEXTUAL

SonicOS 5.8.1 Global BWM Feature Module-1

Perl 5.20: Feature, Kultur, Module, Werkzeuge

SonicOS 5.5 Single Sign on Feature Module

CAN Communication Module Módulo de Comunicación · PDF fileCAN Communication Module Módulo de Comunicación CAN Módulo de Comunicação CAN CFW100 Installation, Configuration and

Módulo 6: Base de Datos Module 6_SP.pdfBotanic Gardens Conservation International The world’s largest plant conservation network Módulo 6: Base de Datos People Plants Places Science

Multifunctional Timer Module - Velleman · Multifunctional Timer Module Operating instructions ... Módulo de temporizador multifuncional. ... purchased and for a period of ONE YEAR

Module 7 - ES - Módulo 7 – Intercambio de experiencias II: Cómo fomentar el uso de los datos

CAN Communication Module Módulo de Comunicación CAN ...§ão... · robustness against electromagnetic interference. ... 1.1 AVISOS DE SEGURIDAD ¡NOTA! Solamente utilizar el módulo

INSTRUCCIONES INSTRUCTIONS - media.bahag.com · 12 h 4 r. 12 mm marmol 3 5 logic/square instrucciones instructions ... alfa mÓdulo | module 45 cm mÓdulo | module 50 cm mÓdulo |

NAT Load Balance 5.0e Feature Module

MÓDULO DE FREIDORA GUÍA DE USO Y … Cooktop UCI 803999B.pdf · fryer module use & care guide mÓdulo de freidora guÍa de uso y mantenimiento friteuse guide d’utilisation et

Pure Module Funding DiscoveryFunding Discovery module for Pure works. Pure module guide info Module guide no. 7 Modules Administration module, Funding Discovery module Feature addressed

Dynamic Braking Module Módulo de Freno Dinámico Módulo … · Módulo de Freno Dinámico Módulo de Frenagem Reostática DBW04 ... 3.3.1 Power Terminals, ... Manual do Usuário

Manual del Módulo de Diplomados - iesap · Manual de Usuario del Sistema Académico Página 4 a) Módulo Identificación y Acceso b) Módulo Matrícula c) Módulo Horario d) Módulo

SonicOS 5.8 Route Based VPN Feature Module

USB Communication Plug-in Module Módulo Plug-in de ... · USB Communication Plug-in Module Módulo Plug-in de Comunicación USB Módulo Plug-in de Comunicação USB CFW500 Installation,

UP Diliman CRS Module and Feature List

Luggage - Iowa State University...Drupal PHP MySQL Webserver and OS Module Module Configuration View Feature 1 Module Module Configuration View Feature 2 Theme Layer (“skin”)

CAN Communication Module Módulo de Comunicación … · CAN Communication Module Módulo de Comunicación CAN ... user manual before installing or operating ... than one power supply

Feature Selective Anchor-Free Module for Single-Shot Object Detectionopenaccess.thecvf.com/content_CVPR_2019/papers/Zhu... · 2019-06-10 · Feature Selective Anchor-Free Module for