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

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
  }
}