I. Angular 4 Openwebinars
Contingut
Referències
Resum del curs
Tots els fitxers del projecte estan al github:
Introducción Introducción al curso y a Angular Arquitectura de una aplicación en Angular Instalación y primer proyecto Estructura de un proyecto en Angular TypeScript TypeScript parte I TypeScript parte II TypeScript parte III TypeScript IV Angular Interpolación y property data binding Event binding Directivas Comunicación entre componentes: Inputs y Outputs Pipes Servicios Inyección de dependencias HTTP Reactive-Extensions (RX) RxJS RxJS básico Usando Rx Operadores de Rx habituales Rx Avanzado Async pipe Avanzado Template forms Model Driven forms Validación y Observables en Forms Módulos Módulos avanzados Transclusión y creación de componentes dinámica Routing simple Routing con parámetros Guards Lazy loadings y routing avanzado Diferencias entre Angular 2 y Angular 4 Estilos Debug Buenas prácticas de desarrollo en Angular Recomendaciones de rendimiento Conclusiones y referencias
Introducción
Introducción al curso y a Angular
¿Por qué Angular?
La razón principal es permitir estructurar nuestros proyectos, seguir una arquitectura ya establecida.
Los frameworks o arquitecturas no son buenas o malas de por sí, nos quitan flexibilidad a la hora de programar pero también nos guían en cómo implementar una nueva funcionalidad (son como raíles que nos dificultan crear malas arquitecturas).
Por eso angular tiene sentido dependiendo del tipo de proyecto. Un proyecto Javascript pequeño no se aprovechará de tantas mejoras cómo uno grande, en la que la estructura de carpetas, componentes y la separación de conceptos tendrán más sentido.
La arquitectura de angular se reescribió completamente en la versión 2, fruto de la experiencia con angular 1, miles de proyectos en producción y muchos ingenieros de Google. Por lo que nos asegura que será una arquitectura adecuada para proyectos grandes, mantenible y estructurada.
Además de esa gran ventaja en proyectos grandes, angular nos simplifica la creación de funcionalidades o bien aplicando patrones (como un componente) o bien incluyendo librerías para hacer peticiones http, gestionar asincronía...
Nota: Angular 1 ahora se llama angularJS por lo que siempre que hablemos de angular nos referiremos a Angular 2 o Angular 4.
Orientado a componentes
Angular es un framework orientado a componentes, como otros frameworks populares actualmente (React, Vue...).
La idea principal es estructurar nuestra página como una composición de componentes que se comunican entre sí, en vez de un gran fichero javascript alojando todo.
Y esos componentes podremos reusarlos en nuestra aplicación u en otras.
Arquitectura de una aplicación en Angular
Conceptos principales
Componentes: Básicamente una clase javascript (ES2015), con una anotación (decorador es la palabra teórica) y su objetivo es soportar un template, ser la clase que interacciona con el código html. Este es el código de un componente simple:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'app works!';
}
Template/vista: Código html (con tags estándar) con atributos y etiquetas específicas de angular. Será la forma de vincular componentes entre sí, definiendo un selector (normalmente una etiqueta html como div) y usando ese selector en nuestro template. Este es el código del template más sencillo:
<h1>
{{title}}
</h1>
Databinding: En vez de usar jQuery o el DOM directamente para cambiar la visibilidad o el valor de un elemento usaremos databinding. Con el databinding conseguiremos cambiar el valor de nuestro template de forma dinámica sin tener que manipular el DOM. Es un pequeño lenguaje dentro del html, con múltiples sintaxis dependiendo del tipo pero la más sencilla es el estilo moustache:
({{variable}})
Angular se encargará de mostrar el valor actualizado.
Más adelante lo veréis más claro con los ejemplos pero podemos verlo de forma sencilla con un setTimeout/setInterval. En el momento en el que cambiamos nuestro valor en nuestro componente typescript aparece en el template sin que tengamos que indicar nada.
Directivas: Componentes ya definidos por Angular que usamos en nuestros templates, básicamente dos útiles: ngFor para iterar sobre una lista y renderizar varios elementos; y ngIf para renderizar algo o no dependiendo de una condición.
Metadata: Los atributos que usamos dentro de la anotación del componente. Es la configuración del componente y nos permite indicar dónde está la ruta de nuestro template, definir un template inline (templateUrl), el selector para usar el componente... Ésta es la apariencia de un uso de una directiva ngFor:
<h1 *ngFor="let charla of charlas">
{{charla.titulo}}
</h1>
Servicios: Una clase javascript (de ES2015) que contendrán nuestra lógica de negocio. En vez de definirlo en el componente, encapsularemos la lógica en estas clases que usaremos en los componentes.
Inyección de dependencias: Una aplicación de un patrón (Inversión de control) con la idea de desacoplar la creación de componentes del uso de los mismos.
Módulos: Una forma de organizar nuestra aplicación Angular. En vez de tener muchos componentes comunicándose entre sí, haremos pequeñas agrupaciones de componentes relacionados (por negocio, caso de uso) y tendremos componentes privados y públicos.
Y más cosas: Angular incluye librerías para hacer formularios de forma sencilla, hacer llamadas http o animaciones. Son partes importantes de angular o librerías habitualmente usadas pero no forman parte del core de angular.
Instalación y primer proyecto
Pasos a seguir para instalar e iniciar nuestro proyecto
- Instalar node.js
- Instalar, a través de npm, angular cli:
$ sudo npm install -g @angular/cli
- Crear un proyecto nuevo con
$ ng new nombre
- Y para lanzarlo tendremos que entrar en el directorio y ejecutar:
$ ng serve -o
Estructura de un proyecto en Angular
- src/app donde alojaremos nuestros componentes (nombre.component.ts), templates (_nombre.component.html), módulos…
- package.json: donde especificaremos nuestras dependencias y librerías (es de npm).
- tsconfig.json con la configuración por defecto de typescript
- angular.cli.json es el fichero de configuración de Angular CLI, la consola de creación rápida de aplicaciones.
creat per Joan Quintana Compte, març 2019
