Bootstrap avec Angular 9

07/03/20 danny

Bootstrap est le le plus connu et le plus utilisé des Framework CSS.

Nous allons intégrer Bootstrap version 4.4.1 dans notre Application Web.

Nous utiliserons pour cela le framework javascript Angular version 9.0.5
 

Vous n'avez pas le temps de lire ce guide en entier,
Téléchargez le maintenant il est gratuit

Il vous suffira de quelques secondes

Oui ! je veux télécharger mon guide gratuit

Ce que nous allons faire

  • Qu'est ce que Bootstrap ?
    Nous allons parler de bootstrap et de son utilité dans les sites Web.
     
  • Création de notre projet Angular
    Nous utiliserons un projet existant contenant les fonctionnalités essentielles.
    Le projet a été généré avec Angular CLI et utilise le Routing et le Lazy Loading.
     
  • Prototype Bootstrap
    Pourquoi et comment créer un prototype Bootstrap ?
     
  • Intégration à notre projet angular
    Comment intégrer Bootstrap en utilisant Angular CLI ?
     
  • Effectuer les Tests
    Nous testerons notre application via les test unitaires et end-to-end intégrés dans Angular.
     
  • Code source
    Le code complet du projet Angular/Bootstrap sur github.

 


Qu'est ce que Bootstrap ?

Les pages d'un site web sont écrites en utilisant 3 types de langages informatiques (computer language en anglais)

  • Le langage HTML
    H
    yperText Markup Language (Langage de Balisage HyperText)
    il permet de créer et de représenter le contenu d'une page web et sa structure.
     
  • Le langage CSS
    Cascading Style Sheets (Feuilles de style en cascade)
    il est utilisé pour décrire la présentation d'une page.
     
  • Le langage Javascript
    Il permet de créer des fonctionnalités interactives dans la page.


De nombreux outils permettent de simplifier la vie d'un développeur.
Notamment les Frameworks CSS qui constituent en quelque sorte des boites à outils graphiques.

Les Framework CSS sont extrêmement nombreux, parmi ceux-ci nous pourrions citer

  • Foundation
  • Materialize CSS
  • Bootstrap
  • Pure

Bootstrap est l'un des framework CSS les plus connus et les plus utilisés.

Bootstrap est sous licence open source depuis 2011.
Son utilisation est donc gratuite.

Il permet de créer des sites responsive.
C'est à dire qu'il permet d'adapter un site web à toute sorte de périphériques (ordinateur, smartphone ou tablette).

La version actuelle est la version 4.4.1


Création du projet Angular

Pour pouvoir continuer ce tutoriel nous devons bien evidemment disposer de certains éléments

  • Node.js : La plateforme javascript
  • Git : Le logiciel de gestion de versions. 
  • Angular CLI : L'outil fourni par Angular.
  • Visual Studio code : Un éditeur de code.

Vous pouvez consulter le tutoriel suivant qui vous explique en détails comment faire


Nous allons utiliser un projet existant dont les caractéristiques sont

  • Genéré avec Angular CLI
  • Routing
  • Lazy loading

Vous pouvez installer ce projet sur votre poste de travail en utilisant les commandes suivantes.

# Créez un répertoire demo (le nom est ici arbitraire)
mkdir demo

# Allez dans ce répertoire
cd demo

# Récupérez le code source sur votre poste de travail
git clone https://github.com/ganatan/angular-example-lazy-loading.git

# Allez dans le répertoire qui a été créé
cd angular-example-lazy-loading

# Exécutez l'installation des dépendances (ou librairies)
npm install

# Exécutez le programme
npm run start

# Vérifiez son fonctionnement en lançant dans votre navigateur la commande
http://localhost:4200/

Pourquoi Créer un prototype Bootstrap ?

En simplifiant il y a 3 types de développeur Web

  • Frontend
  • Backend
  • Fullstack

On pourrait rajouter un 4ème métier

  • Web Designer


Toujours en simplifiant, les 3 premiers s'occupent de la partie logique et le quatrième de la partie graphique.

