Bootstrap avec Angular 8

14/11/19 dannyEnglish Version

Qu’allons nous faire ?

Nous allons intégrer Bootstrap dans notre Application Web.
Nous utiliserons pour cela le framework javascript Angular version 8.2.14

Il s'agit de l'étape 4 de notre guide Angular qui nous permettra d'obtenir une Application Web de type PWA.
Nous allons utiliser un projet existant dont les caractéristiques sont

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

Tous les sources créés sont indiqués en fin de tutoriel.

L' application est à l'adresse suivante 


Avant de commencer

Les pages d'un site web sont écrites en utilisant 3 langages

  • HTML : il permet de créer et de représenter le contenu d'une page web et sa structure.
  • CSS : il est utilisé pour décrire la présentation d'une page.
  • 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 Frontend.
Notamment les Frameworks CSS qui constituent en quelque sorte des boites à outils.

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.


Installation

Bootstrap est sous licence open source depuis 2011.

La version actuelle est la v 4.3.1
Le site bootstrap est le suivant https://getbootstrap.com/

Nous utiliserons une interface classique, le but n'étant pas ici de développer du code html et css.
Pour avoir plus de détails sur Bootstrap vous pouvez utiliser le tutoriel suivant

Le code exemple que nous allons utiliser est le bootstrap starter template proposé sur le site de bootstrap
https://getbootstrap.com/docs/4.3/examples/starter-template/

Pour les icônes Bootstrap préconise certaines librairies nous opterons pour Font Awesome
https://getbootstrap.com/docs/4.3/extend/icons/

Nous allons rajouter les dépendances nécessaires

  • Jquery version 3.4.1
  • Bootstrap version 4.3.1
  • Fontawesome version 5.11.2

Les dernières versions de ces outils sont disponibles ci-dessous

Après la mise à jour nous modifierons les descripteurs dans package.json

# Rajout des dépendances dans package.json
npm install --save jquery
npm install --save bootstrap
npm install --save @fortawesome/fontawesome-free
package.json
    "@fortawesome/fontawesome-free": "5.11.2",
    "bootstrap": "4.3.1",
    "jquery": "3.4.1",
    "rxjs": "6.5.3",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"

Mise à jour

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

  • styles.css (spécifique à notre projet)
  • font-awesome.css
  • bootstrap.min.css


Fichiers des scripts javascript

  • jquery.min.js
  • bootstrap.min.js
  • index.js (spécifique à notre projet)
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"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "src/assets/params/js/index.js"
    ]
  },
  
src/styles.css
body {
  color: black;
  font-weight: 400;
  padding-top: 5rem;
}
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
  • home.component.html
  • home.component.ts
  • environment.prod.ts
  • environment.ts
  • app.component.spec.ts

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

  • ganatan.png
  • bootstrap.png
  • angular.png
src/app/app.component.html
<header>
  <nav class="navbar navbar-expand-md fixed-top navbar-dark " style="background-color: #212121;">
    <a class="navbar-brand" routerLink="/">
      <span 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>
      </ul>
    </div>
  </nav>
</header>

<main>
  <div class="container-fluid">
    <router-outlet></router-outlet>
  </div>
</main>
src/app/modules/general/home/home.component.html
<div class="row">
  <div class="col-md-12 text-center">
    <div class="row pt-1 mb-2">
      <div class="col-md-4 text-center mb-2">
        <h1 class="h5">
          <i class="fab fa-android fa-lg mr-2 text-primary"></i>
          {{ name }}<i class="fab fa-apple fa-lg ml-2 mr-1 text-primary"></i>
        </h1>
      </div>
      <div class="col-md-4 text-center">
        <h2 class="h5">{{angular}}&nbsp;&nbsp;<img src="./assets/params/images/logo/angular.png" width="36" height="36"
            alt=""></h2>
      </div>
      <div class="col-md-4 text-center">
        <h2 class="h5">{{bootstrap}}&nbsp;&nbsp;<img src="./assets/params/images/logo/bootstrap.png" width="28"
            height="28" alt=""></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>
    <p>
      home works!
    </p>
  </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;

  constructor() { }

  ngOnInit() {
  }

}
src/environments/environments.ts
export const environment = {
  production: false,
  application:
  {
    name: 'angular-starter',
    angular: 'Angular 8.2.14',
    bootstrap: 'Bootstrap 4.3.1',
  }
};
src/environments/environments.prod.ts
export const environment = {
  production: true,
  application:
  {
    name: 'angular-starter',
    angular: 'Angular 8.2.14',
    bootstrap: 'Bootstrap 4.3.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.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

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

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

Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée