FRAMEWORK
ANGULAR :
CONCEPTS DE BASE
DIGISEM USA
1
PLAN
• Présentation du Framework Angular,
• Installations de l’environnement de développement,
• Création d’un premier projet Angular,
• Structure d’un projet Angular.
• Comprendre Angular
2
ARCHITECTURE WEB
• Une application Web se compose de deux parties :
• Le Backend : s’occupe des traitements coté
serveur :
• Technologies : PHP, JEE, .Net, Node JS
• Le Frontend : s’occupe de la présentation coté
client :
• Technologies : HTML, CSS, Java Script
3
ANGULAR FRAMEWORK
Angular permet de créer la partie frontend
des applicaions web de type SPA(Single Page
Application),
Une SPA contient une seule page HTML
([Link]),
Pour naviguer entre les différentes parties de
l’application, JS est utilisé pour envoyer des
requêtes http (AJAX) vers le serveur pour
récupérer du contenu dynamique au format
JSON,
Ce contenu JSON sera affiché coté client, dans
la même page, en utilisant HTML et CSS 4
VERSIONS DE ANGULAR
Angular I (Angular JS)
◦ Première version de Angular,
◦ Architecture MVC, langage utilisé Java Script,
Angular 2+ (Angular )
◦ Applications utilisent le langage Type script (langage
OO), qui est compilé et traduit en JS avant d’être exécuté
les navigateurs,
◦ Angular 2+ : la programmation est basée sur les
composants Web
5
ANGULAR :INSTALLATIONS
Pour créer des applications Angular, il faut
installer les outils suivants :
◦ Node JS : [Link]
◦ Node JS installe l’exécutable npm (Node Package Manager) qui permet
de télécharger et installer des bibliothèques JS,
Installer ensuite Angular CLI (Command Line
Interface) qui permet de créer, compiler, tester et
déployer des projets angular :
[Link]
◦ npm install –g @angular/cli
6
CRÉATION D’UN PROJET
ANGULAR
Pour créer un nouveau projet Angular :
◦ ng new MonProjet
Cette commande génère les différents
fichiers nécessaires à une application
basique Angular et installe également les
packages requis par le projet.
7
EXÉCUTION D’UN PROJET
ANGULAR
Pour exécuter un projet Angular, on accède au
dossier du projet puis on lance :
◦ ng serve
Cette commande compile le code source du
projet pour le convertir le code Type Script en
JS en plus elle démarre un serveur Web local
basé sur NodeJS pour déployer localement
l’application,
Pour tester le projet généré, il suffit de taper :
[Link] 8
EDITER UN PROJET
Installer l’éditeur de
ANGULAR
code extensible
« Microsoft Visual
Studio Code » :
[Link]
[Link]/download
Pour éditer un projet
Angular avec VS Code,
on accède au dossier
du projet puis on lance :
◦ Code .
◦ Ou File/Open Folder…
9
STRUCTURE D’UN PROJET
ANGULAR
Fichiers de Configuration du projet
Dépendances externes du projet
(Librairies JS et CSS)
Logique applicative du projet : Les
composants, les services,…
Le code source du projet
Fichiers de Configuration du 10
projet
ETAPES D’EXÉCUTIONS
Navigateur Web :
localhost:4200
[Link]
AppModule ([Link])
AppComponent ([Link])
Type Script
HTML
M V
Data
CSS
Binding
[Link]
Angular Framework 11
STRUCTURE D’UN PROJET
ANGULAR
[Link]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MonProjet</title>
<base href="/">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<link rel="icon" type="image/x-
icon" href="[Link]">
</head>
<body>
<app-root></app-root>
</body>
</html>
12
STRUCTURE D’UN PROJET
ANGULAR
[Link]
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from
'@angular/platform-browser-dynamic';
import { AppModule } from './app/[Link]';
import { environment } from './environments/environment';
if ([Link]) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => [Link](err));
13
STRUCTURE D’UN PROJET
ANGULAR
[Link]
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from
'./[Link]';
import { AppComponent } from './[Link]';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
14
STRUCTURE D’UN PROJET
ANGULAR
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
title = 'MonProjet';
}
[Link]
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
[Link]
Utilisé pour les tests unitaires avec le framework
de test java script Jasmine (ng test)
15
[Link]
COMPRENDRE ANGULAR
Pour comprendre les capacités du Framework Angular, vous
devez connaître les éléments suivants :
➢ Composants
➢ Modèles
➢ Directives
➢ Injection de dépendances
Les rubriques de cette section expliquent ces fonctionnalités
et concepts, ainsi que la manière dont vous pouvez les utiliser.
16
LES COMPOSANTS
ANGULAIRES
Les composants sont les principaux éléments constitutifs des
applications angulaires. Chaque composant est composé de :
➢Un modèle HTML qui déclare ce qui s'affiche sur la page
➢Une classe TypeScript qui définit le comportement
➢Un sélecteur CSS qui définit la manière dont le composant est utilisé
dans un modèle
➢En option, styles CSS appliqués au modèle
Création d’un composant
Pour créer un composant à l'aide de la CLI angulaire :
[Link] une fenêtre de terminal, accédez au répertoire
contenant votre application.
[Link]écutez la commande, ng generate component <component-
name>
Où <component-name>est le nom de votre nouveau composant.
17
LES COMPOSANTS
ANGULAIRES
Par défaut, cette commande crée les éléments
suivants :
•Un répertoire nommé d'après le composant
•Un fichier composant,<component-name>.[Link]
•Un fichier modèle,<component-name>.[Link]
•Un fichier CSS,<component-name>.[Link]
•Un fichier de spécifications de tests,<component-
name>.[Link]
Où <component-name>est le nom de votre composant.
18
