Angular 4 : Pas à pas – Partie 1

La scène front-end bouge sans cesse, il y a de nouveaux Frameworks JavaScript (React, Vue, Ember…) tous les quatre matins. Si vous lisez ces lignes c’est que c’est Angular qui vous intéresse, ça tombe bien, moi aussi ^^.

Cet article fournit les bases dont vous avez besoin pour commencer à créer une application Angular. Nous parlerons de ce que cette version apporte de plus par rapport aux précédentes, nous allons nous focaliser sur le fonctionnement d’Angular 4 et principalement sur le composant de base qui est le Component.

À la fin de ce tutoriel, vous aurez les bases nécessaires pour créer une application Angular.

Les deux parties de ce tutoriel sont un aperçu d’Angular, ils se basent essentiellement sur le cours Angular: Getting Started de Deborah Kurata. Je vous invite donc à y jeter un coup d’oeil (et à tous les autres cours de cet auteur) pour une connaissance plus approfondie d’Angular.

Pourquoi choisir Angular ?

Il existe de nombreux Frameworks JavaScript (React, Vue, Ember…), pour ma part, étant développeur back, je trouve Angular/TypeScript assez “friendly” avec nous. Mais au-delà du choix personnel, voici ce qu’apporte Angular :

• Angular est un framework basé sur les composants, chaque vue est gérée à part ce qui simplifie grandemant le développement
• Angular facilitie l’interaction avec le DOM grâce au data binding
• Angular intègre tout ce qu’il faut pour commencer directement à développer une application, notamment le support de communication avec les services back-end (HttpClient) .

Angular changelog

Avec l’arrivée d’Angular 2 et 4, le Framework portera le nom d’Angular, AngularJs sera utilisé pour les versions 1.x. Google utilisera dorénavant la SEMVER (Semantic versioning) pour son Framework.

Angular n’a pas eu de version 3 tout simplement parce que le package @angular/router était en v3 alors que tous les autres étaient en v2 ; les développeurs ont donc décidé de passer directement en v4.

Toujours plus petit et plus rapide

Le but de la team d’Angular était de rendre les applications plus compactes et plus rapides en :

• Réduisant la taille du code généré de 60%
• Sortant les animations du package @angular/core ; plus besoin d’importer les animations si on ne les utilise pas.

Nouvelles fonctionnalités :

• Amélioration du *ngIf :
  On peut désormais utiliser la syntaxe else, ce qui n’était pas possible avant :
   

  

• Ajout de la validation des emails :
  La validation d’email est maintenant gérée par Angular, plus besoin d’utiliser le pattern
  

  

• Compatibilité TypeScript 2.1 et 2.2

Environnement de développement

Avant de commencer à développer, nous allons d’abord choisir le langage que l’on utilisera et l’éditeur qui supportera entièrement ce langage, puis nous parlerons des modules et de ce qu’ils signifient en Angular.

TypeScript comme language

Etant donné qu’Angular est un Framework JavaScript, nous pouvons utiliser tous les langages JavaScript compilés existants, le plus utilisé étant TypeScript (Angular est d’ailleurs développé en TypeScript).

Pour plus d’information sur TypeScript, suivez ce lien et si vous avez envie de faire joujou avec ce langage je vous invite au playground.

Quel IDE choisir ?

Personnellement j’utilise “Visual Studio Code” et pour faciliter le développement Angular j’utilise en plus de cela une extension Vs Code faite par John Papa, un poids lourd du milieu.
Si vous souhaitez avoir d’autres outils pour développer, je vous conseille cet article qui en répertorie quelques-uns.

Installation et mise en route du projet

L’installation de notre environnement de développement Angular se fait en deux étapes :

Installation de Node.js et npm (Node Package Manager) :

npm est un gestionnaire de paquets de Node.js qui nous permet d’installer des librairies, des paquets et des applications.
Nous l’utiliserons afin d’installer toutes les librairies pour Angular ainsi que pour exécuter les scripts qui transcompilent notre code et lancent notre application.

Création du projet :

Nous utiliserons pour cela Angular Cli (Commande Line Interface) pour, entre autres, la création du projet contenant toutes les dépendances nécessaires pour démarrer, c’est la façon la plus simple et la plus rapide pour créer un squelette de projet. Vous trouverez les sources du projet sur Github.

Le but de ce projet étant d’appliquer les concept de base d’Angular, nous allons donc essayer d’arriver, ensemble, au projet final de Deborah Kurata

Nous devons tout d’abord installer Angular Cli avec la commande suivante npm install -g @angular/cli. Après cela nous pourrons créer notre premier projet avec la commande ng new angular-project

Voilà, vous avez un projet Angular 4. Pour le lancer, rien de plus simple : il suffit de faire cd angular-project, npm install ensuite ng serve -o

Anatomie d’un projet Angular

Voici à quoi ressemble le squelette d’un projet Angular :

Le code du projet vit dans src/app. C’est ici que nous allons créer des composants, services et modèles.

