1'

nez-vous à DeepL Pro pour éditer ce document.

Visitez www.DeepL.com/pro pour en savoir plus.
drive.google.com/drive/

2'

Introduction
Développement Angulaire
 3'

Aperçu

1 Qu'est-ce qu'un pourquoi

Angular

2 Quand ne pas

3 Le comparatisme

4 Se mettre au travail !

5 Création d'une application

 4'

1 Pourquoi Angular ?
La documentation officielle décrit Angular comme un cadre de conception d'applications et une plateforme de
développement permettant de créer des applications à page unique efficaces et sophistiquées. Il a été publié
pour la première fois en 2010 en tant que nouveau framework dans l'espace MV*, aux côtés de bibliothèques
telles que Backbone, Knockout et Dojo. Pourquoi l'utiliser ?
1. Un cadre d'opinion
Les développeurs doivent prendre de nombreuses décisions au quotidien, ce qui peut souvent créer
une certaine lassitude. L'avantage de l'utilisation d'un framework d'opinion est qu'il permet de passer
des configurations de construction, des décisions d'architecture de haut niveau, à l'écriture des
éléments fonctionnels de l'application qui sont spécifiques au client.
Les meilleures pratiques se développent après que suffisamment d'erreurs ont été commises et que
les meilleures solutions connues ont été mises en lumière. Angular vous impose ces solutions afin
de maintenir un sentiment de cohésion dans la façon dont les choses sont faites.
Par conséquent, une application Angular doit être écrite d'une certaine manière pour que les choses
fonctionnent correctement. Bien que cela puisse sembler rigide, l'avantage majeur est qu'une fois
que vous avez appris les structures, toutes les applications Angular que vous rencontrerez auront
quelque chose de similaire.
 5'

1 Pourquoi Angular ?
2. L'interface de programmation Angular
L'interface de programmation a beaucoup évolué au fil des ans, générant des modèles simples qui
utilisent les meilleures pratiques et structures.
À mesure que le développement frontal gagne en complexité, le CLI est un outil qui permet de
mettre les choses en place et de les faire fonctionner beaucoup plus rapidement grâce à des
générations de modèles dans les espaces dont vous avez besoin et que vous souhaitez. Le CLI
d'Angular est robuste avec la capacité de générer du code sur l'échafaudage généré, ce qui le rend
très flexible lors de l'ajout de nouvelles logiques et de nouveaux composants dans l'application.
3. Architecture à base de composants. Dans la deuxième version, Angular est passé d'une architecture MVC à
une architecture à base de composants. Selon cette architecture, une application est divisée en composants
logiques et fonctionnels indépendants. Ces composants peuvent être facilement remplacés, découplés et
réutilisés dans d'autres parties de l'application. En outre, l'indépendance des composants facilite le test d'une
application web et permet de s'assurer que chaque composant fonctionne de manière transparente.
4. SPA de la construction
Angular est un outil puissant pour la construction d'applications web dynamiques et riches, sa liaison
de données permet très facilement de mettre à jour dynamiquement le contenu et les entrées de
l'utilisateur.
 6'

1 Pourquoi Angular ? [Suite]

