Introducción a Angular 6

50 %
50 %
Information about Introducción a Angular 6

Published on June 18, 2018

Author: smrocco

Source: slideshare.net

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

Add a comment