El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

L'Angular CLI (Command Line Interface) és una eina poderosa que facilita la creació, desenvolupament, manteniment i desplegament d'aplicacions Angular. Proporciona una sèrie de comandes que ajuden a automatitzar tasques comunes, com ara la creació de components, serveis, mòduls, la compilació de l'aplicació i molt més.

Instal·lació de l'Angular CLI

Abans de començar a utilitzar l'Angular CLI, necessitem instal·lar-lo. Assegura't de tenir Node.js i npm instal·lats al teu sistema.

npm install -g @angular/cli

Creació d'una nova aplicació Angular

Un cop instal·lat l'Angular CLI, podem crear una nova aplicació Angular amb la següent comanda:

ng new nom-de-la-teva-aplicacio

Aquesta comanda crearà una nova carpeta amb el nom especificat i generarà l'estructura bàsica de l'aplicació Angular.

Estructura del projecte

Després de crear una nova aplicació, l'estructura del projecte serà similar a la següent:

nom-de-la-teva-aplicacio/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── .editorconfig
├── .gitignore
├── angular.json
├── package.json
├── README.md
└── tsconfig.json

Comandes bàsiques de l'Angular CLI

Serve

Per iniciar el servidor de desenvolupament i veure la teva aplicació en el navegador:

ng serve

Per defecte, l'aplicació estarà disponible a http://localhost:4200/.

Generar components, serveis, mòduls, etc.

L'Angular CLI permet generar diversos artefactes de l'aplicació amb comandes senzilles. Per exemple, per generar un nou component:

ng generate component nom-del-component

Altres exemples inclouen:

ng generate service nom-del-servei
ng generate module nom-del-modul
ng generate directive nom-de-la-directiva
ng generate pipe nom-del-pipe

Compilar l'aplicació

Per compilar l'aplicació per a producció:

ng build --prod

Aquesta comanda generarà els fitxers optimitzats a la carpeta dist/.

Executar proves

Per executar les proves unitàries:

ng test

Per executar les proves de punta a punta:

ng e2e

Configuració de l'Angular CLI

L'Angular CLI es pot configurar mitjançant el fitxer angular.json. Aquest fitxer conté configuracions per a la compilació, el servidor de desenvolupament, les proves, etc.

Exemple de configuració

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "nom-de-la-teva-aplicacio": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/nom-de-la-teva-aplicacio",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        ...
      }
    }
  }
}

Exercicis pràctics

Exercici 1: Crear una nova aplicació Angular

Utilitza l'Angular CLI per crear una nova aplicació Angular anomenada exemple-app.
Inicia el servidor de desenvolupament i verifica que l'aplicació es carrega correctament al navegador.

Solució

ng new exemple-app
cd exemple-app
ng serve

Exercici 2: Generar un component

Dins de l'aplicació exemple-app, genera un nou component anomenat hello-world.
Modifica el component per mostrar el text "Hello, World!".
Afegeix el component al fitxer app.component.html.

Solució

ng generate component hello-world

Modifica hello-world.component.html:

<p>Hello, World!</p>

Afegeix el component a app.component.html:

<app-hello-world></app-hello-world>

Conclusió

L'Angular CLI és una eina essencial per a qualsevol desenvolupador Angular. Facilita la creació i gestió de projectes Angular, permetent-te centrar-te en el desenvolupament de la teva aplicació sense preocupar-te per la configuració i les tasques repetitives. Amb les comandes i configuracions adequades, pots optimitzar el teu flux de treball i assegurar-te que la teva aplicació estigui ben estructurada i sigui fàcil de mantenir.

Angular CLI

Introducció

Instal·lació de l'Angular CLI

Creació d'una nova aplicació Angular

Estructura del projecte

Comandes bàsiques de l'Angular CLI

Serve

Generar components, serveis, mòduls, etc.

Compilar l'aplicació

Executar proves

Configuració de l'Angular CLI

Exemple de configuració

Exercicis pràctics

Exercici 1: Crear una nova aplicació Angular

Solució

Exercici 2: Generar un component

Solució

Conclusió

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques