Angular

Définition
o Framework pour construire des applications clientes (front-end).

o Structure l’application, et simplifie ainsi programmation, la
maintenance et le débogage.
o Mise en place de tests simple
o Utilise TypeScript/Javascript, HTML, CSS
o Un Framework pour la gestion des dépendances et du cycle de vie
des composants.
oFournit un mécanisme de CLI puissant pour générer et configurer
un projet.
Angular
o Permet de créer la partie front end des applications web de type
SPA (Single Page Application réactive): une application qui contient
une seule page (index.html) récupérée du serveur.
o Pour naviguer entre les différentes partie de cette application, Java
Script est utilisé pour envoyer des requêtes http (AJAX) vers le
serveur pour récupérer du contenu dynamique généralement au
format JSON.
o Ce contenu JSON est ensuite affiché coté client au format HTML
dans la même page.
Angular
Angular & TypeScript
o Pour développer une application Angular il est recommandé
d’utiliser Type Script qui sera transcompilé en JavaScript.
o TypeScript est un langage de script structuré, orienté objet qui
permet de simplifier le développement d’applications Java Script.
Premier projet
o Installer : npm install -g @angular/cli
o Création : ng new FirstApp
o Exécution : ng serve
o Tester : http:// localhost:4200
Caractéristiques techniques
o Orienté-objet, Orienté-composants (Web Components).
o Fournit un Framework pour la gestion des dépendances et du
cycle de vie des composants.
o Orienté-Web (client-serveur, HTTP)
o Two-way data binding
o Routage
Structure du projet
Logique applicative de votre projet : Les

composants, Les services ..
Structure du projet
o Composant racine de l'application :

• app.component.ts : code de la classe
(comportement) du composant racine
• app.component.html : le modèle HTML du
composant)
• app.component.css : style, en CSS (configurable)
• app.component.spec.ts : spécifications / tests
o Module racine de l'application
• app.module.ts : définit les modules que votre
application utilisera
Structure du projet
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstApp</title>
<base href="/">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="icon" type="image/x-
icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Structure du projet
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic }
from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from
'./environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
Structure du projet
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'FirstApp';
}
Structure d’un projet
o Chaque rectangle représente un composant Angular, et il peut en

inclure d’autres.
o Intérêt des composants : réutilisables plusieurs fois, et permettent
de structurer le code plus facilement.
Composant Angular
o Un composant Angular contient principalement:
o un fichier TypeScript contenant :
o les données du composant,
o la logique/le comportement du composant.
o un fichier html
o contenant le code HTML affiché par le browser,
o des instructions pour interagir avec le code TypeScript.
o un fichier css contenant le style propre au composant.
oLe composant principal appelé app ou root (Répertoire src/app).
Architecture Angular
o Une application Angular se compose de :
• Un à plusieurs modules dont un est principal.
• Chaque module peut inclure :
q Des composant web : La partie IHM visible.
q Des services pour la logique applicative. Les composants
peuvent utiliser les services par injection de dépendances.
q Les directives : un composant peut utiliser des directives
q Les pipes : utilisés pour formater l’affichage des données
dans les composants.
Architecture Angular
o Une application Angular se compose de :
• Un à plusieurs modules dont un est principal.
• Chaque module peut inclure :
q Des composant web : La partie IHM visible.
q Des services pour la logique applicative. Les composants
peuvent utiliser les services par injection de dépendances.
q Les directives : un composant peut utiliser des directives
q Les pipes : utilisés pour formater l’affichage des données
dans les composants.
Modules Angular
o Les applications Angular sont modulaires, et possèdent leur propre
système de modularité appelé NgModules.
o Chaque application Angular possède au moins un module, celui du
module racine : AppModule
• est défini dans app.module.ts
• par une propriété bootstrap positionnée
• inclut les autres modules (éventuellement avec plusieurs
niveaux de profondeur)
o Un module angulaire est une classe avec décorateur @NgModule.
Modules Angular
o @NgModule est un décorateur qui prend en paramètre des
propriétés qui décrivent le module:
• declarations : la classe représentant le module, parmi les trois
possibilités:: components, directives, and pipes.
• exports : Pour exporter les classes utilisables dans d’autres
modules.
• imports – Pour importer d’autres modules.
• providers – Pour déclarer les fabriques de services.
• bootstrap – Pour déclarer le composant Racine du module.
Modules Angular
import { NgModule } from '@angular/core’;
import { BrowserModule } from '@angular/platform-browser’;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
o Le module racine est démarré dans le fichier main.ts

o Par défaut le module racine s’appelle AppModule.
Modules Angular
import { NgModule } from '@angular/core’;
import { BrowserModule } from '@angular/platform-browser’;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
o Pour créer un nouveau module:

ng generate module <name> [options]
Components
o Une classe qui possède le décorateur @Component
o Il possède les propriétés suivantes:
o Selector : permet d’insérer le composant dans le HTML. La
déclaration peut être :
• Le nom de la balise associé ce composant selector : app-xxx
le composant sera inséré par : <app-xxx></app-xxx>
Components
• Le nom de l’attribut associé au composant selector : [app-xxx]
Ainsi, le composant sera inséré par : <div app-xxx></div>
Components
• Le nom de l’attribut associé au composant selector : [app-xxx]
Ainsi, le composant sera inséré par : <div app-xxx></div>
• Le nom de la classe associée à ce composant selector:.app-xxx
le composant sera inséré par : <div class="app-xxx"></div>
Components
o template : permet de définir dans l’intérieur du décorateur le code
HTML représentant la vue du composant.
o templateUrl : permet d’associer un fichier externe HTML contenant
la structure de la vue du composant.
Components
o Les composants sont des éléments importants dans Angular.
o L’application est formée par un ensemble de composants.
o Chaque composant peut imbriquer d’autres composants
définissant ainsi une structuré hiérarchique.
o Le composant racine s’appelle Root Component
o Doit être déclaré dans le fichier app.module.ts
Components
o Chaque composant se compose principalement des éléments:
• HTML Template : représentant sa vue
• Une classe représentant sa logique métier
• Une feuille de style CSS
• Un fichier spec sont des tests unitaires Ils sont exécutés à l'aide
du Framework de test JavaScript Jasmine via le programme de
tâches Karma lorsque vous utilisez la commande 'ng test'.
o Les composants sont facile à mettre à jour et à échanger entre les
différentes parties des applications.
Components
du Framework de test JavaScript Jasmine via le programme de
o Dédiés à la présentation des données.
o Ne sont pas destinés à faire du traitement métier ou d'accès aux
BD, mais peuvent dépendre de services responsables de cela.
Components
du framework de test javascript Jasmine via le programme de
o Les composants sont facile à mettre à jour et à échanger entre les
différentes parties des applications.
Ajout de composants
o Pour créer facilement des composants Angular, on peut utiliser à
nouveau la commande ng comme suit :
ng generate component NomComposant
Crée les 4 fichiers du

composant, et ajoute le
composant
dans app.module.ts
Components : HTML
o Data Binding
• One-way data binding :
<h1>{{title}}</h1>
• Two-way data binding :

<input [(ngModel)]="hero.name" placeholder="name">
Il faudrait dans ce dernier cas faire un import :

import { FormsModule } from '@angular/forms';
Components : HTML
o Directives: Permettent de changer l'apparence / le comportement
d'un élément, à travers du code "non HTML" rajouté dans les
fichiers HTML.
• Templates de composants: permettant d'appeler un composant
<mon-composant></mon-composant>
• Attribute Directives : attributs HTML qui le modifient

<p appHighlight>Highlight me!</p>
• Structural directives : structures de contrôle (if, for...)