C'est pour cela que nous allons créer tout d'abord un prototype graphique.
Ce prototype servira de base à la phase de conception de votre site web.

Quelques raisons de ce choix.

  • Il est plus difficile et coûteux de faire des changements dans le code plutôt que dans un prototype.
  • Si vous êtes amené à travailler en équipe, il est plus facile de savoir qui fait quoi.
  • Il existe de nombreux outils de prototypage.
  • Il facilite l’évolution et l'amélioration de l’interface.
  • Il est plus rapide et facile de présenter un prototype à un éventuel client.

Donc.

Pour ce faire ll n'est pas utile de connaitre Angular.
Seule la connaisance de HTML,CSS et d'un peu de javascript sera nécessaire.


Il sera même possible de sous traiter à un partenaire Web Designer ou graphiste.

Ce sont certains des éléments de ce prototype que nous intégrerons à notre application Angular.

L'architecture de ce prototype et le choix des noms est bien sûr arbitraire.
Vous pouvez l'adapter à votre convenance.


Rapide résumé du prototypage

La conception d'un site web passera par plusieurs étapes.
L'une d'entre elles est le prototypage.
Le prototypage consiste à créer un exemplaire non définitif de ce que pourra être le produit final.
Il permet de concevoir une Interface Utilisateur ou UI (User Interface)

Il existe 2 étapes de prototypage.

  • Prototypage horizontal
    Créer une maquette statique.
    Dessiner un schéma (wireframe)
    Définir les zones et composants
     
  • Prototypage vertical
    Intégrer les fonctionnalités

Nous allons dans le cadre de ce tutoriel créer simplement une maquette statique.


Comment créer un prototype bootstrap ?

Histoire de comprendre ce que l'on fait, nous n'utiliserons aucun outil de prototypage.
Nous concevrons ce prototype manuellement et à partir de rien (from scratch).

Le répertoire qui contiendra ce prototype sera UI ou User Interface (pour Interface Utilisateur).

Une image va nous permettre d'avoir une vue d'ensemble de notre prototype au sein de notre application Angular.

Prototype Bootstrap

Passons à la pratique.
Nous allons chercher sur le web tous les éléments nécessaires que nous placerons dans l'arborescence de notre projet Angular.

Nous obtiendrons au final l'arborescence suivante.

|-- e2e/          ( contient les tests end-to-end angular)
|-- node_modules/          (contient les librairies node) 
|-- src/          (contient le code source de notre application angular) 
|-- ui/                    ( contient notre prototype bootstrap)
    |-- assets
        |-- bootstrap
            |-- css
            |-- js
        |-- fontawesome
            |-- css
            |-- js
            |-- webfonts
        |-- jquery
            |-- js
        |-- params
            |-- css
            |-- images
            |-- js
package.json

Les éléments du prototype

Dans le répertoire ui créez un répertoire assets.
Dans ce répertoire assets créez les 4 répertoires suivants

  • bootstrap
  • fontawesome
  • jquery
  • params

Récupérons les différents éléments utiles à notre prototype.

Les éléments de bootstrap

  • Allez sur le site de bootstrap (partie donwload)
    https://getbootstrap.com/docs/4.4/getting-started/download/
  • Téléchargez les fichiers compilés CSS et JS (compiled CSS et JS / download)
  • Le fichier qui nous intéresse est bootstrap-4.4.1-dist.zip
  • Unzippez le fichier bootstrap-4.4.1-dist.zip
  • Copiez les répertoires CSS et JS dans le répertoire ui / assets / bootstrap

Les éléments de jquery

  • Aller sur le site de jquery (partie download)
    https://jquery.com/download/
  • Allez sur Download the compressed, production jQuery 3.4.1
    Téléchargez le fichier compilé JS (jquery-3.4.1.min.js)
  • Copiez ce fichier dans le répertoire ui / assets / jquery / js

Les éléments de fontawesome

Remarque
Tous les fichiers installés ne seront pas utilisés.
Nous pouvons dans ce cas faire le ménage et ne laisser que l'essentiel.
Vous retouverez le résultat final sur le dépôt du code source indiqué en fin de tutoriel.


