SPA en Angular

Aquest és un tutorial per a fer una Single Page Application en Angular. No explica en detall la teoria d'Angular.

Les SPA són pàgines web que, una vegada carregades, no es refresquen ni es carreguen completament més. Utilitza rutes en la URI del navegador, però aquestes no són enviades d'aquesta manera al servidor, ja que és el client web, en Javascript, qui demana fitxers en JSON o XML i modifica el contingut de la web. Aquestes pàgines presenten alguns avantatges i alguns inconvenients com el SEO o la necessitat de Javascript per a funcionar. Anirem veient en més detall el que significa al fer-la.

Instal·lació

Anem a instal·lar l'entorn de desenvolupament per a Angular. Algunes coses cal explicar-les i altres ja les pots instal·lar com vulgues. També suposarem que tenim Ubuntu escriptori per a desenvolupar i Ubuntu server en cas d'enviar a producció. Per a moltes coses hi ha varies opcions, però per simplificar vaig a mencionar quasi sempre sols una.

• node: Per a fer anar les ferramentes de terminal d'angular i altres coses, és necessari instal·lar node. En ubuntu:

sudo apt install nodejs

• npm: El gestor de paquets npm també és necessari:

sudo apt install npm

• Typescript: Angular funciona en Typescript. L'instal·larem de manera global (-g) per a que funcione en tots els projectes:

sudo npm install -g typescript

• Angular CLI https://cli.angular.io/ Les ferramentes de terminal d'Angular són necessàries per a treballar més còmodament.

sudo npm install -g @angular/cli

• Editor de text: Visual Studio Code. Es recomana descarregar el .deb de la web oficial.
  • Extensions:
  • Angular 2 TypeScript Emmet: Permet en zen-coding. Això vol dir que autocompleta codi amb unes instruccions determinades i adaptar en aquest cas a Angular.
  • Angular v5 Snippets: Fragments útils de codi ja predefinit que es poden reutilitzar en el projecte.
  • Angular Language Service: Serveix per a crear més fàcilment les plantilles d'Angular.
  • Material icon Theme: Modifica les icones per a trobar més fàcilment els fitxers.
  • Terminal: Encara que es pot utilitzar la terminal d'Ubuntu, aquesta està en la mateixa finestra i és còmoda.

Creació del projecte

En una terminal, naveguem fins al directori del projecte i executem

ng new tenda

El nom del l'aplicació és tenda

Això ha generat molts fitxers i directoris que anirem descrivint quan els necessitem.

Si volem veure el que ha passat, podem llançar ja el servidor amb

ng serve -o

En aquest comandament observem el que estem indicant: ng és el comandament del Angular/CLI. Com hem vist, serveix tant per a llançar una nova aplicació com per a iniciar el servidor. Amb serve li diguem que cree un servidor web per a aquest directori i en -o per a que òbriga el navegador web en el port obert pel servidor.

Instal·lar Bootstrap

Podem copiar el CDN, instal·lar amb npm o descarregar i descomprimir el directori. Anem a instal·lar-lo de forma local amb npm per a que estiga integrat en el projecte.

npm install bootstrap --save

Utilitzem --save per a que clave la dependència en el packaje.json L'instal·lació ens demana instal·lar jQuery i Popper.js, ho fem:

npm install jquery --save
npm install @popperjs/core --save

Cal modificar aquestes línies en angular.json:

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [ "node_modules/jquery/dist/jquery.min.js",
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"]

Creació del navbar

Per anar organitzant bé el projecte a l'inici, anem a crear una estructura de directoris. El navbar serà un component compartit per totes les pàgines del projecte. Per això, podem fer un directori components en app i dins un anomenat shared.

cd tenda
mkdir -p src/app/components/shared

Açò no és precís, però sempre podrem trobar millor els components si tenim el codi organitzat.

Ara sí, anem a crear el component navbar:

ng g c components/shared/navbar

Aquest comandament utilitza abreviatures per dir que volem crear un nou component i el directori on es crearà dins del directori 'app.

Dins del directori aquest, el comandament ng ha creat alguns fitxers de .ts, .css i .html. El que ens interessa ara és ficar una plantilla html amb una barra de navegació de manera que es puga afegir a la web. Sols en interessa el html i el ts, ja que no anem a fer tests ni estils propis del component. Si volem, podem inclús esborrar els fitxers que no interessen.

Una altra cosa que ha passat és que en el fitxer app.module.ts que representa al mòdul principal de l'aplicació, s'ha afegir un import del navbar. Amés, s'ha afegit a declarations del decorador de la classe. D'aquesta manera, Angular ja sap que existeix aquest component i es pot utilitzar per tota l'aplicació.