Une fois compris la transition entre javascript, jQuery et Angular, attaquons nous aux bases. Ces derniers ne sont finalement qu’une évolution du scripting web vers un design pattern issue des langages logiciels : MVC ou encore MVVM.

Mise en place du projet

Tout d’abord il faut installer NPM : Node Package Manager. Pour cela se rendre sur https://nodejs.org/fr/ et installer la version LTS (Long Time Support).

Une fois Node et donc NPM installé, il faut installer via NPM le CLI d’Angular :

npm i -g @angular/cli

Ensuite, il faut demande au CLI Angular d’installer le package de base pour la nouvelle application (une sorte de projet vide) ; au programme : les fichiers pour le versionning git, les dépendants du projets (librairies), des fichiers de conf au format json etc.
NewApplicationName sera le nom de l’application. Est indiqué deux flags : style=scss et skip-tests=true qui servent respectivement à indiquer le type de fichier css utilisé et l’implémentation de fichiers relatifs aux tests de l’application.

ng new NewApplicationName --style=scss --skip-tests=true

L’ensemble des fichiers maintenant installé, les pages de travails en eux même se situent dans /src. Et oui, ce sont des pages de travails car en réalité, vu qu’il y a du type scripts elles ne pourront pas être lu directement par le navigateur. Pour obtenir des pages lisible deux solutions.

1: Environnement serveur local

Lancer le serveur qui compilera l’application et l’exécutera dans un environnement serveur accessible via http://localhost:4200. De plus la page web se rafraichira à chaque save des pages de travail.

ng serve

2: Generation des fichiers web

Demander la compilation de l’application qui ira générer les fichiers web (html, css, js) dans un dossier /Dist.

ng build

Le plus évident est bien d’utiliser la solution 1 pour travailler au quotidien

Les composants

Dans Angular, l’approche s’articule autour de bloc qui vont intégrer la page web. Chaque bloc à sa vue (bloc.component.html) son css (bloc.component.css) et son controleur (bloc.component.ts). Pour créer un « component » il faut utiliser le CLI :

ng generate component name
//ou, en version simplifié :
ng g c name

Cela va entre autres générer les fichiers avec leur template de base et ajouter une référence de ce component dans app.module.ts.

Le contrôleur (bloc.component.ts) va définir le composant en renseignant ses fichiers, construisant sa classe de controle et en indiquant notamment le selector (ex : monBloc) qui permettra ensuite de l’appeler dans une page web. La page html du composant contiendra le code HTML du composant classique et la fiche css ses styles.

Enfin, la page qui aura besoin du composant pourra l’appeler via <monBloc></monBloc>.

C’est là où on comprend un des objectifs de la compilation : le code utilisé n’est en fait pas du HTML, mais s’en inspire. Puis, le CLI va générer les balises correspondantes en parcourant les pages de travail.

Le Binding

L’interpolation de string (binding d’affichage)

Chaque composant lie finalement une vue (.html) à son contrôleur (classe du composant dans le fichier .ts). La methode ngOnInit() est d’ailleurs la méthode lancé à l’initialisation du component. Ensuite, afin d’afficher les propriétés de la classe MonBlocComponent dans sa vue, il suffira d’utiliser {{propriété}}. Exemple :

<h2>{{title}}</h2>

Il est important de mentionner qu’il s’agit d’un vrai Binding : lorsque la valeur de title est changé, le contenu le sera aussi dans <h2></h2> (à la manière d’un NotifyOnPropertyChanged en .NET) : le fonctionnement de ce mécanisme est totalement invisible pour le développeur.

L’attribute Binding

L’attribute Binding consiste à lier une propriété (ou tout autre variable) à un attribut. Ici il ne s’agit pas d’insérer des données à l’emplacement d’une page HTML, mais de lier un attribut de balise html à une donnée. On identifiera l’attribut via [attribut] et la variable « variable » Exemple :

<img [src]="imgPath" />

L’event Binding

l’event Binding n’est qu’une autre apellation pour lier un evenement de balise à une methode, et sera marqué de manière assez similaire : (event) = methode().

<button (click)="ShowMessage()">Click !</button>

Dans l’article suivant seront abordés des notions plus avancées pour utiliser correctement angular : https://prographie.wordpress.com/2022/05/05/angular-caracteristiques-avancees/

Sources

• https://openclassrooms.com/fr/courses/7471261-debutez-avec-angular