Angulars c’est des écritures simples pour faire communiquer les données avec la vue, mais pas que : c’est un framework adapté aux besoin modernes dans la création d’interface utilisateurs.
Les attributs
Propriété personnalisées, nouvel attribut
Un nouveau composant, appelable dans une page via <selector></selector>, pourra voir une propriété de sa classe contrôleur être exposé comme un attribut (de la même manière que src pour une <img> par exemple).
Il faut pour cela préfixé sa propriété de @Input() et importer le module Input depuis @angular/core.
import {Component, OnInit, Input} from '@angular/core';
//...
export class MonBlocComponent implements OnInit {
@Input() monAttribut!: type;
//...
}Dans la page qui l’appelle on pourra écrire
<monBloc [monAttribut]="variable"></monBloc>Les directives
Les directives s’utilisent comme un attribut (src, title…) elles vont donné une directive à la balise qu’elle décore. Techniquement il s’agit d’une classe TypeScript qui ajoute du comportement supplémentaire à un élément HTML.
Les directives par attributs
ngStyle, pour des styles dynamique
Angular définit une directive par attribut ngStyle qui apparaîtra donc sous la forme [ngStyle]= »{ngstyle:valeur} ». Attention toutefois : ce ne sont pas des styles css, mais des apellations proches qui seront interprétées pour intéragir avec des styles css ; d’où l’apellation directives par attribut.
L’intérêt de cette balise est qu’elle va permettre d’utiliser simplement les propriétés du composant. Ainsi on pourra écrire :
<monBloc [ngStyle]="{'font-size.px':size*2}"></monBloc>Dans cette exemple, le font-size des textes du composant sera égal à la propriété size multiplé par deux, en pixel.
ngClass, pour des classe conditionnelles
De la même manière, une directive par attribut ngClass existe pour conditionner l’affichage d’une classe selon une condition.
<div [ngClass]="{'active': quantiteDispo > 0}"></div>…ajoutera la classe « active » que si la propriété quantiteDispo est supérieur à 0.
Les directives structurelles
Les directives structurelles sont préfixées de « * ». Elles servent à modifier la structure du document.
*ngIf
Comme le mot « If » le sous-entend, la directive *ngIf va agir selon une condition. Cette directive va conditionner la construction du bloc à la vérification de cette condition. Ainsi *ngIf= »isTrue » (dans le cas où isTrue est une propriété booléan) ne va afficher le composant que s’il respect cette verification. *ngIf= »age >= 18″ permettra par exemple d’inclure le composant qu’aux personne majeur.
*ngFor
Ici, comme le mot « For » le laisse entendre, cette directive va reproduire l’affichage du bloc selon une boucle. Mettons une propriété Games (qui contient plus objet Game) *ngFor= »let game of Games » va répéter l’affichage de la balise autant de fois qu’il y a d’objet dans le tableau.
Les pipes
Les pipes, nommés ainsi du fait de l’utilisation du symbole « | », permette de modifer l’apparence d’une donnée au moment de son affichage dans la vue. Ainsi, la donnée reste la même dans la variable, elle n’est stylisé que dans la vue.
{{ title | uppercase }}
{{ maDate | date: 'dd/MM/yy, à HH:mm' }}
{{ 4346234.36 | number: '1.0-1' }}Ici, le pipe
- « uppercase » aura mit le titre en capital dans la vue.
- « date » aura contraint l’affichage de l’objet maDate au format ‘dd/MM/yy, à HH:mm’
- « number » aura contraint l’affichage du chiffre à AUCUN ou 1 chiffre après la virgule
Il en existe d’autres.
Les services
De la même manière que les SingleTon ou les DependencyServices, Angular propre de pouvoir récupérer la même instance d’un objet partout dans l’application en le récupérant à la volée. Cela se fait via les « Services ». Dans les faits un service est une classe déclarée comme pouvant être injectée.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' //définit la portée d'injection
})
export class MonService {
LifeMeaning:number=42;
}Pour y accéder depuis un composant, il faudra utiliser son constructeur (et non ngOnInit) et l’indiquer comme paramètre du contructeur. A ce propos astuce : dans Typescript, indiquer un paramètre de constructeur prefixé de « private » ou « public » induira automatiquement qu’une propriété du même nom existe.
import { MonService } from '../services/face-snaps.service';
//...
export class MonBlocComponent implements OnInit{
//...
constructor (private monService:MonService){}
//...
}Ensuite, à partir de <monBloc></monBloc> (dans son code html ou au moment de son appel) on peut accéder à monService.LifeMeaning.
Le routing
Le routing sur Angular va permettre la navigation dans une SPA.
Son processus va s’articuler autour de la balise <router-outlet></router-outlet>, qui va afficher le composant lier à la route, et du fichier app-routing.module.ts qui va lier une route à un composant.
import {NgModule} from "@angular/core";
import {Route, RouterModule} from "@angular/router";
//+ import des components
const routes:Route[] = [
{path:'',component:MonComposantAccueil} //Le composant de la page d'accueil
{path:'leBloc',component:MonBloc}, // site.fr/leBloc qui affichera le composant
{path:'leBloc/:id',component:MonBlocPrecis}, //un bloc identifié par un id
//...]
//Ajout des routes
@NgModule({
imports:[
RouterModule.forRoot(routes)
],
exports:[
RouterModule
]
})Ensuite l’attribut routerLink permettra de l’utiliser au click sur un lien en renseignant la route à suivre. De plus, l’attribut routerLinkActive permet d’indiquer une classe css à appliquer en cas de route « active ». Et finalement, l’attribut [routerLinkActiveOptions], à associé à un objet, pourra précisé si la page active doit être uniquement celle visité et pas une de ses enfants dans l’url.
<a routerLink="leBloc" routerLinkActive="LienEnCours" [routerLinkActiveOptions]="{ exact: true }">Aller voir le bloc</a>Sinon, via le code, on peut injecter le service Router et appeler sa méthode navigateByUrl(« monBloc »).
Pour terminer, la récupération d’un valeur transmise dans l’URL se fait via le service ActivatedRoute. En injectant ce dernier dans un composant, on peut accéder à sa propriété snapshot.params[‘id’] (il faut que la app.routing.moduel.ts ait mentionné l’emplacement de « id » via /:id)