Introduction à Angular

Voici une introduction assez complète à Angular. Après avoir parcouru déjà pas mal VueJs et React, je ne pouvais pas faire sans parler d’Angular. Alors voici un article qui vous expliquera ce qu’est Angular, comment l’installer et comment créer votre premier projet HelloWorld.

Angular qu’est-ce que c’est ?

Angular est un framework javascript. Il va donc permettre de créer des composants et d’agir sur la UI (FrontEnd), le visuel des pages Web en clair. Il utilise du TypeScript qui est du javascript avec en plus l’utilisation de type, de classe etc donc du javascript en objet. Il permet de créer une application qui évolue sur une page unique. Le design intérieur de la page évolue sans rafraichissement de la page complète, les urls évoluent mais on reste sur la même page avec des modifications visuelles qui se font sans aucun blocage et sans rafraichissement, de manière fluide grâce à ce framework javascript.

Installation

Pour pouvoir utiliser Angular, on va avoir besoin de plusieurs choses :

• NodeJs qui est une librairie javascript permettant de faire pas mal de chose mais dans notre cas, on va surtout l’installer pour avoir accès aux packages npm et donc à la commande npm. On va donc installer NodeJs grâce au lien ici : Installation de NodeJs.
• Visual Studio Code qui est un éditeur de code très bien fait pour tout ce qui est FrontEnd Web et en plus il est gratuit et disponible pour plusieurs OS. Cliquez ici pour l’installer : Installation de Visual Studio Code.
• Dans une boite DOS ouverte en ADMIN (clic droit sur l’icone de commande dos – ouvrir en tant qu’administrateur) ou équivalent selon votre OS, tapez la commande suivante :
  • npm install -g @angular/cli@latest
  • Cela va permettre d’installer le package “angular cli” dernière version “@latest” en global sur toute votre machine donc pas uniquement sur un projet “-g”.

Créer un projet

A présent, tout est prêt pour créer votre premier projet.

Pour créer un projet, toujours dans votre boîte DOS admin ou équivalent, tapez la commande suivante :

ng new projet1

Les commandes Angular sont en fait des commandes “ng”. “new” indique qu’on souhaite créer un nouveau projet donc un nouveau dossier avec tout ce qu’il faut dedans pour travailler et “projet1” est le nom du dossier et donc de notre projet.

3 questions vous seront posées suite à cette commande :

• Option stricte à utiliser : non (sera expliqué dans de futures articles)
• Routing : non (sera expliqué dans de futures articles)
• Style à utiliser : laissez CSS pour le moment (sera aussi expliqué dans de futures articles)

Si vous ouvrez à présent Visual Studio Code, vous pouvez ouvrir un projet (donc un dossier simplement) et choisir l’endroit où vous avez créez votre projet ci-dessus. Voilà, vous avez votre premier projet de créé. Ce n’est pas un projet vide mais bel et bien un HelloWorld.

Lancer et tester votre projet

Pour lancer votre projet, rien de plus simple, ouvrez une console DOS admin ou encore plus simple, maintenant que vous êtes dans Visual Studio Code, vous pouvez ouvrir la console de Visual Studio Code via les menus TERMINAL – NEW TERMINAL.

Tapez à présent la commande suivante :

ng serve

Cette commande va préparer un serveur http local qui pointe directement sur le dossier de votre projet. Ainsi, le simple fait de faire CTRL + CLICK sur l’url affichée vous ouvre votre browser internet sur la page principale de votre projet.

Structure du projet

La stucture du projet est similaire à VueJs que j’ai déjà expliqué dans d’autres articles dans le sens où vous avez :

• node_modules qui contient tous les modules nodejs
• src qui contient les sources à proprement parlé de votre projet
• quelques fichiers de configuration (les packages etc)

Attardons-nous surtout sur le dossier “src” qui contient les sources. Dans ce dossier on peut trouver ceci :

• app : ce dossier contient le composant principal de notre application :
  • le style sous le nom app.component.css
  • le template html (le code de base html) sous le nom app.component.html
  • le code typescript (javascript objet) sous le nom app.component.ts
  • le code typescript du module principal de l’application : app.module.ts
  • vous avez également vu qu’il y a un app.component.spec.ts c’est un fichier permettant de générer des tests de votre code typescript tout simplement mais cela sera expliqué dans un article dédié au testing
