Dans le monde du développement et plus particulièrement celui du web, chacun sera potentiellement amené à mettre en place un site, et vient ensuite le moment de choisir quelle technologie sera utilisée pour celui-ci.

Étant développeur Microsoft, vous vous pencherez sur l’ASP.NET par exemple, mais ce n’est pas forcément ce que préfère votre client. Il aura peut-être une préférence pour un autre framework et vous devrez vous adapter à sa demande. N’ayez crainte, nous allons voir ensemble l’un des plus populaires du moment : Angular.

Présentation Angular

Une fois l’outil pris en main, Angular vous donnera la possibilité de créer votre site proprement en restant évolutif. Il existe un tas de documentation sur ce framework, donc vous trouverez des réponses à vos problèmes la majorité du temps.
Attention, il y a deux noms qui existent:

  •  Angular, qui corresponds au framework que nous allons découvrir
  •  AngularJS, qui corresponds aux versions 1.X d’Angular

Faites attention à cette distinction pendant vos recherches.

Pré-requis

.NET Core 2.1.2 (https://www.microsoft.com/net/download)
Node.js 8.5.0 (https://nodejs.org/en/download)

Contexte

Pour ce tutoriel, nous allons créer un générateur de phrases qui tenteront de « prédire notre avenir » dans des catégories différentes (travail, vie quotidienne, etc.).

Architecture

Pour ce tutoriel, nous allons utiliser un template de .NET Core qui utilise Angular pour la partie visible du projet. Créez un nouveau dossier, et accédez à celui-ci via une invite de commande, puis générez votre nouvelle solution via la commande :

dotnet new angular -o <nom du projet>

Double-cliquez sur le fichier « .csproj » pour ouvrir votre solution, puis lancez votre projet web. Tada ! Vous avez votre site déjà prêt à l’utilisation. 😊

Si vous regardez l’architecture de votre solution, vous trouverez la partie Angular dans le dossier « ClientApp ».

Le reste de la solution ne nous intéresse pas pour ce guide, mais à titre indicatif, il s’agit de la partie .NET Core du projet où l’on peut voir une architecture MVC : c’est ici que vous pourrez créer vos Controllers et Models qui seront utilisés par notre interface utilisateur. Le dossier Views ne sert qu’à faire le pont avec le framework Angular.

Le nommage des fichiers Angular respecte une norme spécifique que nous allons suivre :

<fonctionnalité>.<type>.<extension>

Pour bien comprendre ce qu’on peut trouver dans le dossier ClientApp qui définit l’architecture Angular qui nous intéresse, voici une description de ce qu’il contient :

ClientApp – Il contient le projet Angular. Vous pourrez y trouver des fichiers TypeScript « boot » qui servent à gérer la partie bootstrap du projet
App – Il contient différents éléments distincts de notre projet.

On pourra y créer des dossiers en fonction de nos besoins (components, services, models, etc.). C’est également ici que l’on trouvera nos fichiers « module » qui servent à initialiser notre projet.

  • Browser – Il sert à initialiser la partie interface de notre siteServer – Il sert à initialiser la partie serveur (Angular) de notre site
  •  Shared – (Optionnel) Il sert à importer les différents éléments communs aux autres fichiers
  • Dist – Il contient notre serveur Angular compacté en JavaScriptTest – Ce dossier est dédié au Debug du projet Angular

Pour ce projet, nous allons partir d’un projet minimal. Retirons donc les dossiers « counter », « fetchdata » et « navmenu » qui se trouvent dans le dossier « components », ainsi que les références à ces derniers.

App.component.html

<div class='container-fluid'>

    <div class='row'>

        <div class='body-content'>

            <router-outlet></router-outlet>

        </div>

    </div>

</div>

Pour ce projet, nous allons partir d’un projet minimal. Retirons donc les dossiers « counter », « fetchdata » et « navmenu » qui se trouvent dans le dossier « components », ainsi que les références à ces derniers.

App.shared.module.ts

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

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

import { RouterModule } from '@angular/router';




import { AppComponent } from './components/app/app.component';

import { HomeComponent } from './components/home/home.component';




@NgModule({

    declarations: [

        AppComponent,

        HomeComponent

    ],

    imports: [

        CommonModule,

        FormsModule,

        RouterModule.forRoot([

            { path: '', redirectTo: 'home', pathMatch: 'full' },

            { path: 'home', component: HomeComponent },

            { path: '**', redirectTo: 'home' }

        ])

    ]

})

export class AppModuleShared {

}

Maintenant que notre projet est prêt, nous allons pouvoir créer notre première page !

Création d’une page

Le fonctionnement des pages sur Angular est particulier. Au lieu d’avoir des fichiers HTML pour chaque page, nous allons utiliser des composants.

Qu’est-ce qu’un composant ?

Vous faites bien de le demander ! Un composant est un élément qui est utilisable partout dans l’application. Avec une simple balise, vous pourrez afficher un élément que vous aurez créé à l’endroit que vous voudrez, à condition de l’importer dans le module du projet.

Un composant est constitué d’un fichier TypeScript qui définit sa logique et peut être accompagné d’un fichier HTML et CSS.

Qu’est-ce qu’un composant ?

Vous faites bien de le demander ! Un composant est un élément qui est utilisable partout dans l’application. Avec une simple balise, vous pourrez afficher un élément que vous aurez créé à l’endroit que vous voudrez, à condition de l’importer dans le module du projet.

Un composant est constitué d’un fichier TypeScript qui définit sa logique et peut être accompagné d’un fichier HTML et CSS.

Daily-life.component.ts

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




@Component({

    selector: 'daily-life',

    templateUrl: './daily-life.component.html'

})

export class DailyLifeComponent {

    private _sentences: string[];

    private _currentSentence: string | undefined;




    constructor() {

        this._sentences = [

            "Il fera beau pour vous aujourd'hui.",

            "Vous ne devriez pas quitter votre chambre.",

            "Faites attention à votre environnement, vous pourriez avoir des surprises."

        ];




        this.getSentence();

    }




    public getSentence(): void {

            this._currentSentence = this._sentences[this.getRandom(this._sentences.length)];

    }




    private getRandom(max: number): number {

        return Math.floor(Math.random() * max);

Daily-life.component.html

Vie Quotidienne

{{ this._currentSentence }}

Vous trouverez souvent des fichier TypeScript qui contiennent directement la partie HTML dans le composant, mais je préfère diviser les différents langages dans des fichiers distincts.

La prochaine étape, c’est de les importer dans le module de notre application. Ouvrez le fichier « app.shared.module.ts », importez votre nouveau composant et ajoutez le dans la liste des déclarations.

Une fois fait, retournez sur la page « home.component.html » et retirez son contenu pour y placer votre composant comme cela :

<daily-life></daily-life>

La prochaine étape, c’est de les importer dans le module de notre application. Ouvrez le fichier « app.shared.module.ts », importez votre nouveau composant et ajoutez le dans la liste des déclarations.

Une fois fait, retournez sur la page « home.component.html » et retirez son contenu pour y placer votre composant comme cela :

Vous l’aurez compris, pour importer un composant sur une page HTML, il suffit d’y placer une balise avec le nom du « selector » que l’on trouve dans la définition de notre composant. 😊

Relancez l’application, et vous pourrez voir une petite phrase générée aléatoirement qui vous donne une petite prédiction pour votre journée !
Créez un autre composant similaire pour la catégorie de votre choix (disons le travail), et placez-le également dans la page « home.component.html » à la suite de notre premier composant, et ils se suivront sans problème.

Input

Pour que cela soit un peu plus personnel, nous allons utiliser un prénom pour notre prédiction. Et pour optimiser la chose, nous allons la définir dans notre composant parent (« home.component.ts ») et la lier à nos composants enfants (« daily-life.component.ts » et le ou les composants que vous aurez ajoutés).

Dans un premier temps, nous allons créer un champ texte pour que notre utilisateur puisse y entrer son nom et le sauvegarder dans notre composant parent.

Home.component.html

Home.component.ts

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

@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
private _name: string | undefined;
private input: string | undefined;

constructor() {
}

private onSubmit(): void {
this._name = this.input;
}
}

La prochaine étape est de passer cette valeur à nos composants enfants. Pour cela, nous allons utiliser des « Inputs ».

Ce mot clef va être utilisé dans nos composants enfants et contenir la valeur qui leur aura été donnée à la déclaration de la balise dans la page HTML. Nous allons l’utiliser au moment où la valeur qui nous intéresse change.

Daily-life.component.ts

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

@Component({
selector: 'daily-life',
templateUrl: './daily-life.component.html'
})
export class DailyLifeComponent {
private _sentences: string[];
private _currentSentence: string;
private _name: string | undefined;

@Input() set name(newName: string) {
this._name = newName;
this.getSentence();
}

constructor() {
this._sentences = [
"Il fera beau pour vous aujourd'hui.",
"Vous ne devriez pas quitter votre chambre.",
"Faites attention à votre environnement, vous pourriez avoir des surprises."
];

this._currentSentence = "Veuillez entrer votre nom.";
}

public getSentence(): void {
if (this._name != undefined)
this._currentSentence = `${this._name}: ` + this._sentences[this.getRandom(this._sentences.length)];
}

private getRandom(max: number): number {
return Math.floor(Math.random() * max);
}
}

Ajoutez ensuite la liaison avec la valeur dans le composant parent en le précisant comme suit :

<daily-life [name]="_name"></daily-life>

Faites de même avec vos autres composants enfants et voilà ! Nous avons notre première version utilisable. 😊

Routing

Maintenant, nous avons tous nos composants affichés ensemble. Mais il faut se le dire, il y a clairement mieux comme présentation. Je vous propose donc de ranger nos composants enfants dans des onglets ! Et pour se faire, nous allons utiliser le « routing » de notre application.

Je vous entends déjà dire « Mais le routing, c’est pour définir le chemin de nos pages ! », ou bien « Je lui paye le café s’il arrive à me faire croire que onglets = routing ». Eh bien préparez votre monnaie car en Angular, le routing défini bien des chemins … Mais ils se servent des composants pour définir son contenu !

Cependant, puisque nous allons ranger nos composants dans des routes, nous allons devoir changer notre manière de passer le nom de notre utilisateur à nos composants enfants. Et puisque nous allons passer par des routes, autant s’en servir aussi pour lui donner des paramètres.

Dans notre fichier « app.shared.module.ts », vous pouvez voir dans la partie « imports » la définition du routing dans notre application. Elle est assez vide, mais nous allons l’utiliser pour afficher nos composants enfants en tant qu’onglets.

Nous allons ranger la définition du Routing de notre application dans un nouveau fichier que l’on nommera « app.routing.module.ts ».

App.routing.module.ts

import { NgModule } from "@angular/core";

import { RouterModule, Routes } from "@angular/router";




import { HomeComponent } from "./components/home/home.component";

import { DailyLifeComponent } from "./components/category/daily-life/daily-life.component";

import { WorkComponent } from "./components/category/work/work.component";




const appRoutes: Routes = [

    { path: "", redirectTo: "home", pathMatch: "full" },

    {

        path: "home", component: HomeComponent,

        children: [

            { path: "daily-life/:name", component: DailyLifeComponent },

            { path: "work/:name", component: WorkComponent }

        ]

    },

    { path: "**", redirectTo: "home" }

];




@NgModule({

    imports: [

        RouterModule.forRoot(

            appRoutes

        )

    ],

    exports: [

        RouterModule

    ]

})

export class AppModuleRouting { }

Dans nos routes, nous avons maintenant des chemins « enfants », chacun nécessitant un paramètre « name », et un composant associé. Liez ce nouveau module fraîchement créé à notre module « app.shared.module.ts » et retirez l’ancien « routing » qui existait dans ce fichier.

Une fois cela fait, nous allons remodeler notre page principale et y ajouter une barre de navigation qui contiendra nos onglets.

Home.component.html

La propriété « routerLink » nous permet d’écrire le chemin vers lequel on pointe. Quant à la balise « router-outlet », elle hébergera le composant enfant défini via notre « routing ».

Pour éviter que notre nouvelle barre de navigation ne cache notre formulaire, nous allons ajouter le fichier « home.component.css » et le lier à notre composant dans sa définition.

Home.component.css

.body-content {
padding-top: 70px;
}

home.component.ts

@Component({

    selector: 'home',

    templateUrl: './home.component.html',

    styleUrls: [ './home.component.css' ]

})

Et enfin, voici notre composant enfant adapté pour notre nouveau système de « routing ».

Daily-life.component.ts

import { Component, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'daily-life',
templateUrl: './daily-life.component.html'
})
export class DailyLifeComponent {
private _sentences: string[];
private _currentSentence: string;
private _name: string | undefined;

constructor(private route: ActivatedRoute) {
this._sentences = [
"Il fera beau pour vous aujourd'hui.",
"Vous ne devriez pas quitter votre chambre.",
"Faites attention à votre environnement, vous pourriez avoir des surprises."
];

this._currentSentence = "Veuillez entrer votre nom.";

this.route.params.subscribe(params => {
this._name = params.name;
this.getSentence();
});
}

public getSentence(): void {
if (this._name != undefined)
this._currentSentence = `${this._name}: ` + this._sentences[this.getRandom(this._sentences.length)];
}

private getRandom(max: number): number {
return Math.floor(Math.random() * max);
}
}

Nous injectons la route actuellement utilisée et récupérons la valeur qui nous intéresse.

Faites ceci pour chacun de vos composants enfants et nos onglets sont ajoutés et fonctionnels.

Conclusion

Nous avons pu voir divers points sur Angular et nous avons mis en place un petit site qui regroupe quelques-unes de ses fonctionnalités qui pourront vous être utile à l’avenir. Il existe beaucoup d’autres points que nous n’avons pas couverts, mais si ce tutoriel vous a intéressé, vous pourrez trouver beaucoup d’autres documentation qui vous permettront d’approfondir le sujet.

Merci d’avoir lu cet article, j’espère qu’il vous aura été utile.

Vous trouverez le projet complet ici : https://github.com/olivierAZEO/angular-tutorial