Notre première page Bootstrap

Nous allons créer notre première page en utilisant un exemple proposé par bootstrap.

Nous utiliserons Starter template sur la page des exemples
https://getbootstrap.com/docs/4.4/examples/

Lancez la page
https://getbootstrap.com/docs/4.4/examples/starter-template/

Si vous utilisez Chrome faites un clic droit sur la page et affichez le code source de la page.
Sauvegardez cette page sur ui en la renommant starter-template.html

Dans cette page un fichier css spécifique est utilisé
Cliquez sur le code starter-template.css

Et sauvegardez ce fichier dans ui / assets / params /  css

On va apporter quelques modifications dans le fichier starter-template.html pour qu'il fonctionne avec les éléments de notre arborescence.

Je vous donne le résultat des deux fichiers ci dessous.

ui/assets/params/css/starter-template.css
body {
  padding-top: 5rem;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}
ui/starter-template.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <title>Starter Template · Bootstrap</title>
  <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/params/css/starter-template.css" rel="stylesheet">

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
      aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container">

    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text
        and a
        mostly barebones HTML document.</p>
    </div>

  </main>

  <script src="assets/jquery/js/jquery-3.4.1.min.js"></script>
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

On teste notre première page

Si vous lancez ce fichier starter-template.html dans un navigateur vous verrez que la page s'affiche correctement.
Nous avons ainsi tous les éléments nécessaires pour tester bootstrap en modifiant directement notre page html.

C'est sur cette page que peut intervenir un Web Designer pour personnaliser le graphisme de vos pages.

Je vous livre une page home plus compléte avec utilisation des icones.
Vous disposez de quatre fichiers

  • home.html
  • home.css
  • index.css
  • index.js : permettant de faire fonctionner le menu en mode smartphone.

Sauvegardez le fichier home.html dans ui
Sauvegardez le fichier home.css dans ui / assets / params / css
Sauvegardez le fichier index.css dans ui / assets / params / css
Sauvegardez le fichier index.js dans ui / assets / params / js

N'oubliez pas de personnaliser le logo correspondant au fichier

  • assets/params/images/logo/ganatan.png

Vous retrouverez tous les éléments nécessaires dans le dépôt indiqué dans la partie Code Source en fin de tutoriel.

ui/assets/params/css/index.css
body {
  padding-top: 5rem;
  color: black;
  font-weight: 400;
}

.navbar {
  -webkit-box-shadow: 0 8px 6px -6px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
  box-shadow: 0 8px 6px -6px #999;
}

.app main, .app footer {
  padding-left: 1rem;
}

.footer {
  background: #3F729B;
  padding: 2em;
}
ui/assets/params/css/home.css
.card {
  display: block;
  background-color: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  border-radius: 2px;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
ui/assets/params/js/index.js
$(function () {
  var navMain = $("#navbarsExampleDefault");
  navMain.on("click", "a", null, function () {
    navMain.collapse('hide');
  });
});

Intégration de bootstrap dans angular

Passons maintenant à la partie logique.
Nous allons faire fonctionner cette page home dans notre projet Angular de base.

Tout d'abord il nous faut rajouter les librairies nécessaires.
On utilise pour cela npm (node package manager) le gestionnaire de dépendances de Nodes.js
 

# Rajout des dépendances dans package.json
npm install --save jquery
npm install --save bootstrap
npm install --save @fortawesome/fontawesome-free

Comme nous l'avons vu dans le tutoriel Démarrer avec angular nous modifierons les descripteurs de version de dépendances.

Concernant les dépendances et leur version la documentation npm est la suivante
https://docs.npmjs.com/files/package.json#dependencies

Ce qui nous donnera le résultat suivant.

package.json
    "@fortawesome/fontawesome-free": "5.12.1",
    "bootstrap": "4.4.1",
    "jquery": "3.4.1",
    "rxjs": "6.5.4",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"

Mise à jour

Réutilisons donc les éléments de notre prototype.
Copiez tout le répertoire params de notre prototype dans notre application angular au niveau de src/assets

Nous allons modifier le fichier angular.json afin d'appeler les fichiers nécessaires au fonctionnement de nos pages html.

Fichiers de mise en forme css

  • index.css (spécifique à notre projet via params)
  • all.min.css (spécifique à fontawesome via node_modules)
  • bootstrap.min.css (spécifique à bootstrap via node_modules)


Fichiers des scripts javascript

  • jquery.min.js (spécifique à fontawesome via node_modules)
  • bootstrap.min.js(spécifique à bootstrap via node_modules)
  • index.js (spécifique à notre projet via params)
angular.json
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angular-starter",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css",
      "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/assets/params/css/index.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "src/assets/params/js/index.js"
    ]
  },
  