Cela peut ne pas être très utile lors de la création d'applications dont le contenu des pages n'a pas
besoin d'être régulièrement mis à jour.
Angular est le meilleur outil pour créer de puissantes applications à page unique (SPA), qui
permettent à l'utilisateur de rester dans un flux de type application.
L'utilisation d'outils et de pratiques de développement puissants.
4. Essais de type "out of box
L'ouverture d'un nouvel espace de travail Angular crée automatiquement une suite de tests, avec
une configuration de karma fonctionnelle et de nouveaux fichiers de spécifications de tests pour tous
les composants générés.
5. Webpack
Webpack est un bundler de modules qui gère également les ressources de transformation, comme
Less ou Typescript. Angular rationalise le processus de construction en masquant la complexité de
la configuration de Webpack avec la CLI d'Angular.
6. Produit soutenu par Google
Le fait d'avoir un titan technologique lourd qui soutient une bibliothèque peut en faire un choix très
durable.
7. Autres [Développement d'applications mobiles avec nativescript, etc.]
 7'

2 Quand ne pas le faire ?

1. Le référencement est-il très important ?
Les pages Angular sont peu accessibles aux scrapers et aux robots de recherche. Comme chaque page est entièrement assemblée avec du
JavaScript côté client, tout client qui n'exécute pas de code JS ne verrait que le modèle de base de la page. Nous pouvons fournir une vue
du site aux robots à l'aide d'outils tels que PhantomJS, mais cela implique de faire fonctionner un système complexe et sujet aux erreurs,
largement séparé du fonctionnement normal du site.

2. Structure de l'ASP
Lorsque les applications construisent un site web ou une application qui ne correspond pas au modèle SPA, Angular n'est pas une bonne
décision.

3. Essais lourds
Comme un site Angular effectue pratiquement tout son traitement sur le client, la logique de génération de page est exposée aux différences
entre les implémentations des différents navigateurs. Alors qu'Angular lui-même est conçu pour fournir une plateforme cohérente sur tous les
navigateurs, les subtilités dans l'ordre des événements et le rendu des pages sont amplifiées en effectuant toute la génération de page sur le
client en même temps que les fonctionnalités d'interaction, ce qui exige que chaque aspect de la génération de page soit vérifié sur tous les
navigateurs cibles.

4. Repli des performances médiocres

La génération de pages côté client limite fortement les performances du site, tant réelles qu'apparentes. Les modèles étant chargés à l'aide
de JavaScript côté client, aucun contenu n'est visible tant que le site n'est pas entièrement chargé et que les multiples requêtes Ajax ne sont
pas terminées. Si un visiteur utilise un navigateur non pris en charge par Angular, tel qu'Internet Explorer 8 ou une version antérieure, le site
ne se chargera pas du tout, ne laissant qu'une page blanche. De même, le rendu de la page échouera complètement pour les utilisateurs
dont le Javascript est désactivé. Fournir un contenu de repli dans cette situation nécessiterait de construire un fac-similé complet du site
côté serveur, ce qui représenterait une énorme duplication des efforts.

5. Système simple et de petite taille ? Démonstration rapide ? [Non non]

6. Avez-vous aimé l'indépendance ?
 8'

3 Le comparatisme
Critères Angulaire VueJS Réagir

Maintenance Google Communauté Facebook

Basé sur TS/JS TS JS JS

Communauté/Populaire. Populaire Très populaire Très populaire

Étoiles Github ~ 60k ~ 160k ~ 150k

Syntaxe Pas si difficile Plus simple Simple

L'architecture Très structuré Ouvert au développement Ouvert au développement

Évolutivité Plus évolutif Évolutif Évolutif

Bibliothèques intégrées Des tonnes d'éléments intégrés pas tant que ça pas tant que ça

Performance Perfomant Plus performant (domaine virtuel) Perfomant

 9'

3 Le comparatisme
 10'

4 Mise en place

Vue d'ensemble de la section

● Explorer les outils qui facilitent le développement
d'Angular
● Installer le CLI d'Angular
 11'

4 Mise en place : Éditeurs

Sélection d'un éditeur

Si vous cherchez un éditeur de code (aka IDE) pour améliorer votre développement Angular - VS
Code est largement utilisé par la communauté, mais des éditeurs comme Atom et Webstorm
conviennent également. Les plugins peuvent contribuer grandement à faciliter le processus de
développement.

Plugins utiles
● Angular Inline
● Service linguistique Angular
● Bribes d'Angular
 12'

4 Mise en place : L'interface de

programmation Angular
Angular dispose d'une interface de ligne de commande (CLI) qui prend en charge une grande partie du travail
initial de mise en place d'une application minimale, et vous permet de créer et d'inclure facilement de
nouveaux composants à la volée.
Nous allons commencer par installer globalement le CLI Angular et apprendre quelques commandes de base
npm install -g @angular/cli@version-number
ng --version
ng --help
ng new my-app-name
ng generate [component | directive | pipe |
service | class | interface | enum | guard]
ng construire
ng servir
peluches ng
ng tests

Par exemple, ng --new mon-nom-d'application créera une nouvelle application Angular vierge pour nous et nous pouvons
utiliser ng -generate pour créer des parties de notre application.
ng build va tout construire pour nous, et ng serve -o va même démarrer un serveur de développement ainsi qu'ouvrir une fenêtre
de navigateur pour que nous puissions visualiser notre application.
 13'

5 Construire une application

angulaire
Nous allons créer un menu de restaurant et une application de commande.

ng new food-app --prefix fapp

cd food-app

Cela créera un nouvel espace de travail Angular, générera un module d'application, les fichiers de
configuration nécessaires et une suite de tests pour votre nouveau projet. Vous devrez répondre à une série
de questions de configuration :
1. Souhaitez-vous ajouter le routage Angular ? (oui)
2. Quel format de feuille de style souhaitez-vous utiliser ? (Moins)
Notez que nous avons utilisé la propriété prefix pour définir notre propre préfixe par défaut. Le préfixe par
défaut d'Angular est "app", mais une bonne convention de nommage consiste à utiliser un préfixe court lié
au nom de votre entreprise ou de votre application pour se différencier facilement des utilitaires tiers.
 14'

5 Construire une application angulaire : food-

app

//On dirait que c'est l'un de nos propres composants

d'application
<fapp-header></fapp-header>

/sûr de supposer qu'il s'agit d'un tiers

<tabset>
<tab heading="Basic title" id="tab1">Contenu de
base</tab>
<tab heading="Basic Title 1">Contenu de base 1</tab>
<tab heading="Basic Title 2">Contenu de base 2</tab>
</tabset>
 15'

5 Construire une application : Propriétés

personnalisées
Propriétés de personnalisation
Plusieurs autres propriétés utiles permettent de personnaliser la configuration d'un projet :
-racine
Répertoire principal pour tous les fichiers du projet. Vide par défaut.
-sourceRoot
Répertoire de tous les fichiers sources du projet.
-Type de projet
Peut spécifier l'application par rapport à la bibliothèque
- cibles
Utilisé pour personnaliser les commandes de tâches (build, serve, test) à partir des paramètres par défaut.
 16'

5 Construire une application : Structure du

projet
Structure du projet
├── angular.json
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
├── tslint.json
├── e2e/
├── src/
| ├── index.html
| karma.conf.js ├─── ├── karma.conf.js
| ├── main.ts
| ├── polyfills.ts
| ├── styles.less
| ├── test.ts
| ├── tsconfig.app.json
| ├── tsconfig.spec.json
| ├── tslint.json
| ├─── assets/
| ├── environnements/
| ├── environment.ts
| ├── environment.prod.ts
| ├── app/
| ├── app.module.ts
| ├── app.component.ts
| ├── app.component.spec.ts
| ├── app.component.less
| ├── app.component.html
| ├── app-routing.module.ts
├── node_modules/
 17'

5 Construire une application : Fichiers

importants
Dossiers importants
angular.json
Ce fichier est le schéma de configuration d'un espace de travail Angular. Par défaut, Angular configure
Webpack pour son processus de construction, et utilise le fichier angular.json pour les informations de
construction.
(Note, avant Angular v6, ce fichier était .angular-cli.json. Lors de la migration des versions, le fait
d'avoir le mauvais nom de fichier de configuration de l'espace de travail est une cause de problèmes).
tsconfig.json
Ce fichier contient nos options de compilation pour le script de type.
src/main.ts
C'est le point d'entrée de notre application, il compile et démarre notre application.
 18'

5 Construire une application : Fichiers

importants
src/index.html
Cette page devrait vous sembler familière : il s'agit de notre page d'index principale.

<!doctype html>
<html lang="en">
<b>En-tête>
<meta charset="utf-8">
<title>FoodApp</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>
//notre composant d'entrée
<fapp-root></fapp-root>
</body>
</html>
 19'

5 Construire une application : Fichiers

importants
src/app/app.module.ts
Ce fichier est le module racine de notre application. Chaque application Angular possède au moins un
module qui détermine comment compiler et lancer une application. Il utilise le décorateur @NgModule
avec quatre propriétés :
● déclarations [tableau] : où nous incluons les composants, les directives et les tuyaux qui seront
utilisés par ce module.
● imports [array] : où nous incluons tous les autres modules que notre application doit utiliser. Il peut
s'agir de modules tiers tels que bootstrap datepickers, ou de modules que nous avons créés.
● providers [array] : où nous incluons les services que nous voulons utiliser au niveau de l'application
globale
● bootstrap [array] : où nous incluons l'AppModule racine - c'est la vue principale de l'application qui
héberge toutes les autres vues de l'application.
Pour en savoir plus : L'injection de dépendance dans Angular
src/app/app.component.ts
C'est notre composant racine, vous l'avez vu appelé dans notre fichier index.html comme
<fapp-root></fapp-root>.
 20'

5 Construire une application : Exécution de

l'application
Servir
Servez l'application avec :

npm run start

Essais
Lorsque nous utilisons l'interface de programmation pour créer des modules, des composants, des
services, etc., elle crée des fichiers de spécification pour nous.
Exécuter les tests dans une nouvelle ligne de commande avec :
 21'

5 Construire une application : Fichiers

importants
La modification que nous devons apporter pour que nos tests réussissent se trouve à la ligne 37
surlignée.
Nous avons également inclus des métadonnées de schémas pour notre module.
NO_ERRORS_SCHEMA empêchera le compilateur d'envoyer des erreurs lorsque des composants
inconnus sont inclus dans les composants testés. Dans les tests unitaires, nous ne voulons souvent tester
que le tout petit morceau de code sur lequel nous travaillons et nous ne nous préoccupons pas des
composants profondément imbriqués
, à moins que nous ne testions les accessoires dans une relation de composant parent/enfant. Pour les
besoins de cette formation, il est prudent de l'utiliser ici.
 22'

5 Construire une application : Test

import { TestBed, async } from '@angular/core/testing' ;
import { RouterTestingModule } from '@angular/router/testing' ;
import { AppComponent } from './app.component' ;
import { NO_ERRORS_SCHEMA } from '@angular/core' ;

describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
importations : [
RouterTestingModule
],
déclarations : [
AppComponent
],
schémas : [
NO_ERRORS_SCHEMA
]
}).compileComponents() ;
})) ;

