Modules avec Angular

04/08/20 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.
 

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


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: 'Components',
          description: 'Define and control views',
          icon: 'fa-share-alt-square',
          link: 'components'
        },
        {
          name: 'Services',
          description: 'A great way to share information among classes',
          icon: 'fa-address-card',
          link: 'services'
        },
        {
          name: 'HttpClient',
          description: 'HttpClient',
          icon: 'fa-comment-alt',
          link: 'httpclient'
        },
        {
          name: 'Directives',
          description: 'Change the appearance or behavior of a DOM element',
          icon: 'fa-text-width',
          link: 'directives'
        },
        {
          name: 'Pipes',
          description: 'Write display-value transformations',
          icon: 'fa-code',
          link: 'pipes'
        },
        {
          name: 'RxJS/Observables',
          description: 'Provide support for passing messages between publishers and subscribers',
          icon: 'fa-comment-alt',
          link: 'observables'
        },
        {
          name: 'modal',
          description: 'Add dialogs to your site',
          icon: 'fa-comment-alt',
          link: 'modal'
        },
        {
          name: 'Reactiveform',
          description: 'Create Reactive Form',
          icon: 'fa-comment-alt',
          link: 'reactiveform'
        },
        {
          name: 'Template Driven Form',
          description: 'Create Template Driven Form',
          icon: 'fa-comment-alt',
          link: 'templatedriven'
        },
      ];

  }

  ngOnInit() {
  }

}
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();
  });
});

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'intégrer des composants dans notre application.
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 7 guides complets

Démarrez avec angular CLI

Gérez le routing

Appliquez le Lazy loading

Intégrez Bootstrap


Utilisez Python avec Angular

Utilisez Django avec Angular

Utilisez Flask avec Angular

Ganatan site Web avec Angular