Joan: /* Resum del curs */

2020-04-24T10:14:39Z

Resum del curs

Pàgina nova

__TOC__
=Referències=
*https://openwebinars.net/academia/aprende/angular-4/
=Resum del curs=
Tots els fitxers del projecte estan al github:
*https://github.com/nhpatt/agenda
<pre>
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
</pre>

=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:
<pre>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'app works!';
}
</pre>
'''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:
<pre>
<h1>
{{title}}
</h1>
</pre>
'''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'':
<pre>
({{variable}})
</pre>
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'':
<pre>
<h1 *ngFor="let charla of charlas">
{{charla.titulo}}
</h1>
</pre>

'''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:
<pre>
$ sudo npm install -g @angular/cli
</pre>
*Crear un proyecto nuevo con
<pre>
$ ng new nombre
</pre>
*Y para lanzarlo tendremos que entrar en el directorio y ejecutar:
<pre>
$ ng serve -o
</pre>

==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.

{{Autor}}, març 2019

I. Angular 4 Openwebinars - Historial de revisió

Joan: /* Resum del curs */