Angular 2

José Díaz @jamdiazdiaz

Arquitectura Angular
Module (app.module.ts)

Clases que pertenecen

a este módulo
Module

Subconjunto de
declaraciones que sera
visibles y se podrán
usar en los templates de
componentes de otros
módulos
Module

Otros módulos cuyas

clases exportadas son
necesarias en los
templates de
componentes declarados
en este módulo
Module

Son los servicios que

este módulo aporta para
la colección global de
servicios.
Module

Es la vista principal de la
aplicación o root
component que hospeda
a las otras vistas de la
aplicación, solo el
módulo raíz debería
tener esta propiedad.
bootstrapping tu root module
(main.ts)
Librerías en Angular

O Librerías de módulos
Ejemplos
Componentes
Un componente controla
una parte de pantalla llamada vista.

Por ejemplo, las siguientes vistas son

controladas por componentes:
• El app root con los links de navegación
• La lista de heroes
• El editor de héroe
 app/hero-list.component.ts

Angular crea, modifica, y destruye componentes, según como el usuario se mueva alrededor de la aplicación.
Tu aplicación puede aprovechar el ciclo de vida denominado lifecycle hooks, como el ngOnInit() que vemos en este código.
Templates
Nosotros definimos la vista de un
componente con su template.
Un template es una forma de HTML
que le dice a angular como renderizar
el componente.
 app/hero-list.component.html

Aunque este template usa elementos HTML típicos como <h2> y <p>, este tiene algunas diferencias cómo: *ngFor, {{hero.name}},
(click), [hero], y <hero-detail>. Para más información vea Angular's template syntax
 Metadata
Identifica a la
clase como
una clase
• Metadata, le dice a Angular como procesar una clase.
componente
 Metadata Establece el origin
de la dirección base
(module.id) para
URLs relativos al
• Metadata, le dice a Angular como procesar
módulouna clase.
como el
templateUrl.
 Metadata El selector CSS le
dice a Angular
donde crear e
insertar una
• Metadata, le dice a Angular como procesar una
instancia de clase.
este
componente.
 Metadata
Dirección relativa al
módulo de este
componente
• Metadata, le dice a Angular como procesar una clase.
 Metadata Array de servicios
que el componente
requiere. Estos
serán provistos
usando inyección de
dependencias.
• Metadata, le dice a Angular como procesar una clase.
La metadata en el @Component le
dice a Angular donde obtener los
bloques de construcción que necesitas
para el componente.
El template, metadata y componente,
juntos describen una vista.
Otros populares decoradores son:
@Injectable, @Input y @Output
Data binding
Angular soporta data binding.
Un mecanismo para coordinar partes
de un template con partes de un
componente.

Hay cuatro formas de data binding:

Hacia el DOM, desde el DOM, o en ambas
direcciones.
 app/hero-list.component.html

• El {{hero.name}} interpolation muestra la propiedad del componente hero.name al

• El [hero] property binding pasa el valor de selectedHero desde el padre HeroListCo
• El (click) event binding llama al método selectHero del componente
cuando el usuario hace clic en el nombre de un héroe.
two-way data binding
 Data binding juega un rol importante
en la comunicación entre un template
y su componente.

Data binding es también importante para

la comunicación entre componentes
padre e hijos.
 Servicios
Es una clase con un propósito
definido que le da a tu aplicación
una característica que necesita.

Este debería hacer algo especifico

y hacerlo bien.

Tus componentes son consumidores

de servicios.
Ejemplos:
• Servicio Logging • Servicio Datos • Bus de Mensajes
• Calculadora de Impuestos
• Configuración de la aplicación.
app/logger.service.ts
app/hero.service.ts
Servicios por todas partes
• Nuestros componentes deben ser lean. Ellos no
deberían traer datos del servidor, validar entrada de
usuario o loquear directo a la consola. Ellos
deberían delegar dichas tareas a nuestros servicios

• El trabajo de un componente es facilitar la

experiencia de usuario y nada mas. Es un mediador
entre la vista (renderiza por un template) y la lógica
de la aplicación. Un buen componente tiene
propiedades y métodos para data binding. Este
delega lo no trivial a los servicios.
Inyección de Dependencias

app/hero-list.component.ts
app/app.module.ts

Otra alternativa:
 Inyección de dependencias
• Registrarlo a nivel del componente significa que tu
obtienes una nueva instancia del servicio con cada
nueva instancia de ese componente.

• El Injector el mecanismo principal. El tiene un

contenedor de instancias de servicios. El injector puede
crear una nueva instancia de servicio desde un
provider.

• Un provider es una receta para crear un servicio.

• Registra tus providers con injectors.

 Otros temas por revisar
• Animations

• Change detection

• Events

• Forms

• HTTP

• Lifecycle hooks

• Pipes

• Router

• Testing
 Recomendaciones
• Revisar Template Syntax

• Seguir esta guía de programación

• Angular-CLI

• IDE WebStorm o Visual Studio Code de los mejores

• Puedes comenzar con un web starter para angular 2

• En Internet hay muy buenos componentes libres, pero,

te recomiendo ver Kendo para Angular 2.
 Recomendaciones

• Usar Angular Material o comprar un template como

SmartAdmin
 Demos

• https://github.com/auth0-blog/angular2-tour-of-
heroes que incluye seguridad con Web Tokens