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:
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:
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
:
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
:
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:
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
:
Per executar proves de cap a cap, utilitza la comanda 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
- Instal·la l'Angular CLI si encara no ho has fet.
- Crea una nova aplicació Angular anomenada
exemple-app
. - Serveix l'aplicació i verifica que està funcionant correctament.
Solució
Exercici 2: Generar un component
- Dins de l'aplicació
exemple-app
, genera un nou component anomenathola-món
. - Modifica el component per mostrar el text "Hola, món!".
- Serveix l'aplicació i verifica que el nou component es mostra correctament.
Solució
Modifica el fitxer hola-mon.component.html
per incloure el text:
Afegeix el component al fitxer app.component.html
:
Serveix l'aplicació:
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.
Curs d'Angular
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- Arquitectura d'Angular
- Primera aplicació Angular
Mòdul 2: Components d'Angular
- Comprendre els components
- Crear components
- Plantilles de components
- Estils de components
- Interacció de components
Mòdul 3: Enllaç de dades i directives
- Interpolació i enllaç de propietats
- Enllaç d'esdeveniments
- Enllaç de dades bidireccional
- Directives integrades
- Directives personalitzades
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
- Introducció al client HTTP
- Fer sol·licituds HTTP
- Gestionar respostes HTTP
- Utilitzar observables
- Gestió d'errors
Mòdul 8: Gestió d'estat
- Introducció a la gestió d'estat
- Utilitzar serveis per a la gestió d'estat
- NgRx Store
- NgRx Effects
- NgRx Entity
Mòdul 9: Proves a Angular
- Proves unitàries
- Proves de components
- Proves de serveis
- Proves de cap a cap
- Simulació de dependències
Mòdul 10: Conceptes avançats d'Angular
- Angular Universal
- Optimització del rendiment
- Internacionalització (i18n)
- Tubs personalitzats
- Animacions d'Angular