Curso de introducción a Angular: conceptos básicos para entender las bases de angular.

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

23. Chuleta
Resumen conceptos
https://angular.io/guide/cheatsheet
Documentación
https://angular.io/docs

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, …