App.module est le module racine (root module) qui permet l’organisation et la compilation du reste de l’application. Nous y déclarerons les components que nous allons créer pour qu’ils puissent être utilisés dans toute l’application. Nous verrons plus tard comment créer nos propres modules.

Les propriétés à l’intérieur du décorateur @ngModule seront mises à jour, à mesure que l’application grossit. Par exemple lors de la création d’un composant, celui-ci devra être inclus dans le tableau des imports.
Pour plus d’informations, vous trouverez tout ce qu’il vous faut dans la doc d’Angular : Bootstrapping, Architecture, NgModule.

AppComponent (app.component.ts, app.component.html, app.component.css) est le composant racine (root component). Il s’agit de la vue principale de l’application ; elle comprendra des sous composants qui se focaliseront sur des tâches spécifiques car nous ne pouvons pas y mettre toutes les fonctionnalités de l’application.

Mais c’est quoi au juste un “Component”?

Le Component Angular

Le Component est le composant de base d’une application Angular, il nous permet de rajouter de la logique dans nos vues, il contient :

• Un template contenant l’interface utilisateur en HTML. Nous utiliserons le databinding afin de rendre la vue dynamique.
• Une Class contenant le code associé à la vue, des propriétés et méthodes logiques qui seront utilisées dans la vue.
• Des metadata nous permettant de définir la classe comme étant un composant Angular (component)

Voici à quoi ressemble un composant Angular :

import { Component } from '@angular/core';

@Component({
        selector: 'soat-products',
        templateUrl: './product.component.html'
})

export class ProductComponent {
        pageTitle: string = 'Products Page';

        someFunction(){
                //Do your stuff here
        }
}

Nous allons décortiquer ce composant :

La classe

export class ProductComponent {
        pageTitle: string = 'Products Page';
}

On crée une classe en utilisant le mot-clé class. Par convention, le nom de la classe porte le nom de la fonctionnalité, suivi de “Component”.
Le mot-clé export signifie que la classe peut être utilisée ailleurs.
Dans cet exemple, nous avons défini une propriété de type string que nous pouvons utiliser dans la vue.

Le décorateur

Une classe devient un composant Angular lorsque nous lui ajoutons le metadata adéquat, ce metadata étant défini grâce à la fonction “Component”. Avec TypeScript on utilise ce que l’on appelle un Décorateur (Decorator). Un décorateur est une fonction qui ajoute des metadata dans la classe, elle est toujours préfixée d’un @

//the component decorator
@Component({
        selector: 'soat-products', //Directive name used in the view
        templateUrl: './product.component.html' //the view of this component
})

• selector: définit le nom de la directive du composant, qui sera utilisé dans la vue
• templateUrl: définit le chemin relatif vers la vue gérée par ce composant

Les imports

Avant d’utiliser une classe externe il faut l’importer.

import { Component } from '@angular/core';

Mise en pratique:

Nous allons maintenant créer notre premier composant Angular. Pour cela nous allons utiliser Angular Cli, mettez-vous à la racine de votre projet et tapez:
ng g component products/product-list

Cette commande nous permet de créer tous les fichiers liés à notre component, tout en mettant à jour le fichier app.module.ts et ce en déclarant le nouveau component créé :

import { ProductListComponent } from './products/product-list/product-list.component';

