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

HOME

En aquest tema, explorarem les millors pràctiques per assegurar la qualitat del codi en les aplicacions Angular. Seguir aquestes pràctiques no només millorarà la llegibilitat i mantenibilitat del codi, sinó que també ajudarà a evitar errors comuns i a fer que el desenvolupament sigui més eficient.

Estructura del projecte

1.1. Organització de carpetes

Organitza el teu projecte en carpetes lògiques per facilitar la navegació i manteniment. Una estructura típica podria ser:

src/
  app/
    components/
    services/
    models/
    modules/
    ...
  assets/
  environments/
  ...

1.2. Modularització

Divideix la teva aplicació en mòduls per separar funcionalitats i millorar la reutilització del codi. Per exemple:

CoreModule: Conté serveis que s'utilitzen a tota l'aplicació.
SharedModule: Conté components, directives i pipes que es reutilitzen en diferents parts de l'aplicació.
FeatureModules: Mòduls específics per a funcionalitats concretes.

Estil de codi

2.1. Linting

Utilitza eines de linting com TSLint o ESLint per assegurar-te que el codi segueix un estil consistent. Configura les regles de linting en el fitxer tslint.json o eslint.json.

2.2. Formateig

Utilitza eines de formateig automàtic com Prettier per mantenir un estil de codi consistent. Configura Prettier en el fitxer .prettierrc.

2.3. Nomenclatura

Segueix convencions de nomenclatura clares i consistents:

Components: NomComponent
Serveis: NomService
Directives: NomDirective
Pipes: NomPipe

Especificitat i reutilització

3.1. Components petits i reutilitzables

Crea components petits i enfocats en una sola responsabilitat. Això facilita la seva reutilització i manteniment.

// Exemples de components petits i reutilitzables
@Component({
  selector: 'app-button',
  template: `<button><ng-content></ng-content></button>`,
})
export class ButtonComponent {}

3.2. Serveis per a la lògica de negoci

Mantingues la lògica de negoci fora dels components i col·loca-la en serveis. Això facilita la prova i reutilització del codi.

// Exemple de servei
@Injectable({
  providedIn: 'root',
})
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

Proves

4.1. Proves unitàries

Escriu proves unitàries per a components, serveis i altres unitats de codi. Utilitza Jasmine i Karma per a les proves unitàries.

// Exemple de prova unitària
describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UserService],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should fetch user by ID', () => {
    const mockUser = { id: 1, name: 'John Doe' };
    service.getUser(1).subscribe(user => {
      expect(user).toEqual(mockUser);
    });

    const req = httpMock.expectOne('/api/users/1');
    expect(req.request.method).toBe('GET');
    req.flush(mockUser);
  });
});

4.2. Proves de cap a cap

Utilitza Protractor per a les proves de cap a cap (E2E) per assegurar-te que l'aplicació funciona correctament des del punt de vista de l'usuari.

Documentació

5.1. Comentaris

Escriu comentaris clars i concisos per explicar la funcionalitat del codi, especialment per a parts complexes o no trivials.

/**
 * Servei per gestionar els usuaris.
 */
@Injectable({
  providedIn: 'root',
})
export class UserService {
  // ...
}

5.2. Documentació del projecte

Mantingues una documentació actualitzada del projecte, incloent-hi una guia d'instal·lació, ús i contribució. Utilitza eines com Compodoc per generar documentació automàtica del codi.

Millors pràctiques de seguretat

6.1. Sanitització de dades

Assegura't de sanititzar les dades d'entrada per evitar atacs de tipus XSS (Cross-Site Scripting).

6.2. Autenticació i autorització

Implementa mecanismes robustos d'autenticació i autorització per protegir les dades sensibles.

Optimització del rendiment

7.1. Càrrega mandrosa

Utilitza la càrrega mandrosa per carregar mòduls només quan siguin necessaris, millorant així el temps de càrrega inicial de l'aplicació.

7.2. Change Detection

Optimitza la detecció de canvis utilitzant OnPush per a components que no necessiten ser verificats freqüentment.

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
  // ...
}

Conclusió

Seguir aquestes millors pràctiques t'ajudarà a mantenir un codi net, eficient i fàcil de mantenir. La qualitat del codi és essencial per al desenvolupament d'aplicacions Angular robustes i escalables. A mesura que avancis en el desenvolupament, recorda revisar i ajustar les teves pràctiques per adaptar-te a les necessitats específiques del teu projecte.

Qualitat del codi i millors pràctiques

Estructura del projecte

1.1. Organització de carpetes

1.2. Modularització

Estil de codi

2.1. Linting

2.2. Formateig

2.3. Nomenclatura

Especificitat i reutilització

3.1. Components petits i reutilitzables

3.2. Serveis per a la lògica de negoci

Proves

4.1. Proves unitàries

4.2. Proves de cap a cap

Documentació

5.1. Comentaris

5.2. Documentació del projecte

Millors pràctiques de seguretat

6.1. Sanitització de dades

6.2. Autenticació i autorització

Optimització del rendiment

7.1. Càrrega mandrosa

7.2. Change Detection

Conclusió

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