<div *ngIf="hero" class="name">{{hero.name}}</div>
Routage entre Component
o Dans une application web classique, on peut retrouver plusieurs
pages.
o Dans une SPA, on a plutôt des composants et non des pages.
o Angular propose le routage, pour faire appel aux différents
composants.
app.module.ts
import { RouterModule, Routes } from '@angular/router’;
…
const appRoutes: Routes = [
{ path: ‘url1', component: Component1 },
…
{ path: ’’, redirectTo: ‘/defaultUrl’, pathMatch: 'full’}
];
@NgModule({
declarations: [ … ],
imports: [ …, RouterModule.forRoot(appRoutes)],
providers: [ … ],
bootstrap: […]
})
app.module.ts
import { RouterModule, Routes } from '@angular/router’;
…
const appRoutes: Routes = [
…
{ path: ’’, redirectTo: ‘/defaultUrl’, pathMatch: 'full’}
Localhost:4200/url1
];
@NgModule({
declarations: [ … ],
imports: [ …, RouterModule.forRoot(appRoutes)],
providers: [ … ],
bootstrap: […] <router-oulet> <router-outlet>
})
DATA Binding
o Permet d’assurer la connectivité entre la UI (interface utilisateur)
avec la logique métier de l’application WEB.
o Directives: ngbind, ngmodel

o syntaxe {{ attribut }}
DATA Binding
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’] })
title = ’cours-angular’;
personne: Personne = new Personne(100, ‘Ahmed’, ’ALAOUI’ };
}
app.component.ts
app.component.html
<ul>
<li> Nom : {{ personne.nom }} </li>
<li> Prénom : {{ personne.prenom }} </li>
</ul>
DATA Binding
app.component.ts
@Component({
title = ’cours-angular’;
personne: Personne = new Personne(100, ‘Ahmed’, ’ALAOUI’ };
}
app.component.html
<ul>
<li> Nom : {{ personne.nom }} </li>
<li> Prénom : {{ personne.prenom }} </li>
</ul>
{{ personne }} affichera [Object Object ]
{{ personne | json }} affichera
{ "num": 100, "nom": "Ahmed", "prenom": »ALAOUI" }
DATA Binding
app.component.ts
@Component({
direBonjour(): string {
return ’bonjour Angular’;
}
}
app.component.html
{{direBonjour() }}
DATA Binding
o Pour utiliser la directive ngModel, il est nécessaire d’importer le
module FormsModule de Angular dans le app.module.ts.
…
import {FormsModule} from "@angular/forms";
@NgModule({
declarations: [
…
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
DATA Binding
o Angular fournit des directives spécifiques aux formulaires que
vous pouvez utiliser pour lier les données d'entrée du formulaire et
le modèle.
o Pour utiliser la directive ngModel, il est nécessaire d’importer le
module FormsModule de Angular dans le app.module.ts.
o Utiliser les directives de forme angulaire
comme ngModel, ngModelGroup et ngForm.
o Ajouter la validation à l'aide de validateurs intégrés.
o Afficher les erreurs de validation de manière significative.
o Gérer la soumission du formulaire à l'aide de ngSubmit.
DATA Binding
export class User {
id: number; email: string;
password: { pwd: string; confirmPwd: string; };
gender: string; terms: boolean;
constructor(values: Object = {}) {
Object.assign(this, values);
}
}
User.ts
DATA Binding
export class User {
id: number; email: string;
password: { pwd: string; confirmPwd: string; };
gender: string; terms: boolean;
constructor(values: Object = {}) {
Object.assign(this, values);
}
}
User.ts Authentification.Component.ts
export class SignupFormComponent implements OnInit
{
private user:User;
ngOnInit() {
this.user = new User({
email:"",
password: { pwd: "" , confirm_pwd: ""},
gender:"",
terms: false
});
}
}
DATA Binding
Authentification.Component.ts Authentification.Component.html
export class
SignupFormComponent
implements OnInit {
private user:User;
ngOnInit() {
this.user = new User({ <label for="select">
email:"", Gender
password: { </label>
pwd: "" , <select id="select">
confirm_pwd: "" <option value="Male">M</option>
}, <option value="Female">F</option>
gender: "", </select>
terms: false
});
}
}
DATA Binding
Authentification.Component.ts Authentification.Component.html
export class SignupFormComponent
implements OnInit {
private user:User;
private gender: string[];
ngOnInit() { <label for="select">
this.gender = Gender
['Male', 'Female']; </label>
this.user = new User({ <select id="select">
email:"", <option *ngFor = "let g of genders"
password: { [value] = "g">
pwd: "" , {{g}}
confirm_pwd: "" </option>
}, </select>
gender: "",
terms: false
});
}
}
DATA Binding
o Généralement, il faudrait lier les données du formulaire à l'objet de
classe utilisateur.
o Lorsque vous entrez les données dans le formulaire, un nouvel
objet Utilisateur soit créé pour stocker ces données
temporairement.
o Garder la vue synchronisée avec le modèle, et cela s'appelle la
liaison.
o plusieurs façons pour le réaliser : ngModel et ngForm.
DATA Binding
o ngForm et ngModel sont des directives angulaires essentielles à la
création de formulaires pilotés par des modèles.
o La directive NgForm complète l'élément form avec des
fonctionnalités supplémentaires.
o Il fournit les contrôles que vous avez créés pour les éléments avec
une directive ngModel et un attribut name et surveille leurs
propriétés, y compris leur validité.
o Également, Il possède sa propre propriété valid qui n'est vraie
que si tous les contrôles contenus sont valides.
DATA Binding
<form
class="form-horizontal"
#signupForm = "ngForm">
…
</form>
o #signupForm est une variable de référence de modèle qui fait
référence à la directive ngForm qui contrôle la totalité du
formulaire.
DATA Binding
<form
class="form-horizontal"
#signupForm = "ngForm">
…
</form>
o #signupForm est une variable de référence de modèle qui fait
référence à la directive ngForm qui contrôle la totalité du
formulaire.
<button
type="submit"
class="btn btn-success"
[disabled]="!signupForm.form.valid"> Envoyer </button>
DATA Binding
o La liaison du modèle et du modèle à travers ngModel dispose de
trois syntaxes différentes l’assurer:
[(ngModel)] [ngModel] ngModel
DATA Binding : [(ngModel)]
o [(ngModel)] effectue une liaison bidirectionnelle pour la
lecture/écriture des valeurs de contrôle d'entrée.
o Si la directive [(ngModel)] est utilisée, le champ d'entrée prend
une valeur initiale dans la classe du composant et la remet à jour à
chaque modification de la valeur du contrôle d'entrée.
export class signupFormComponent{
<form #signupForm="ngForm"> private user:User;
<input type="text" name="email" …
…
[(ngModel)] = "user.email" this.user= new User
id="inputEmail" ({email:"admin@test.ma",…});
name="email"
… …
> }
Directives Angular
o Plusieurs directives sont possibles:
• *ngFor
• *ngIf
• *ngSwitch
• ngStyle
• ngClass
o S’utilisent conjointement avec :
• ng-container
• ng-template
Directives Angular
• *ngFor

• *ngIf <ul>
<li *ngFor="let elt of tab">
• *ngSwitch {{ elt }}
</li>
• ngStyle </ul>
• ngClass
• ng-container
• ng-template
Directives Angular
• *ngFor

• *ngIf <ul>
<li *ngFor="let elt of tab" ; let i = index >
• *ngSwitch {{i}}:{{ elt }}
</li>
• ngStyle </ul> index as i
• ngClass
• ng-container
• ng-template
Directives Angular
• *ngFor
<ul>
• *ngIf <li *ngIf="tab[0] % 2 != 0">
{{ tab[0] }} est impair
• *ngSwitch </li>
</ul>
• ngStyle
• ngClass
• ng-container
• ng-template
Directives Angular
<ul>
• *ngFor <li *ngIf="tab[0] % 2 != 0; then si else sinon">
Ce code ne sera jamais pris en compte
• *ngIf </li>
<ng-template #si>
• *ngSwitch <li>
{{ tab[0] }} est impair
• ngStyle </li>
</ng-template>
• ngClass
<ng-template #sinon>
o S’utilisent conjointement avec : <li>
{{ tab[0] }} est pair
</li>
• ng-container
</ng-template>
• ng-template </ul>

Angular

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Angular

Transféré par

Droits d'auteur :

Formats disponibles

Définition

o Framework pour construire des applications clientes (front-end).

Logique applicative de votre projet : Les

o Composant racine de l'application :

o Chaque rectangle représente un composant Angular, et il peut en

o Le module racine est démarré dans le fichier main.ts

o Pour créer un nouveau module:

Crée les 4 fichiers du

• Two-way data binding :

Il faudrait dans ce dernier cas faire un import :

• Attribute Directives : attributs HTML qui le modifient

• Structural directives : structures de contrôle (if, for...)

o Directives: ngbind, ngmodel

Vous aimerez peut-être aussi