@NgModule({
    declarations: [
        AppComponent,
        ProductListComponent //component declaration
    ],
    imports: [
        BrowserModule, FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

Voilà, nous avons notre premier component. Pour l’utiliser il suffit d’ajouter la balise dans la vue de notre composant racine app.component.html en utilisant le selector

En lançant notre serveur (ng serve -o), nous affichons le contenu de product-list.component
Pour le moment nous affichons uniquement du texte en dur, le but étant de pouvoir envoyer des données depuis le composant vers la vue. Ceci est faisable grâce au data binding

Data Binding

Dans Angular nous avons quatre techniques de Data Binding nous permettant une synchronisation entre le template et le component. Il est ainsi possible de propager une donnée du component vers la vue et de la vue vers le component. Ces formes de data binding sont :

L’Interpolation {{...}}

L’interpolation est un binding unidirectionnel qui permet de modifier la vue à partir du component si un changement est intervenu sur une valeur de ce dernier. Elle est réalisée grâce à la double accolade {{ }} comme le montre l’image suivante:

L’interpolation peut être faite entre deux balises HTML ou au niveau de l’attribut, elle permet aussi de faire des calculs arithmétiques et de la concaténation.

Le Property Binding [...]

Permet de modifier la valeur l’attribut d’une balise HTML à partir du component si un changement est intervenu sur une valeur de ce dernier.

Pour effectuer un binding au niveau de l’attribut d’une balise HTML, il suffit de le mettre entre deux crochets [ ]. Quant à la source du binding, elle doit être entre deux quottes ' '.
Nous pouvons également utiliser l’interpolation mais par convention mieux vaut utiliser le binding d’attributs, sauf dans le cas où la valeur source ne représente qu’une partie de la valeur de l’attribut, comme dans le dernier exemple.

L’Event Binding (...)

Permet d’exécuter une fonction portée par un component suite à un événement émis par un élément de la vue.

C’est le même principe que pour le binding d’attributs sauf qu’ici au lieu d’utiliser des crochets [ ] sur un attribut, nous utiliserons des parenthèses ( ) autour d’un événement et nous faisons appel à une fonction dans notre classe.

Le two-way data binding [(...)]

C’est une combinaison du Property Binding et de l’Event Binding. Dans ce cas-là, le component se charge d’impacter le DOM en cas de changement et le DOM avertit le component d’un changement via l’émission d’un événement.
La syntaxe utilisée dans Angular pour déclarer un tel Data Binding est la suivante : [( )]. Moyen mnémotechnique pour vous en souvenir ““banana in the box”“.

Pour plus de détails, vous trouverez une fois de plus tout ce qu’il vous faut dans la doc d’Angular sur le Data-Binding

Mise en pratique

Nous allons maintenant utiliser ce que nous avons appris pour afficher une liste de produits dans un tableau.
Pour cela nous allons ouvrir product-list.component.html et créer notre template comme ceci :

<div class="panel panel-primary">
    <div class="panel-heading">
        Product List page
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">Filter by: </div>
            <div class="col-md-4">

            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <h3>Filtred by: </h3>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <button class="btn btn-primary">
                                Show Image
                                                </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>

Nous allons maintenant utiliser l’interpolation pour binder le titre de la page comme ceci :

C’est bien beau d’avoir un tableau, mais un tableau avec des valeurs c’est mieux. Pour cela nous aurons besoin d’utiliser les directives structurelles*ngIf et *ngFor (non, les astérisques ne sont pas là par erreur).

• *ngIf : permet de supprimer ou de recréer l’élément courant d’après l’expression passée en paramètre. Si l’expression assignée au ngIf est évaluée à false, alors l’élément sera supprimé du DOM, puis sera recréé si l’expression est évaluée à true.
• *ngFor : permet d’itérer sur un tableau et de créer un template pour chaque élément.

Nous ne souhaitons pas afficher de tableau tant que la liste ne contient aucun élément ; pour cela nous utiliserons le *ngIf comme suit:

Maintenant nous allons peupler notre liste de produits et en afficher les valeurs avec *ngFor comme suit (vous trouverez les valeurs dans src/api/products/products.json):

Nous utiliserons le property binding pour afficher les images des produits comme ceci :

En revanche nos images sont trop grandes… Nous allons donc créer deux variables dans notre classe pour gérer la taille et le margin :

Afin de mettre en pratique l’event binding, nous allons créer une méthode qui affiche ou cache les images des produits :

Au tour du two-way data binding, nous allons filtrer la liste en tapant un texte dans l’input tout en l’affichant en bas :

Cela ne fonctionne pas ? C’est normal car il nous faut importer le module contenant le ngModel dans notre app.module.ts :

Pour le moment on ne filtre pas notre liste, nous verrons cela dans un deuxième temps. Nous allons d’abord parler des Interfaces.
Nous avons déclaré nos products comme étant de type any. Nous pouvons créer notre propre interface qui contiendra les différentes propriétés et méthodes :

Rien de plus simple, il suffit juste d’utiliser le mot clé interface précédé d’un export et de définir les propriétés de notre objet ainsi que leur type.

Maintenant nous pouvons filtrer notre liste, nous allons tout d’abord créer un nouveau tableau de type IProduct que l’on nommera filtredProducts, qui recevra les éléments filtrés et un getter/setter pour la variable listeFilter précédemment créée, contenant la chaîne de caractères sur laquelle nous souhaitons filtrer notre tableau :

Le code est simple : si la valeur de listeFilter est valorisée, on effectue le filtre grâce à la méthode performFilter() sinon on renvoie la liste initiale. Voici notre méthode de filtre :

Nous utilisons la méthode filter afin de créer un nouveau tableau contenant les valeurs qui passeront le test défini dans la fonction.
Maintenant il nous faut définir la valeur par défaut de notre variable filteredProducts. Nous ferons cela dans notre constructeur qui est initialisé lors de la première initialisation du component :

Tout ce qui nous reste à faire est de modifier notre template afin de boucler sur filtredProducts au lieu de products et tadaa !

Conclusion

Dans cette première partie, nous avons vu comment créer un projet Angular 4 from scratch en utilisant Angular CLI. Nous nous sommes familiarisés avec les bases d’une application Angular (structure du projet, module, component, template…). Nous avons également appris comment communiquer entre le DOM et notre component en utilisant les quatre techniques de data binding pour avoir un début de projet fonctionnel. Lors de la seconde partie, nous pourrons nous focaliser sur :

• La création de Services
• La création de Pipes
• L’utilisation de l’HttpClient pour les appels API
• L’utilisation des router afin de naviguer dans notre application

© SOAT
Toute reproduction interdite sans autorisation de l’auteur