Angular

Trebuie să creezi o componentă principală numită AppComponent cu un fișier șablon app.component.html. Aplicația ta Angular ar trebui să fie verificată prin linting folosind TSLint cu configurația recomandată.

Fișierul de intrare

Fișierul de intrare pentru acest șablon trebuie să fie index.ts.

Poți configura fișierul principal de intrare, indexul HTML și stilurile globale în angular.json sub secțiunea options a build-ului. De exemplu:

"options": {
  "outputPath": "dist/app",
  "index": "index.html",
  "main": "index.ts",
  "polyfills": [
    "zone.js"
  ],
  "tsConfig": "tsconfig.json",
  "assets": [],
  "styles": ["style.css"],
  "scripts": []
}

• main — fișierul de intrare al aplicației (de ex. main.ts sau index.ts)
• index — fișierul de intrare HTML (de ex. index.html)
• styles — fișierele de stil globale (de ex. ["style.css"])

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

TypeScript sau JavaScript

Framework de testare

• Jest
• RxJS pentru programare reactivă. Poți folosi observabile și operatori din această bibliotecă. De exemplu, poți importa observabile folosind import { Observable } from 'rxjs';.
• Este preconfigurat pentru a suporta TypeScript, dar poți defini un fișier .js dacă este necesar.

Memento-uri speciale și detalii de implementare

• Angular Testing Library, o bibliotecă construită peste DOM Testing Library prin adăugarea de API-uri pentru lucrul cu componente Angular.

import { render } from '@testing-library/angular';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('should display the title', async () => {
    const { getByText } = await render(AppComponent);
    expect(getByText('Hello world!')).toBeTruthy();
  });
});

Biblioteci incluse

• angular/animations
• angular/common
• angular/compiler
• angular/core
• angular/forms
• angular/platform-browser
• angular/platform-browser-dynamic
• angular/router
• tslib
• zone.js
• karma-mocha
• karma-chrome-launcher
• karma-structured-json-reporter
• angular-devkit/build-angular/plugins/karma
• @angular/compiler-cli
• @testing-library/angular
• jest-environment-jsdom
• jest-preset-angular
• ts-node
• typescript

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Jest (jest-preset-angular) + @testing-library/angular
• Acest șablon nu are matcherii jest-dom. Folosește aserțiuni Jest simple: expect(screen.getByText('Count: 0')).toBeTruthy() și expect(button.disabled).toBe(true).
• Template-ul componentei (app.component.html) face parte din soluția de referință, așa că un bug ascuns poate fi fie în fișierul .ts, fie în cel .html.
• Denumește fișierele de test *.spec.ts. Build-ul Angular din spatele preview-ului web exclude *.spec.ts, așa că orice alt nume ar strica preview-ul.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum să depanezi

Depanarea aplicațiilor Angular este esențială pentru menținerea calității codului și diagnosticarea problemelor. Instrucțiunile console.log() pot fi un instrument eficient pentru depanarea codului Angular.

Pași pentru depanare folosind loguri în consolă

1. Identifică zona cu probleme: Determină componenta, serviciul sau funcția unde ar putea apărea problema.

2. Inserează instrucțiuni console.log(): Plasează strategic instrucțiuni console.log() în codul tău pentru a afișa date relevante, cum ar fi valorile variabilelor, apelurile de funcții sau răspunsurile HTTP.

3. Verifică rezultatele afișate ale testelor tale:

4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare pentru a verifica rezultatul din consolă sau verifică consola browserului tău.

5. Analizează rezultatul: Revizuiește output-ul înregistrat în consolă pentru a înțelege fluxul aplicației tale Angular și pentru a identifica potențialele probleme sau comportamente neașteptate.

Iată un exemplu de utilizare a console.log() pentru depanare în Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count: number = 0;

  increment() {
    console.log('Button clicked!'); // Log button click
    this.count++;
  }

  ngOnInit() {
    console.log('Component initialized.'); // Log component initialization
  }
}