El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Angular CLI

Següent ►
►

Introducció

L'Angular CLI (Command Line Interface) és una eina poderosa que facilita la creació, desenvolupament, prova i desplegament d'aplicacions Angular. Proporciona una sèrie de comandes que automatitzen tasques comunes, permetent als desenvolupadors centrar-se en l'escriptura de codi en lloc de la configuració de l'entorn.

Instal·lació de l'Angular CLI

Per instal·lar l'Angular CLI, necessites tenir Node.js i npm (Node Package Manager) instal·lats al teu sistema. Pots instal·lar l'Angular CLI globalment utilitzant la següent comanda:

npm install -g @angular/cli

Comandes bàsiques de l'Angular CLI

Crear una nova aplicació Angular

Per crear una nova aplicació Angular, utilitza la comanda ng new seguida del nom del projecte:

ng new nom-del-projecte

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

Servir l'aplicació

Per iniciar un servidor de desenvolupament i veure la teva aplicació en acció, utilitza la comanda ng serve:

cd nom-del-projecte
ng serve

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

Generar components, serveis i altres elements

L'Angular CLI permet generar components, serveis, mòduls i altres elements de manera ràpida i senzilla. Per exemple, per generar un nou component, utilitza la comanda ng generate component o la seva forma abreujada ng g c:

ng generate component nom-del-component

Altres exemples de generació inclouen:

  • Generar un servei: ng generate service nom-del-servei
  • Generar un mòdul: ng generate module nom-del-modul
  • Generar una directiva: ng generate directive nom-de-la-directiva

Construir l'aplicació per a producció

Per construir l'aplicació per a producció, utilitza la comanda ng build. Aquesta comanda crearà una carpeta dist/ amb els fitxers optimitzats per a desplegament:

ng build --prod

Executar proves

L'Angular CLI també facilita l'execució de proves unitàries i de cap a cap. Per executar proves unitàries, utilitza la comanda ng test:

ng test

Per executar proves de cap a cap, utilitza la comanda ng e2e:

ng e2e

Configuració de l'Angular CLI

L'Angular CLI permet personalitzar la configuració del projecte mitjançant el fitxer angular.json. Aquest fitxer conté informació sobre les configuracions de construcció, servidors, proves i altres opcions.

Exemple de fitxer angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "nom-del-projecte": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/nom-del-projecte",
            "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
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "nom-del-projecte:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "nom-del-projecte:build:production"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "nom-del-projecte:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "nom-del-projecte:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "nom-del-projecte"
}

Exercicis pràctics

Exercici 1: Crear una nova aplicació Angular

  1. Instal·la l'Angular CLI si encara no ho has fet.
  2. Crea una nova aplicació Angular anomenada exemple-app.
  3. Serveix l'aplicació i verifica que està funcionant correctament.

Solució

npm install -g @angular/cli
ng new exemple-app
cd exemple-app
ng serve

Exercici 2: Generar un component

  1. Dins de l'aplicació exemple-app, genera un nou component anomenat hola-món.
  2. Modifica el component per mostrar el text "Hola, món!".
  3. Serveix l'aplicació i verifica que el nou component es mostra correctament.

Solució

ng generate component hola-mon

Modifica el fitxer hola-mon.component.html per incloure el text:

<p>Hola, món!</p>

Afegeix el component al fitxer app.component.html:

<app-hola-mon></app-hola-mon>

Serveix l'aplicació:

ng serve

Conclusió

L'Angular CLI és una eina essencial per a qualsevol desenvolupador Angular, ja que simplifica moltes tasques comunes i permet centrar-se en el desenvolupament de l'aplicació. Amb les comandes bàsiques i la configuració adequada, pots crear, desenvolupar, provar i desplegar aplicacions Angular de manera eficient.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

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

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats