En aquesta secció, aprendrem a crear la nostra primera aplicació Angular des de zero. Aquest procés inclou la instal·lació de les eines necessàries, la creació d'un nou projecte Angular i l'execució de l'aplicació en un servidor de desenvolupament local.

• Instal·lar Angular CLI.
• Crear un nou projecte Angular.
• Executar l'aplicació en un servidor de desenvolupament local.
• Comprendre l'estructura bàsica d'un projecte Angular.

Angular CLI (Command Line Interface) és una eina que facilita la creació i gestió de projectes Angular. Per instal·lar Angular CLI, necessitem tenir Node.js i npm (Node Package Manager) instal·lats al nostre sistema.

1. Verificar la instal·lació de Node.js i npm:

   node -v
   npm -v
   

   Si no tens Node.js i npm instal·lats, pots descarregar-los des de nodejs.org.

2. Instal·lar Angular CLI globalment:

   npm install -g @angular/cli
   

Un cop tenim Angular CLI instal·lat, podem crear un nou projecte Angular utilitzant la comanda ng new.

1. Crear un nou projecte:

   ng new my-first-angular-app
   

   Durant aquest procés, Angular CLI ens farà algunes preguntes sobre la configuració del projecte, com ara si volem incloure Angular Routing i quin estil de fulls d'estil volem utilitzar (CSS, SCSS, etc.).

2. Navegar al directori del projecte:

   cd my-first-angular-app
   

Ara que tenim el nostre projecte creat, podem executar-lo en un servidor de desenvolupament local per veure'l en acció.

1. Executar el servidor de desenvolupament:

   ng serve
   

   Aquesta comanda compilarà l'aplicació i la servirà en un servidor de desenvolupament local. Per defecte, l'aplicació estarà disponible a http://localhost:4200/.

2. Obrir el navegador i accedir a l'aplicació: Navega a http://localhost:4200/ en el teu navegador preferit. Hauries de veure la pàgina d'inici per defecte d'Angular.

Un projecte Angular creat amb Angular CLI té una estructura específica. A continuació, es detallen alguns dels fitxers i directoris més importants:

• src/app/app.module.ts: Mòdul principal de l'aplicació.
• src/app/app.component.ts: Component principal de l'aplicació.
• src/index.html: Pàgina HTML principal on es carrega l'aplicació Angular.
• angular.json: Fitxer de configuració d'Angular CLI.
• package.json: Fitxer de configuració de npm que inclou les dependències del projecte.

Crear una nova aplicació Angular i personalitzar la pàgina d'inici.

1. Segueix els passos anteriors per crear una nova aplicació Angular.
2. Obre el fitxer src/app/app.component.html.
3. Modifica el contingut del fitxer per personalitzar la pàgina d'inici. Per exemple:

   <h1>Benvingut a la meva primera aplicació Angular!</h1>
   <p>Aquesta és una aplicació creada com a part del curs d'Angular.</p>
   

Després de seguir els passos anteriors, la teva pàgina d'inici hauria de mostrar el missatge personalitzat quan accedeixis a http://localhost:4200/.

En aquesta secció, hem après a crear la nostra primera aplicació Angular, executar-la en un servidor de desenvolupament local i comprendre l'estructura bàsica d'un projecte Angular. Aquestes habilitats són fonamentals per a qualsevol desenvolupador Angular i ens preparen per aprofundir en temes més avançats en els següents mòduls.