En aquest tema, 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.
• Entendre l'estructura bàsica d'un projecte Angular.

• Coneixements bàsics de JavaScript i TypeScript.
• Entorn de desenvolupament configurat (veure el tema anterior).

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

Instal·lació de Node.js i npm

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

Instal·lació d'Angular CLI

Un cop tinguis Node.js i npm instal·lats, obre una terminal i executa la següent comanda per instal·lar Angular CLI globalment:

Amb Angular CLI instal·lat, pots crear un nou projecte Angular amb la següent comanda:

Aquesta comanda et demanarà algunes opcions de configuració:

• Nom del projecte: my-first-angular-app
• Incloure Angular routing?: Yes
• Estil de fulls d'estil: CSS (pots triar entre CSS, SCSS, SASS, LESS, etc.)

Angular CLI crearà una nova carpeta amb el nom del projecte i generarà l'estructura bàsica del projecte.

Un cop creat el projecte, navega a la carpeta del projecte:

I executa la següent comanda per iniciar el servidor de desenvolupament:

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

Obre el teu navegador i visita http://localhost:4200/. Hauries de veure la pàgina d'inici per defecte d'Angular.

Un projecte Angular té una estructura específica. A continuació, es mostren les carpetes i fitxers més importants:

• e2e/: Conté les proves de punta a punta.
• node_modules/: Conté les dependències del projecte.
• 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é fitxers de configuració per a diferents entorns (producció, desenvolupament, etc.).
  • index.html: Pàgina HTML principal.
  • main.ts: Punt d'entrada principal de l'aplicació.
  • styles.css: Full d'estil global.
• angular.json: Fitxer de configuració del projecte Angular.
• package.json: Fitxer de configuració de npm que conté les dependències del projecte.

Per personalitzar la pàgina d'inici, obre el fitxer src/app/app.component.html i modifica el contingut:

Desa els canvis i actualitza la pàgina al navegador. Hauries de veure el nou contingut.

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

1. Instal·la Angular CLI si encara no ho has fet.
2. Crea un nou projecte Angular anomenat my-first-angular-app.
3. Inicia el servidor de desenvolupament i verifica que l'aplicació es carrega correctament.
4. Modifica el fitxer src/app/app.component.html per personalitzar la pàgina d'inici.

1. Instal·la Angular CLI:

2. Crea un nou projecte:

3. Navega a la carpeta del projecte i inicia el servidor de desenvolupament:

4. Modifica src/app/app.component.html:

En aquest tema, hem après a crear la nostra primera aplicació Angular, a executar-la en un servidor de desenvolupament local i a entendre l'estructura bàsica d'un projecte Angular. Aquests coneixements són fonamentals per continuar amb els següents temes del curs.