I. Angular 4 Openwebinars

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Referències

Resum del curs

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

$ sudo npm install -g @angular/cli
$ ng new nombre
$ ng serve -o

Estructura de un proyecto en Angular


creat per Joan Quintana Compte, març 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines