Logo Angular

Angular, épisode 2: première page

Introduction

Dans le premier article, on a vu comment créer un projet Angular. Ici, on va voir comment réaliser une page d’accueil qui enchaînera vers la page de connexion (dans l’épisode 3). A noter que je ne vais pas reprendre le projet d’exemple utilisé dans le premier article. J’ai décidé de vous faire suivre mon nouveau projet afin de traiter des cas réels, ça changera des tutoriels qu’on trouve partout.

Structure d’une page Angular

Avant de foncer tête baissée dans le code, il faut d’abord s’intéresser à la structure proposée par Angular. Si on regarde la page par défaut proposée lors de la création du projet, on trouve quatre fichiers:

  1. app.component.html: contenu HTML de la page
  2. app.component.scss: contient les règles CSS pour la page
  3. app.component.spec.ts: contient les tests unitaires qui seront exécutés lors la compilation
  4. app.component.ts: définit le code Javascript de la page et faire le lien avec les trois autres fichiers

La structure proposée est saine et repose sur plusieurs bonnes pratiques (séparation des responsabilités, tests unitaires), ce qui facilite le développement en équipe.

Création de la page d’accueil

Pour créer une page, il faut ajouter un component avec la commande suivante: ng generate page-home

Cette commande va créer le dossier app/page-home et les fameux quatre fichiers évoqués tantôt.

A ce stade, il faut maintenant s’intéresser au fichier app/app.module.ts. En effet, c’est lui qui contient la liste des components et qui indique celui à charger par défaut.

Par défaut, le contenu du fichier app/app.module.ts est le suivant:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageHomeComponent } from './page-home/page-home.component';

@NgModule({
  declarations: [
    AppComponent,
    PageHomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Pour que la page d’accueil soit celle affichée par défaut, il suffit de remplacer la ligne bootstrap: [AppComponent] par bootstrap: [PageHomeComponent]

Ce n’est pas suffisant, il faut encore lier le component au tag principal. Pour cela, il faut modifier le fichier app/page-home.component.ts. Son contenu initial est le suivant:

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

@Component({
  selector: 'app-page.home',
  templateUrl: './page-home.component.html',
  styleUrls: ['./page-home.component.scss']
})
export class PageHomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

Il faut remplacer la ligne selector: 'app-page.home' par selector: 'app-root'

Intermède graphique

A ce stade, on n’a ni CSS ni web composants, autant dire que c’est la dèche et qu’on ne va pas avancer rapidement, tout en réinventant la roue à chaque élément. On va donc ajouter deux choses, à savoir le kit Angular Material UI et le framework Bulma (plus léger et tout aussi efficace que Bootstrap -IMHO-).

Ajout de Angular Material UI

Le kit Angular Material UI fournit un certain nombre de web composants (calendrier, toolbar, icônes, etc). Pour l’ajouter, il suffit d’exécuter la commande

ng add @angular/material

La réponse est la suivante (j’ai mis en bleu les réponses aux quelques questions posées durant l’installation):

ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@12.2.10.
✔ Package information loaded.
 
The package @angular/material@12.2.10 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1135 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (599 bytes)
UPDATE src/styles.scss (1597 bytes)
UPDATE src/index.html (575 bytes)

On constate qu’un fichier SCCS a été ajouté et contient un minimum de code à personnaliser.

Ajout de Bulma

Bulma est un framework CSS, qui propose de nombreuses classes utilitaires ainsi qu’un système de grille. C’est un très bonne alternative à Bootstrap. Pour l’installer, il faut utiliser la commande suivante:

npm install --save bulma

Puis il faut ajouter la ligne @import 'bulma/css/bulma.css'; dans le fichier style.scss (juste après @include mat.core();).

Fin de l’intermède graphique.

Ajout du contenu à la page

Dans le fichier app/page-home/page-home-component.html, on va ajouter le code HTML suivant:

<div class="dark-wrapper">
    <section class="hero is-fullheight is-transparent">
        <div class="hero-head">
        </div>
        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-5 landing-caption">
                        <h1 class="title is-1 is-light is-semibold is-spaced main-title">HomeGED</h1>
                        <h2 class="subtitle is-6 is-light is-thin">Organiser facilement vos documents</h2>
                        <p>
                            <a href="#" class="button is-primary is-fat is-bold is-rounded" tabindex="01">Connexion&nbsp;<i class="fas fa-sign-in-alt" aria-hidden="true"></i></a>
                            <a href="#" data-bind="click: gotoRegister" class="button is-fat is-bold is-rounded" tabindex="02">Inscription&nbsp;<i class="fas fa-user" aria-hidden="true"></i></a>
                        </p>
                    </div>
                    <div class="column is-7">
                        <figure class="image">
                            <img src="assets/page-home/home.jpg" alt="Librairie" class="ged-home-illu">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-foot">
            <div class="container">
                <div class="tabs is-centered"></div>
            </div>
        </div>
    </section>
</div>

On aura pris soin au préalable de copier la photo suivante (Auteur: Giammarco) dans le dossier assets/page-home, sous le nom home.jpg.

Du côté de la CSS, il faut ajouter la classe ged-home-illu dans le fichier style.scss:

.ged-home-illu {
    border: 1px solid #222222;
    border-radius: 6px;
}

Ensuite on compile avec la commande ng build puis on lance le rendu avec ng serve et on obtient cette page:

Angular: première page
Angular: première page

(Pour le fun: à ce stade, le projet occupe 628Mo…)

Les plus observateurs auront remarqué un bug: j’ai utilisé des icônes « Font Awesome » sur les deux boutons mais je n’ai pas chargé les CSS nécessaires. C’est normal et je vais expliquer pourquoi.

Utiliser de beaux pictogrammes

Pour ajouter Font Awesome, il faut exécuter la commande suivante:

ng add @fortawesome/angular-fontawesome@0.9.0

Il faudra choisir quels lots d’icônes installer (j’ai choisi les trois « free »: Free Solid, Free Regular et Free Brands). La réponse de la commande est celle-ci:

ℹ Using package manager: npm
✔ Package information loaded.
 
The package @fortawesome/angular-fontawesome@0.9.0 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose Font Awesome icon packages you would like to use: Free Solid Icons, Free Regular Icons, Free Brands Icons
    Formatting was skipped because tslint is not installed.
UPDATE package.json (1420 bytes)
UPDATE src/app/app.module.ts (692 bytes)
✔ Packages installed successfully.

Ensuite il faut éditer le fichier app/app.module.ts pour inclure le package FontAwesome. On obtient le fichier suivant:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageHomeComponent } from './page-home/page-home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    AppComponent,
    PageHomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [PageHomeComponent]
})
export class AppModule { }

Maintenant il faut ajouter les icônes dans notre component. D’abord on modifie le script app/page-home/page-home-component.ts en important les icônes nécessaires:

import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
import { faUser } from '@fortawesome/free-solid-svg-icons';

Puis, dans le même fichier, on exporte ces deux icônes:

export class PageHomeComponent implements OnInit {
  faSignInAlt = faSignInAlt;
  faUser = faUser;
}

Au final, le script complet est le suivant:

import { Component, OnInit } from '@angular/core';
import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
import { faUser } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './page-home.component.html',
  styleUrls: ['./page-home.component.scss']
})
export class PageHomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  faSignInAlt = faSignInAlt;
  faUser = faUser;
}

Maintenant on modifie la page HTML app/page-home/page-home-component.html et on remplace les deux tags <i class="fa... par deux <fa-icon [icon]=.... La page est alors la suivante:

<div class="dark-wrapper">
    <section class="hero is-fullheight is-transparent">
        <div class="hero-head"></div>
        <div class="hero-body">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-5 landing-caption">
                        <h1 class="title is-1 is-light is-semibold is-spaced main-title">HomeGED</h1>
                        <h2 class="subtitle is-6 is-light is-thin">Organiser facilement vos documents</h2>
                        <p>
                            <a href="#" class="button is-primary is-fat is-bold is-rounded" tabindex="01">Connexion&nbsp;<fa-icon [icon]="faSignInAlt"></fa-icon></a>
                            <a href="#" data-bind="click: gotoRegister" class="button is-fat is-bold is-rounded" tabindex="02">Inscription&nbsp;<fa-icon [icon]="faUser"></fa-icon></a>
                        </p>
                    </div>
                    <div class="column is-7">
                        <figure class="image">
                            <img src="assets/page-home/home.jpg" alt="Librairie" class="ged-home-illu">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
        <div class="hero-foot">
            <div class="container">
                <div class="tabs is-centered"></div>
            </div>
        </div>
    </section>
</div>

La page est alors transformée ainsi:

Angular: première page avec des icônes
Angular: première page avec des icônes

Alors, si jusque là j’étais plutôt conquis par Angular, je dois dire que le coup d’importer les icônes une par une dans le code JavaScript pour les rendre disponibles dans le HTML comme n’importe quelle variable est plutôt contre-intuitif et franchement lourd à manipuler. Je n’ose pas imaginer l’intégration d’un grand nombre de pictogrammes dans un component du genre menu principal.

Conclusion

La page n’est pas tout à fait terminée puisqu’il manque les liens sur les boutons. Mais honnêtement, après le coup des pictogrammes, j’hésite à continuer à développer avec Angular (Spoiler: et je n’ai pas encore parlé de changer les couleurs par défaut). Il me reste quand même à évaluer l’intégration dans un projet complet avec packaging en format WAR. A suivre donc.

Leave a Reply

Votre adresse e-mail ne sera pas publiée.

*

code