Modules avec Angular 11

17/04/21 danny

Angular est un Framework Typescript.

Il permet d ' utiliser la notion de modules.

Cette fonctionnalité a été intégré au langage javascript avec ECMAScript 6
Elle permet de gèrer des projets complexes.

Nous allons voir comment utiliser et comprendre les modules avec Angular.

Ce que nous allons faire

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.
Il utilise le Routing et le Lazy Loading.
Il intègre le Framework CSS Bootstrap.
Qu'est ce que l'interpolation
Comment fonctionne l'interpolation.
Intégration à notre projet angular
Comment gèrer l'architecture Angular 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.

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

https://www.ganatan.com/tutorials/demarrer-avec-angular

Ce tutoriel constitue la suite du tutoriel
https://www.ganatan.com/tutorials/bootstrap-avec-angular

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

Genéré avec Angular CLI
Routing
Lazy loading

Auquel nous avions rajouter l'utilisation du Framework CSS.

Nous allons finaliser ce projet en intégrant la notion d'interpolation.

Interpolation sur les features

Utilisation de l'interpolation sur Home.

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" *ngFor="let feature of features">
    <div class="card bg-light mb-3">
      <a routerLink="/{{ feature.link }}">
        <div class="card-header">
          <div class="row">
            <div class="col-10 col-xl-10">
              <h5 class="card-title">{{ feature.name }}</h5>
            </div>
            <div class="col-2 col-xl-2">
              <i class="fas {{ feature.icon }} fa-lg text-primary"></i>
            </div>
          </div>
        </div>
        <div class="card-body">
          <p class="card-text">{{ feature.description }}</p>
        </div>
      </a>
    </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;

  features: any;

  constructor() {
    this.features =
      [
        {
          name: 'Bootstrap prototype',
          description: 'Bootstrap Prototype Description',
          icon: 'fab fa-bootstrap',
          link: 'bootstrap-prototype'
        },
        {
          name: 'Reactive Form',
          description: 'Reactive Form Description',
          icon: 'fab fa-bootstrap',
          link: 'reactive-form'
        },
        {
          name: 'Services',
          description: 'Services Description',
          icon: 'fab fa-bootstrap',
          link: 'services'
        },
        {
          name: 'Components',
          description: 'Components Description',
          icon: 'fab fa-bootstrap',
          link: 'components'
        },
        {
          name: 'Template Driven Forms',
          description: 'Template Driven Forms Description',
          icon: 'fab fa-bootstrap',
          link: 'template-driven-forms'
        },
      ];

  }

  ngOnInit(): void {
  }

}

src/app/modules/general/home/home.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './modules/general/home/home.component';
import { NotFoundComponent } from './modules/general/not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent, },
  {
    path: 'template-driven-forms',
    loadChildren: () => import('./modules/application/example-template-driven-forms/tutorial.module')
      .then(mod => mod.TutorialModule)
  },
  {
    path: 'components',
    loadChildren: () => import('./modules/application/example-components/tutorial.module')
      .then(mod => mod.TutorialModule)
  },
  {
    path: 'services',
    loadChildren: () => import('./modules/application/example-services/tutorial.module')
      .then(mod => mod.TutorialModule)
  },
  {
    path: 'reactive-form',
    loadChildren: () => import('./modules/application/example-reactive-form/tutorial.module')
      .then(mod => mod.TutorialModule)
  },
  {
    path: 'bootstrap-prototype',
    loadChildren: () => import('./modules/application/example-bootstrap-prototype/example-bootstrap-prototype.module')
      .then(mod => mod.ExampleBootstrapPrototypeModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./modules/general/contact/contact.module')
      .then(mod => mod.ContactModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./modules/general/about/about.module')
      .then(mod => mod.AboutModule)
  },
  {
    path: 'signin',
    loadChildren: () => import('./modules/general/signin/signin.module')
      .then(mod => mod.SigninModule)
  },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

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

L' étape suivante va nous permettre d'intégrer des composants dans notre application.
Le tutoriel complet est à l'adresse suivante