En aquest tema, aprendrem a configurar l'entorn necessari per començar a desenvolupar aplicacions amb Angular. Aquest procés inclou la instal·lació de Node.js, Angular CLI i la creació d'un projecte Angular bàsic.

Abans de començar, assegura't de tenir els següents requisits:

• Un ordinador amb un sistema operatiu compatible (Windows, macOS o Linux).
• Connexió a Internet per descarregar les eines necessàries.

Angular requereix Node.js i npm (Node Package Manager) per gestionar les dependències del projecte. Segueix aquests passos per instal·lar-los:

1. Visita la pàgina oficial de Node.js: Node.js
2. Descarrega la versió recomanada per a la teva plataforma (Windows, macOS o Linux).
3. Executa l'instal·lador i segueix les instruccions per completar la instal·lació.

Per verificar que Node.js i npm s'han instal·lat correctament, obre una terminal o línia de comandes i executa les següents ordres:

Hauries de veure les versions instal·lades de Node.js i npm.

Angular CLI (Command Line Interface) és una eina que facilita la creació i gestió de projectes Angular. Per instal·lar Angular CLI, executa la següent comanda a la terminal:

Per verificar que Angular CLI s'ha instal·lat correctament, executa:

Ara que tenim Angular CLI instal·lat, podem crear un nou projecte Angular. Executa la següent comanda a la terminal:

Aquesta comanda et demanarà algunes opcions de configuració, com ara si vols incloure Angular Routing i quin estil de fulls d'estil vols utilitzar (CSS, SCSS, etc.). Selecciona les opcions que prefereixis.

Després de crear el projecte, navega al directori del projecte:

Per iniciar el servidor de desenvolupament i veure l'aplicació en acció, executa:

Aquesta comanda compilarà l'aplicació i la servirà a http://localhost:4200/. Obre un navegador web i visita aquesta URL per veure la teva aplicació Angular en funcionament.

Un cop creat el projecte, és important comprendre l'estructura dels fitxers i directoris. Aquí tens una breu descripció dels elements més importants:

• src/: Conté el codi font de l'aplicació.
  • app/: Conté els components, serveis i altres fitxers relacionats amb l'aplicació.
  • assets/: Conté recursos estàtics com imatges i fitxers.
  • environments/: Conté configuracions específiques per a diferents entorns (producció, desenvolupament, etc.).
• angular.json: Fitxer de configuració del projecte Angular.
• package.json: Fitxer de configuració de npm que conté les dependències del projecte.

1. Instal·la Node.js i npm seguint les instruccions anteriors.
2. Instal·la Angular CLI.
3. Crea un nou projecte Angular anomenat my-first-app.
4. Navega al directori del projecte i executa l'aplicació.
5. Obre un navegador web i visita http://localhost:4200/ per veure l'aplicació en funcionament.

En aquesta secció, hem après a configurar l'entorn de desenvolupament necessari per treballar amb Angular. Hem instal·lat Node.js, npm i Angular CLI, i hem creat i executat una aplicació Angular bàsica. Amb aquest entorn configurat, estem preparats per començar a explorar les capacitats d'Angular en els següents mòduls del curs.