![Componentes – Template Sintanxis
• Interpolation: incrustrando expresiones en el html
<h2>Titulo {{ 10 + 5 }} </h2> <p> {{ name }} </p>
• Assignments, new variables, increment/decrement no soportado
• El uso más común es para pintar una variable definida en el component.ts
• Property: asignar valor a una propiedad del componente
• Syntax: [property ]=“expression”
<h2 [textContent]=“name”></h2>
• textContent es una propiedad nativa de html y name es una variable declarada en la
clase
• Events:
<button (click)="deleteHero()">Delete hero</button>
<button (click)="onSave($event)">Save</button>](https://image.slidesharecdn.com/angularfundamentals-200829104955/85/Angular-Fundamentals-15-320.jpg)
![Componentes – Binding syntax
Hay tres modos de enlazar datos al DOM
• One way
• Property Binding []
• String interpolation {{ }}
• Eventos ()
• Two-way [()]
• Ejemplos:
<li>{{hero.name}}</li>
<input [value]=“selectedHero”></ input l>
<li (click)=“selectedHero(hero)”></li>
<input [(ngModel)]=“hero.name”>](https://image.slidesharecdn.com/angularfundamentals-200829104955/85/Angular-Fundamentals-19-320.jpg)
![Directivas Atributo
Directivas Atributo:
Cambian la apariencia o comportamiento de un elemento. No crean o eliminan
elementos como las Directivas estructurales.
• [ngClass]: Permite establecer una o más clases a un elemento.](https://image.slidesharecdn.com/angularfundamentals-200829104955/85/Angular-Fundamentals-26-320.jpg)
![Directivas Atributo
• [ngStyle]: Permite establecer una o más propiedades css a un elemento.](https://image.slidesharecdn.com/angularfundamentals-200829104955/85/Angular-Fundamentals-27-320.jpg)
![Directivas Atributo - Custom
Podemos crear nuestras propias directivas de atributo
personalizadas y definir el algoritmo que se debe aplicar al
elemento HTML que se le asigna.
Comando: ng generate directive [nombre de la
directiva]
• HostBinding: asignar propiedades al element html
capturado
• HostListener: capturar eventos del elemento html.](https://image.slidesharecdn.com/angularfundamentals-200829104955/85/Angular-Fundamentals-28-320.jpg)
Angular Fundamentals
- 1. Angular Fundamentals Curso introducción a Angular. Juanjo Pérez
- 2. Prerrequisitos • Conocimientos básicos de HTML5, CSS3, JavaScript, Typescript • Herramientas: • NodeJS: https://nodejs.org/es/download/ (v12.14.1) Comprobar instalado: node –v • Angular cli (herramienta agilizar la creación de proyectos): npm install -g @angular/cli • Visual Studio Code https://code.visualstudio.com/ Plugins: • Angular Snippets (sugiere y autocompleta elementos de angular) • https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2 • Debugger for Chrome • Prettier -> Code formatter (indentado, espaciado) • TSLint -> Reglas de código (import orders, uso de comillas, tipado estricto, …)
- 3. TypeScript • Lenguaje basado en javascript tipado que se compila a javascript nativo. • Ventajas • Orientado a objetos (herencia, sobrecarga, interfaces, cast, etc…) • Tipado estático. • Estándar ES6 • Integrado en Angular. • File Extensión .ts • Documentación: https://www.typescriptlang.org/docs/home.html
- 4. Angular • Framework frontend de Google enfocado a desarrollar apps SPA basado en HTML y Typescript. • Documentación: https://angular.io/docs • Conceptos Fundamentales: • Módulos • Componentes • Directivas • Pipes • Services & Dependency Injection • HTTP • Routing • Más… Forms, Templates, Observables & RxJS, Styling, Angular Material…
- 5. SPA (Single Page Aplication) • Web en una sola página • Navegación entre secciones y páginas, la carga de datos se realiza de manera dinámica, asíncronamente haciendo llamadas al servidor sin actualizar la página en ningún momento. • Lograr mayor fluidez posible UX • Comunicación entre cliente y servidor se realiza de forma transparente al usuario.
- 6. Angular características • Cross Platform: PWA, hibryd apps, mobile, desktop • Data-Binding: • Vista y modelo en relación constante. • Evita que el desarrollador esté encargado de la sincronía entre modelo y vista. • Dependency Injection. • Unit testing: Jasmine, karma (file extension spec.ts). • Organización en carpetas por módulos y components. • Angular-cli • Navegación
- 7. Angular – Soporte y versiones • AngularJS (1.x) – Modelo MVC • Angular 2 – Componentes, directivas, template… • …. • Angular 7 • Angular 8 (node >= 12) • Angular 9
- 8. Arquitectura
- 9. Angular-cli • Herramienta de línea de comandos estándar para crear, depurar y publicar aplicaciones Angular. • Comandos más utilizados: • Crear proyecto: ng new • Lanzar Proyecto: ng serve (http://localhost:4200/#/) • Compilar: ng build (ng build -c production) • Crear componente: ng g componente nombre • Crear directive: ng g directive nombre • Crear pipe: ng g pipe nombre • Crear servicio: ng g service nombre • Crear módulo: ng g module nombre • Lanzar unit tests: ng test • En nuestras aplicaciones de BO antes de hacer una PR lanzamos en local: build en modo producción, lint y unit tests.
- 10. Módulos • Unidad lógica de organización del código • Puedes dividir tu aplicación en tantos módulos como necesites, agrupar por funcionalidades. • Definir los requisitos del módulo: imports, providers, declarations, exports… • El módulo principal (root) de una aplicación angular es: app.module.ts • Definiciones dentro del módulo: • Declarations: componentes, directivas y pipes que pertenecen a ese modulo. • Exports: declarations que queremos utilizar en otros módulos. • Imports: importar los declarations de otros módulos que utilizaremos en este módulo. • Providers: servicios que el modulo visibiliza a sus componentes. • Bootstrap: punto de entrada AppComponent, se define solo en el modulo principal (app.module.ts), dónde se declara el componente principal de la aplicación (app.component.ts)
- 11. Módulos – Ejemplo definición
- 12. Librerías • Se instalan con npm • Se importan con import • Para instalar todas las librerias del proyecto: npm install • Se gestionan en el fichero package.json • Dependencies vs DevDependencies La diferencia es que DevDependencies son librerías que solo se requieren durante el desarrollo. En cambio las Dependencies también son requeridas en el tiempo de ejecución.
- 13. Componentes • Los componentes son los principales pilares de una aplicación Angular. • Son clases que controlan el comportamiento, interacción del usuario (eventos) y renderizado HTML. • Puedes crear tantos componentes como necesites y reutilizarlos a lo largo de tu aplicación. • Cuanto más aislado y pequeño sea un componente, más fácil de reutilizar, testear y mantener. • Ficheros que forman parte de un componente: • .html -> Vista, renderizado HTML • .scss o .css -> estilos relativos exclusivamente a este componente. • .ts -> clase con sus funcionalidades del componente. • .spec.ts -> unit tests relativos al componente.
- 14. Componentes - Metadatos • Atributos que indican a Angular como procesar la clase: • selector: empieza siempre con “app-” (estándar lint), es el nombre que identifica al componente como tag: <app-sample></app-sample>. • Template (inline) o templateUrl: dónde se define la vista del componente HTML. • Styles (inline) o styleUrls: dónde se definen los estilos del componente.
- 15. Componentes – Template Sintanxis • Interpolation: incrustrando expresiones en el html <h2>Titulo {{ 10 + 5 }} </h2> <p> {{ name }} </p> • Assignments, new variables, increment/decrement no soportado • El uso más común es para pintar una variable definida en el component.ts • Property: asignar valor a una propiedad del componente • Syntax: [property ]=“expression” <h2 [textContent]=“name”></h2> • textContent es una propiedad nativa de html y name es una variable declarada en la clase • Events: <button (click)="deleteHero()">Delete hero</button> <button (click)="onSave($event)">Save</button>
- 16. Componentes – Parámetro @Input • Dentro de un componente podemos declarar propiedades de entrada que el componente recibirá como parámetro. • Componente: • Uso:
- 17. Componentes – Parámetro @Output • Dentro de un componente podemos declarar parámetros de salida de tipo evento que el componente transmitirá al componente padre que lo contiene.
- 18. Componentes – Parámetro @Output Ejemplo • Componente padre: • Componente hijo:
- 19. Componentes – Binding syntax Hay tres modos de enlazar datos al DOM • One way • Property Binding [] • String interpolation {{ }} • Eventos () • Two-way [()] • Ejemplos: <li>{{hero.name}}</li> <input [value]=“selectedHero”></ input l> <li (click)=“selectedHero(hero)”></li> <input [(ngModel)]=“hero.name”>
- 20. Componentes – Binding diagram
- 21. Componentes – Binding table
- 22. Componentes – Ciclo de vida Eventos que se disparan durante la inicialización y cierre de un componente. • ngOnChanges: Este evento se ejecuta cada vez que se cambia un valor de un input control dentro de un componente. • ngOnInit: Se ejecuta una vez que Angular ha desplegado los data-bound properties(variables vinculadas a datos) o cuando el componente ha sido inicializado. • ngDoCheck: Se activa cada vez que se verifican las propiedades de entrada de un componente. • ngAfterContentInit: Se ejecuta cuando Angular realiza cualquier muestra de contenido dentro de las vistas de componentes y justo después de ngDoCheck. • ngAfterContentChecked: Se ejecuta cada vez que el contenido del componente ha sido verificado por el mecanismo de detección de cambios de Angular. • ngAfterViewInit: Se ejecuta cuando la vista del componente se ha inicializado por completo. • ngAfterViewChecked: Se ejecuta después del método ngAfterViewInit y cada vez que la vista del componente verifique cambios. • ngOnDestroy: Este método se ejecutará justo antes de que Angular destruya los componentes. Es muy útil para darse de baja de los observables
- 24. Directiva Permiten añadir, manipular o eliminar elementos del DOM. Existen dos tipos de directivas: Estructurales y de atributo. Directivas Estructurales: Crean o eliminan elementos del DOM. • *ngIf: Permite mostrar / ocultar elementos del DOM. • *ngFor: Permite ejecutar bucles sobre elementos del DOM.
- 25. Directivas Estructurales • *ngSwitch: Permite ejecutar casos condicionales sobre elementos del DOM. Se pueden aplicar varias directivas de atributo a un elemento. Sin embargo solo es posible aplicar una directiva estructural a un elemento.
- 26. Directivas Atributo Directivas Atributo: Cambian la apariencia o comportamiento de un elemento. No crean o eliminan elementos como las Directivas estructurales. • [ngClass]: Permite establecer una o más clases a un elemento.
- 27. Directivas Atributo • [ngStyle]: Permite establecer una o más propiedades css a un elemento.
- 28. Directivas Atributo - Custom Podemos crear nuestras propias directivas de atributo personalizadas y definir el algoritmo que se debe aplicar al elemento HTML que se le asigna. Comando: ng generate directive [nombre de la directiva] • HostBinding: asignar propiedades al element html capturado • HostListener: capturar eventos del elemento html.
- 29. Directivas Atributo – Custom with Event
- 30. Pipes • Una tubería (pipe) permite formatear y filtrar datos en el template. • Utilizaremos pipe cuando necesitemos transformaciones fáciles y muy pequeñas. Muy útiles para las fechas y las currency. • Las pipes se pueden combinar en el mismo elemento. Ej: {{ birthday | date | uppercase}} • Listado de pipes nativos de Angular: https://angular.io/api?type=pipe • Puedes crear tus propios pipes customizadas.
- 31. Pipes - Custom Crear tu propia pipe es muy sencillo, sólo utilizando un decorador y los metadatos: name, pure. • pure pipe solo es llamado cuando Angular detecta un cambio en el valor. Por defecto. • impure pipe se llama en cada cambio que Angular detecta en el HTML, sin importar si el valor ha cambiado o no. * Recuerda agregar en “Declarations” de AppModule la pipe para que sea accessible en toda la aplicación. Al igual que para los componentes y directives.
- 32. Servicios • Encapsulan comportamiento: cálculos, comunicaciones (API).. lógica de negocio. • También pueden tener su fichero .spec.ts para unit testing. • Servicios de Angular: Http, Router, …
- 33. Inyección de dependencias • Angular soporta inyección de dependencias. • Resuelve como inyectar dependencias usando la configuración en los “providers”. • Se comporta como un Singleton (instancia única) a nivel de módulo o componente raíz. • Un servicio registrado en el Bootstrap estará disponible a lo largo de todo el árbol de componentes.
- 34. Inyección de dependencias - Ejemplo • Pasos: 1. Añadir a la clase el decorador @ Injectable 2. Añadir en el constructor de la clase dónde quieres inyectar el servicio 3. Añadir el servicio como “provider” en el módulo que se desee inyectar o como root (accesible para toda la app) desde el decorador del propio servicio. Si este servicio no es requerido en ningún constructor el compilador de Angular lo excluirá del build para optimizer el proceso.
- 35. Client HTTP • Angular nos ofrece un módulo para trabajar con las llamadas Http, para por ejemplo poder comunicarse con las APIs. • Para usarlo tenemos que: • Importar el módulo HttpClientModule desde app.module.ts • Importar las operaciones para Observables
- 36. Client HTTP - Ejemplo de uso en Servicio • Haciendo uso de observables: representa un objeto asíncrono que permite observar los eventos emitidos, en este caso por la petición get. • Con el resultado como Observable podremos suscribirnos a este método getMenus y se ejecutará cuando este listo.
- 37. Client HTTP – Ejemplos • Get con parámetros: (url, parámetros) • Post
- 38. Routing • ¿Cómo navegar entre páginas? Angular nos provee de un mecanismo (Router) para navegar dentro de la aplicación (SPA) reescribiendo la URL en el navegador. • En el archivo app.routing.ts se define una tabla de rutas a componentes para resolver que componente debe mostrarse al navegar a esa ruta: • Path: el nombre que le damos a la url • Component: el componente que cargará cuando naveguemos a esa url • Por defecto angular-cli ya realiza la configuración automáticamente (import modulo router, <router-outlet> en app.component.html…)
- 39. Routing - Reglas • El orden importa • No se pone ‘/’ al comienzo de la ruta • ‘’ = ruta por defecto • /**/ = cualquier otra ruta • Se permiten parámetros en la ruta • Si la aplicación esta compuesta por diversos módulos, cda modulo debe gestionar sus propias rutas como “sub-rutas”. La única diferencia con respecto al root
- 40. Gracias! Esto no acaba aquí… Forms, Templates, Observables & RxJS, Styling, Routing, Angular Material, …