it('devrait créer l'application', () => {

const fixture = TestBed.createComponent(AppComponent) ;
const app = fixture.debugElement.componentInstance ;
expect(app).toBeTruthy() ;
}) ;

it(`devrait avoir comme titre 'food-app'`, () => {

const fixture = TestBed.createComponent(AppComponent) ;
const app = fixture.debugElement.componentInstance ;
expect(app.title).toEqual('food-app') ;
}) ;

it('should render title in a h1 tag', () => {

const fixture = TestBed.createComponent(AppComponent) ;
fixture.detectChanges() ;
const compiled = fixture.debugElement.nativeElement ;
expect(compiled.querySelector('h1').textContent).toContain('FoodApp : Coming Soon!') ;
}) ;
}) ;
 23'

5 Construire une application : Vérifier !

Résultats
Modifions le balisage pour qu'il ressemble à la page d'accueil de notre application "Passez votre
commande".
Mise à jour de src/app/app.component.html en :

<h1>FoodApp : Bientôt
disponible!</h1>
<router-outlet></router-outlet>

Lorsque vous enregistrez vos modifications, vous devriez voir la nouvelle balise h1 dans votre
navigateur à l'adresse localhost:4200.
 24'

Questions générales
 25'

Félicitations
Vous devenez de première classe !