El documento presenta una introducción a Angular, incluyendo qué es Angular, sus principales características y elementos, cómo crear una primera aplicación en Angular, y novedades recientes en Angular 6. El orador también discute conceptos clave como módulos, componentes, templates, datos binding, directivas, servicios e inyección de dependencias.

1. Disertante: Ing. Rocco, Sebastián
Mail: srocco@movizen.com
Web: ww.movizen.com
Blog: www.smrocco.com
Introducción a Angular

2. Agenda
• ¿Qué es?
• ¿Qué ofrece?
• Pre-requisitos
• Elementos Principales
• Demo
• Migrando a Angular 6
• Novedades Angular 6

3. ¿Qué es?
• Framework Javascript, gratuito y Open Source,
creado por Google.
• Objetivo: Facilitar la creación de aplicaciones web
modernas de tipo SPA.
• Primera versión: AngularJS.
• En septiembre de 2016 Google lanzó la versión
definitiva de lo que llamó en su momento Angular
2, y que ahora es simplemente Angular.

4. ¿Por qué Angular?
• Es un framework, no una librería.
– No se requieren otras bibliotecas.
– Lineamientos claros.
• TypeScript.
• Gran soporte de herramientas.
• Pensado para móviles

5. Pre-Requisitos
• Web: HTML + CSS + JS
• Visual Studio Code (u otro IDE)
• Node.js & npm
• Angular CLI
npm install @angular/cli -g
• Otros:
– TypeScript
– Rxjs: Reactive Extensions Library for JavaScript

6. Creando la primera App…
• Básico:
ng new MyApp
• Con SASS y Routing
ng new MyApp --style=scss –routing
• Iniciar el servidor:
ng serve
• Iniciar el servidor y abrir la app:
ng serve --open

7. TypeScript

8. ¿Qué es TypeScript?
• Superset de ECMAScript 6
– Incluye todas las funcionalidades de ES6 +
funcionalidades extra.
• Se transpilan a ES5.
• Ventajas sobre ES6
– Variables tipadas.
– Miembros públicos/privados.
– Decorators: Se pueden utilizar antes de declarar una
clase, propiedad, método o parámetro. Sintaxis:
@myDecorator(args)

9. ¿Por qué usar TypeScript?
• Detección temprana de errores en fase de
compilación.
• Simplificación de código con Decoradores.
• Simplificación de la Inyección de Dependencias.

10. DEMO

11. Elementos Principales (I)

12. Elementos Principales (II)
• Módulos
• Componentes
• Templates
• Metadatos
• Data Binding
• Directivas
• Servicios
• Dependency Injection

13. Módulos (I)
• Las apps de Angular son modulares, gracias a su
propio sistema de módulos llamado Angular
Modules ( o NgModules).
• Un módulo de Angular, es un conjunto de código
dedicado a un ámbito concreto de la aplicación, o
una funcionalidad específica y se define mediante
una clase decorada con @NgModule.
• Importante: No confundir con módulos de ES6,
utilizados para gestionar librerías de JS.

14. Módulos (II)
• Declarations: Las vistas del módulo. Hay 3 tipos:
– Componentes
– Directivas
– Pipes.
• Exports: Conjunto de declaraciones que deben ser accesibles
para templates de componentes de otros módulos.
• Imports: Otros NgModules, cuyas clases exportadas son
requeridas por templates de componentes de este módulo.
• Providers: Servicios que necesita este módulo.
• Bootstrap: Define la vista raíz. Utilizado solo por el root
module.

15. Componente
• Controla una zona de espacio de la pantalla que
podríamos denominar vista.
• Un componente es una clase estándar de ES6 decorada
con @Component.
• Idem Controladores en AngularJS.
• Importante considerar SOLID y encapsular lógica de
negocio Servicios. Solo debería gestionar la Vista.
• Atributos de entrada y salida: @Input() y @Output().

16. Template
• Permite definir la vista de un Componente.
• Es HTML, pero decorado con otros componentes y
algunas directivas.

17. Metadatos
• Se agregan mediante el patrón decorador.
• Annotations: Nivel de clase.
• Parameters: Nivel de constructor.
• Ejemplos:
– @NgModule
– @Component

18. DataBinding
• Interpolación
{{todo.subject}}
• Property binding
[todo]="selectedTodo"
• Event binding
(click)="selectTodo(todo)"
• Two-way binding
<input [(ngModel)]="todo.subject">

19. DataBinding

20. Directivas
• Es una clase que utiliza el decorador @Directive.
• Un Componente es un caso concreto de directiva.
– @Component es un decorador @Directive extendido
con características propias de los templates.
• Tipos:
– Estructurales: comienzan por asterisco y sirven
para alterar el DOM. Ej: *ngIf; *ngFor
– Atributo: alteran la apariencia o comportamiento de un
elemento del DOM. Ej: ngModel; ngClass; ngStyle

21. Servicio
• Todo valor, función o característica que nuestra
aplicación necesita.
• Desde constantes a lógica de negocio, se debería
encapsular dentro de un servicio.
• A diferencia de AngularJS, en Angular los servicios no
tienen una sintaxis específica, son simples Clases.
• @Injectable: Este decorador avisa a Angular de que el
servicio espera utilizar otros servicios.

22. Dependency Injection (I)
• Proporcionar nuevas instancias de una clase con todas
aquellas dependencias que requiere plenamente formadas.
• @Injectable: Este decorador avisa a Angular de que el
servicio espera utilizar otros servicios.
• Injector:
– 1ero: El inyector lo instancia y lo guarda en un
contenedor.
– 2do: El inyector busca en su contenedor para ver si ya
existe una instancia.
• Provider: Cualquier cosa que puede crear o devolver un
servicio.

23. Dependency Injection (II)
• Por defecto:
providers: [Logger]
• Provider Object Literal
providers: [{ provide:Logger,
useClass: Logger}]
• Donde:
– Provide: Token que sirve como clave para identificar
la DI y registrar el provider.
– UseClass: Provider en sí mismo.

24. Dependency Injection (III)
• Dependencias opcionales:

25. Migrando a Angular 6
• Actualizar Angular globalmente
npm install -g @angular/cli
• Para cada proyecto:
ng update @angular/cli
ng update @angular/core
• Si se está usando angular material:
ng update @angular/material
• RxJS 6: Breaking Changes
npm i rxjs-compat

26. Novedades Angular 6
• General
– Sincronización de versiones.
• Angular 6
– Webpack 4: module bundler.
– Bazel (?): Optimiza la compilación…
– RxJS 6.
– Ivy (?): Cambio en el renderizado de las vistas..
– Elements

27. Novedades Angular 6
• CLI 6 (antes 1.7)
– angular.json (.angular-cli.json): workspaces!
– ng add
– ng update
– schematics
• Material 6
– Angular Material Starter Components
– Tree Component

28. ¿Preguntas?

29. Muchas Gracias!

30. Datos de Contacto
Disertante: Ing. Rocco, Sebastián
Mail: srocco@movizen.com
Web: ww.movizen.com
Blog: www.smrocco.com