• assets : ce dossier contient simplement des assets (images et autres fichiers utilisés par l’application mais non code)
• environment : permet de gérer les différents environnements (production etc) mais cela sera expliqué dans un future article lié à cela
• nous avons ensuite les fichiers de base :
  • index.html (la page html de base qui contient <app-root></app-root> -> c’est ce code qui sera remplacé notre composant principal de l’application.
  • main.ts : c’est le fichier contenant le code principal de départ, c’est lui qui importe en typescript ce dont on a besoin pour travailler et qui initialize l’application.
  • styles.css : c’est le style css général de l’application
  • test.ts : comme son nom l’indique c’est le fichier permettant d’initialiser tout ce qu’il faut pour les tests de nos composants si vous désirez créer des tests pour vos composants. Encore une fois, la partie testing sera détaillée dans un prochain article.

Exemple de code

On a donc un projet exemple mais imaginons qu’on veuille un HelloWorld qui donne ceci :

• Un label qui affiche “Indiquez votre nom :”
• Une textbox dans laquelle on peut saisir notre nom
• Un texte en dessous qui affiche “Hello ” suivi de notre nom (ce dernier se mettant à jour instantanément)

C’est simple :

• Aller dans le fichier app.component.html et le modifier comme ceci :

Indiquez votre nom : <input type="text">
<p>Hello </p>

Si vous sauvegarderez et que votre “ng serve” est toujours en route dans votre console, vous allez voire que le code sera recompilé et votre page dans votre browser sera mise à jour pour vous afficher déjà ce que vous souhaitez.

On a bien notre texte voulu ainsi que la textbox et le “Hello ” mais rien ne se passe quand on tape notre nom c’est normal, nous n’avons encore rien codé côté ts (typescript).

Notre nom doit être stocké dans une variable côté ts, on va donc allez dans app.component.ts pour ajouter ceci :

export class AppComponent {
  title = 'test-angular';

  name = '';
}

En ajoutant name = ” dans export, on indique que dans notre composant “app”, on a une variable “name” qui contiendra une chaîne de caractères. Maintenant, il faut la modifier quand on modifie notre textbox. Comme on va modifier une variable typescript à travers l’html, on va utiliser des directives Angular dans les balises HTML. C’est en fait un morceau de Angular qui n’est pas chargé par défaut, on va donc aller dans la partie app.module.ts pour importer cette partie comme ceci :

import...
....
import { FormsModule } from '@angular/forms';
....
@NgModule({
  ...
  imports: [
    FormsModule,
  ...

Maintenant qu’on a importé FormsModule, on va pouvoir modifier notre html comme ceci :

Indiquez votre nom : <input type="text" [(ngModel)]="name">
<p>Hello </p>

On a donc ajouté une nouvelle directive (instruction) à l’intérieur de la balise input : [(ngModel)]=”name”. Cela signifie qu’on lie notre input à une variable “name” dans les 2 sens : lecture / écriture. Donc si cette variable est modifiée extérieurement, l’input est rafraichit et si l’input est modifié, la variable aussi.

Il nous reste à afficher notre nom après le Hello. Beaucoup plus simple :

Indiquez votre nom : <input type="text" [(ngModel)]="name">
<p>Hello {{ name }}</p>

dans l’html même, l’affichage du contenu d’une variable angular se fait simplement avec {{ variable }}.

Si vous testez votre page web, vous pouvez à présent modifier votre nom à travers la textbox et voir le texte “Hello ” se mettre à jour en live pour afficher votre nom à la suite.

Finalement

En bref, vous avez vu que même si Angular est légèrement différent de React et VueJs, il reste assez simple. Une fois l’habitude prise, on s’y fait assez vite.

J’espère que cet article vous aura plu. D’autres articles sur Angular suivront selon les demandes. N’hésitez donc pas à me laisser vos commentaires, à liker, partager et à vous abonner pour ne rien manquer. Je vous dis à très bientôt sur le blog Développement Web Facile.com.