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.