src/assets/params/css/index.css
body {
    padding-top: 5rem;
    color: black;
    font-weight: 400;
  }
  
  .navbar {
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;
  }
src/assets/params/js/index.js
$(function () {
  var navMain = $("#navbarsExampleDefault");
  navMain.on("click", "a", null, function () {
    navMain.collapse('hide');
  });
});

Nous allons modifier les fichiers suivants qui contiendront la nouvelle interface

  • app.component.html
  • app.component.css
  • home.component.html
  • home.component.ts
  • home.component.css
  • environment.prod.ts
  • environment.ts
  • app.component.spec.ts
  • about.css
  • signin.css
  • contact.css

Nous rajouterons les images utilisées dans le répertoire assets/params/images/logo

  • ganatan.png
src/app/app.component.html
<div class="app">

  <header>
    <nav class="navbar navbar-expand-md fixed-top navbar-dark " style="background-color: #212121;">
      <a class="navbar-brand" routerLink="/">
        <span class="mr-1" style="color:white">ganatan</span>
        <img src="./assets/params/images/logo/ganatan.png" width="20" height="20" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
        aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" routerLink="/">
              <i class="fas fa-home mr-1"></i>home
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" routerLink="/about">
              <i class="far fa-question-circle mr-1"></i>About
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" routerLink="/contact">
              <i class="fas fa-envelope mr-1"></i>Contact
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" routerLink="/signin">
              <i class="fas fa-user mr-1"></i>Sign in
            </a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="https://github.com/ganatan">
              <i class="fab fa-github mr-1"></i>Github
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <main>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </main>

  <div class="footer">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p class="text-center text-white">&copy; 2020 - www.ganatan.com</p>
        </div>
      </div>
    </div>
  </div>
src/app/app.component.css
.app main, .app footer {
  padding-left: 1rem;
}

.footer {
  background: #3F729B;
  padding: 2em;
}
src/app/modules/general/home/home.component.html
<div class="row pt-1 mb-2">
  <div class="col-md-3 text-center mb-2">
    <h1 class="h5">
      <i class="fas fa-laptop fa-lg mr-2 text-primary"></i>
      {{ name }}
      <i class="fas fa-mobile-alt fa-lg ml-2 mr-1 text-primary"></i>
      <i class="fas fa-tablet-alt fa-lg ml-2 mr-1 text-primary"></i>
    </h1>
  </div>
  <div class="col-md-3 text-center text-danger">
    <h2 class="h5">
      {{ angular }}<i class="fab fa-angular fa-lg ml-2 mr-1 text-danger"></i>
    </h2>
  </div>
  <div class="col-md-3 text-center text-primary">
    <h2 class="h5">
      {{ bootstrap }}<i class="fab fa-bootstrap fa-lg ml-2 mr-1 text-primary"></i>
    </h2>
  </div>
  <div class="col-md-3 text-center text-warning">
    <h2 class="h5">
      {{ fontawesome }}<i class="fab fa-font-awesome-flag fa-lg ml-2 mr-1 text-warning"></i>
    </h2>
  </div>
</div>
<hr>
<div class="row mb-1">
  <div class="col-md-12 text-center">
    <h3 class="h6">Features&nbsp;&nbsp;<i class="fas fa-list"></i></h3>
  </div>
</div>

