Tutoriel pour apprendre Angular 4 pas à pas

Étant 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).
Voici quelques spécificités de TypeScript :

• open source ;
• sur ensemble de JavaScript ;
• transcompile le code en JavaScript ;
• typage puissant (toutes les classes, fonctions, variables peuvent avoir un type) ;
• approche objet basée sur les classes et non sur les prototypes.

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.

Énormément d'éditeurs supportent TypeScript, nativement ou grâce à un plugin. 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.

L'installation de notre environnement de développement Angular se fait en deux étapes.

III-C-1. Installation de Node.js et npm (Node Package Manager)▲

III-C-2. Mise en place de l'application▲

Nous devons tout d'abord installer Angular Cli avec la commande suivante ng 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.

Un « component » Angular 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.

/*export: to use the class elsewhere
class: keyword to create a class
ProductComponent: class name*/
export class ProductComponent {
    //PropertyName: Data type = "Default value"
        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.

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 metadatas 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.

Avant d'utiliser une classe externe, il faut l'importer.

//import keyword {The member we need} from 'the module containing the member'
import { Component } from '@angular/core';

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.

L'interpolation est un binding unidirectionnel qui permet de modifier le DOM à partir du modèle 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.

Permet de valoriser une propriété d'un composant ou d'une directive à partir du modèle 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 quotes ' '.
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.

Permet d'exécuter une fonction portée par un component suite à un événement émis par un élément du DOM.

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.

C'est une combinaison du property binding et de l'event binding sous une unique annotation. Dans ce cas-là, le component se charge d'impacter le DOM en cas de changement du modèle 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 : [( )]. Pour vous en souvenir, sachez que cette annotation se nomme « 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.

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 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 !