El ABC con Angular

Esto es un howto o codekata para empezar un proyecto nuevo en minutos con Angular: qué necesitamos configurar en local, cómo usar el Angular CLI, principales comandos y comenzamos a generar una primera estructura de aplicación frontend totalmente desacomplada del backend.

Vamos al grano..

Qué es

Angular es un framework de desarrollo frontend, que mediante JavaScript, HTML y CSS, ayuda a desarrollar aplicaciones frontend. Es decir, son un conjunto de herramientas de desarrollo que agilizan y ayudan a organizar proyectos generalmente grandes, de forma que estos proyectos estén bien estructurados para que sean mantenibles durante largo tiempo.

La documentación oficial está muy bien:
https://angular.io/guide/what-is-angular

Cómo es

La base de angular es el puro JavaScript usando TypeScript. Todo se organiza a base de componentes, que tienen partes en TypeScript, HTML y CSS. La parte CSS se puede crear usando LESS o SASS para agilizar el desarrollo de estilos. Con respecto al TypeScript tenemos disponibles todos los paquetes de NPM, con lo que la ayuda es ingente para cualquier proyecto.

Si vemos la ayuda del generador de código base, podemos hacernos una idea de los tipos de estructuras que nos permite:

Requerimientos

Sólo necesitamos NodeJS, NPM y el Angular CLI:

• https://nodejs.org/es/ es el runtime de JavaScript que hace correr los programas escritos en este lenguaje.
• https://www.npmjs.com/ es el gestor de dependencias para JavaScript, es lo mismo que Composer para PHP, Maven para Java, o el Pip para Python.. que nos ayudará a instalarnos lo que necesitemos.
• Por último el Angular CLI es un comando con muchas ayudas.

Para las dos primeras herramientas no hay más que seguir las instrucciones de la web para tu sistema operativo. Para instalar el Angular CLI de forma global en todo el sistema, podemos lanzar lo siguiente como administrador:

npm install -g @angular/cli --force

Creando un proyecto nuevo

Lo siguiente es usar el Angular CLI para generar un proyecto nuevo, igual que por ejemplo con el Symfony CLI, o el comando de Maven para generar proyectos desde cero:

ng new testing-angular

..nos hará algunas preguntas, y si todo ha ido bien tendremos un esqueleto de proyecto nuevo bajo el directorio testing-angular/ como el siguiente:

Generando códigos fuentes para toda la estructura del proyecto

Siguiendo con el Angular CLI, así podemos ver todos los comandos disponibles:

ng help

Es interesante lanzar este comando para ver todos los generadores de código disponibles antes de seguir:

cd testing-angular/
ng generate help

Ahora viene la parte de arquitecturar el proyecto. Si tenemos claro todo lo que vamos a necesitar, ya podemos ir al grano generando todo tipo de esqueletos de código para los componentes, interfaces, clases, servicios, etc..

Por ejemplo, para una web con cabecera, footer, página inicial, 3 tipos de secciones, un servicio de contenidos para obtenerlos desde donde queramos, una interfaz que defina el contrato de contenidos, los 3 tipos de entidades que definan los 3 tipos de contenidos.. podríamos hacer algo así:

ng generate component component/header
ng generate component component/home
ng generate component component/section1
ng generate component component/section2
ng generate component component/section3
ng generate component component/footer
ng generate service service/contentsService
ng generate interface entity/content
ng generate class entity/contentType1
ng generate class entity/contentType2
ng generate class entity/contentType3

Qué tendremos hasta ahora generado

Ya con lo anterior resulta que en unos minutos ya tenemos generado todo un proyecto esqueleto con algo como lo siguiente:

También podemos arrancarlo con el comando siguiente:

ng serve

..y podremos ir al navegador a la dirección http://localhost:4200/ para ponernos a programar todo:

Terminando y referencias

Creo que lo siguiente más interesante para seguir después de un ABC en Angular, puede ser el generar la navegación, encajar los componentes en su estructura, así como crear las rutas para que todo funcione. Cada aplicación web es un munto, así que para terminar no me queda más que remitirte a la documentación oficial de Angular que está muy bien:
https://angular.io/guide/router