1. Q’est-ce qu’angular ?
Angular est un framework open-source développé par Google. Il te permet de construire des applications web complexes et évolutives grâce à une architecture modulaire.
2. Composants Angular
Un composant dans Angular est une partie indépendante de ton application. Un composant contrôle une partie de l’écran appelée vue. Pour créer un composant, tu utilises le décorateur @Component qui te permet d’indiquer des métadonnées pour le composant.
Typescript
import { Component } from ‘@angular/core’;
@Component({
selector: ‘mon-app’,
template: `<h1>Bonjour Angular</h1>`,
})
export class AppComponent { }
3. Modules Angular
Dans Angular, les modules sont utilisés pour regrouper des fonctionnalités. Chaque application Angular a au moins un module, le module racine, que tu utilises pour lancer l’application. Tu définis un module en utilisant le décorateur @NgModule.
Typescript
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
4. Data binding
Le data binding est une caractéristique d’Angular. Elle te permet de définir une liaison entre la vue et la logique du composant. Il y a plusieurs façons de faire du data binding :
- Interpolation : {{ maVariable }}
- Liaison de propriété : [maPropriete]= »maVariable »
- Liaison d’événement : (monEvenement)= »maMethode() »
- Two-way binding : [(ngModel)]= »maVariable »
5. Directives
Les directives sont des marqueurs sur les balises du DOM qui indiquent à Angular de les attacher à un comportement spécifique. Il existe trois types de directives dans Angular :
- Les directives de composants
- Les directives structurelles
- Les directives d’attributs
6. Services et injections de dépendances
Les services sont un excellent moyen de partager des informations entre des classes qui ne se connaissent pas. Angular utilise l’injection de dépendances pour fournir des instances de classes aux classes qui en ont besoin.
Typescript
import { Injectable } from ‘@angular/core’;
@Injectable({
providedIn: ‘root’,
})
export class MonService {
maMethode() {
return ‘Hello, Angular’;
}
}