<div class="row pt-2">
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
    <div class="card bg-light mb-3">
      <div class="card-header">
        <div class="row">
          <div class="col-10 col-xl-10">
            <h5 class="card-title">Components</h5>
          </div>
          <div class="col-2 col-xl-2">
            <i class="fas fa-share-alt-square fa-lg text-primary"></i>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Define and control views</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
    <div class="card bg-light mb-3">
      <div class="card-header">
        <div class="row">
          <div class="col-10 col-xl-10">
            <h5 class="card-title">Services</h5>
          </div>
          <div class="col-2 col-xl-2">
            <i class="far fa-address-card fa-lg text-primary"></i>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">A great way to share information among classes</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
    <div class="card bg-light mb-3">
      <div class="card-header">
        <div class="row">
          <div class="col-10 col-xl-10">
            <h5 class="card-title">Directives</h5>
          </div>
          <div class="col-2 col-xl-2">
            <i class="fas fa-text-width fa-lg text-primary"></i>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Change the appearance or behavior of a DOM element</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
    <div class="card bg-light mb-3">
      <div class="card-header">
        <div class="row">
          <div class="col-10 col-xl-10">
            <h5 class="card-title">Pipes</h5>
          </div>
          <div class="col-2 col-xl-2">
            <i class="fas fa-code fa-lg text-primary"></i>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Write display-value transformations</p>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
    <div class="card bg-light mb-3">
      <div class="card-header">
        <div class="row">
          <div class="col-10 col-xl-10">
            <h5 class="card-title">Observables</h5>
          </div>
          <div class="col-2 col-xl-2">
            <i class="far fa-comment-alt fa-lg text-primary"></i>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Provide support for passing messages between publishers and subscribers</p>
      </div>
    </div>
  </div>
</div>
src/app/modules/general/home/home.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../environments/environment';

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

  name = environment.application.name;
  angular = environment.application.angular;
  bootstrap = environment.application.bootstrap;
  fontawesome = environment.application.fontawesome;

  constructor() { }

  ngOnInit() {
  }

}
src/app/modules/general/home/home.component.css
.card {
    display: block;
    background-color: rgba(255, 255, 255, .8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    border-radius: 2px;
    transition: all .2s ease-in-out;
    cursor: pointer;
  }
  
  .card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  }
  
src/environments/environments.ts
export const environment = {
  production: false,
  application:
  {
    name: 'angular-starter',
    angular: 'Angular 9.0.5',
    bootstrap: 'Bootstrap 4.4.1',
    fontawesome: 'Font Awesome 5.12.1',
  }
};
src/environments/environments.prod.ts
export const environment = {
  production: true,
  application:
  {
    name: 'angular-starter',
    angular: 'Angular 9.0.5',
    bootstrap: 'Bootstrap 4.4.1',
    fontawesome: 'Font Awesome 5.12.1',
  }
};
src/app/app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angular-starter'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angular-starter');
  });

});
src/app/modules/general/about/about.html
<p class="text-center">about works!</p>
src/app/modules/general/contact/contact.html
<p class="text-center">contact works!</p>
src/app/modules/general/signin/signin.html
<p class="text-center">signin works!</p>
src/app/modules/general/not-found/not-found.html
<p class="text-center">not-found works!</p>

Tests

Il ne reste plus qu'à tester les différents scripts Angular.

# Développement
npm run start
http://localhost:4200/

# Tests
npm run lint
npm run test
npm run e2e

# Compilation
npm run build

Code source

En suivant chacun des conseils que je vous ai donnés dans ce guide vous obtenez au final un code source Angular.

Le code source obtenu à la fin de ce tutoriel est disponible sur github
https://github.com/ganatan/angular-example-bootstrap



L' étape suivante va nous permettre d'améliorer notre structure.
Le tutoriel complet est à l'adresse suivante

Les étapes suivantes vous permettront d'obtenir une application prototype


La dernière étape permet d'obtenir un exemple d'application


Le code source de cette application finale est disponible sur GitHub
https://github.com/ganatan/angular9-app

 

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos 4 guides complets
Démarrez avec angular CLI
Gérez le routing
Appliquez le Lazy loading
Intégrez Bootstrap

Ganatan site Web avec Angular