Introducción a Angular 6
0 recomendaciones244 vistas
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.
![DataBinding
• Interpolación
{{todo.subject}}
• Property binding
[todo]="selectedTodo"
• Event binding
(click)="selectTodo(todo)"
• Two-way binding
<input [(ngModel)]="todo.subject">](https://image.slidesharecdn.com/angular-180618150743/85/Introduccion-a-Angular-6-18-320.jpg)
![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.](https://image.slidesharecdn.com/angular-180618150743/85/Introduccion-a-Angular-6-23-320.jpg)
Introducción a Angular 6
- 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
- 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