Tutoriels Backend
Modules avec Angular 11
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
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.
<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 <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>
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 {
}
}
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();
});
});
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-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
- Etape 1 : Démarrer avec Angular
- Etape 2 : Routing avec Angular
- Etape 3 : Lazy loading avec Angular
- Etape 4 : Bootstrap avec Angular
- Etape 5 : Modules avec Angular
- Etape 6 : Components avec Angular
- Etape 7 : Services avec Angular
- Etape 8 : Template Driven Forms avec Angular
- Etape 9 : Charts avec Angular
- Etape 10 : Server Side Rendering avec angular
- Etape 11 : HttpClient avec Angular
- Etape 12 : Transfer State avec Angular
- Etape 13 : Progressive Web App avec Angular
- Etape 14 : Search Engine Optimization avec Angular
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/angular10-app
Comment créer une application From scratch ?
Créez votre compte ganatan
Téléchargez gratuitement vos 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 
