Essafi Sarra Mini-projet web 2 GLSI ISTIC

Introduction à Angular

I. Développer des applications web

La création classique d’un site web tourne autour du front-end et du back-end. Les deux sont séparés
et la partie front-end envoie des requêtes pour renouveler les affichages.

Une application web affiche une page HTML qui contient du JavaScript pour travailler en autonomie
et limiter les requêtes au serveur. Ainsi, on gagne en rapidité et on autorise de multiples actions sur
une même page, sans surcharger le serveur.

Développer des applications web

Il existe de nombreuses technologies pour développer des applications web, tous ont pour objectif
de simplifier la vie des développeurs, d’optimiser leurs lignes de code. Leur développement devient
plus performant, plus rapide et plus sûr. Selon la comparaison dans le site https://www.ambient-
it.net/reactjs-vs-angular-vs-vuejs/, la différence est affichée dans ces deux tableaux :

1
Essafi Sarra Mini-projet web 2 GLSI ISTIC

II. Angular

Angular répond à divers besoins, pour des sites et des applis. Cela facilite énormément le travail du
développeur.

Angular est un framework très populaire et puissant dans le monde du JavaScript. Développé par les
équipes de Google, il apporte efficacité, rapidité et organisation pour un meilleur partage de votre
travail.

Rappelons ce qu’est un framework. C’est un ensemble d’outils, de modules, de conventions qui

Avec Angular, le développeur ne peut plus coder de manière désordonnée. Son code sera clair et
lisible.

Angular est une plate-forme de développement construit sur Typescript permettant de créer des
applications d'une seule page (mono-page) efficaces et sophistiquées. Mono-page veut dire qu’elle
ne se recharge pas chaque requête.

Créations possibles avec Angular

• des sites web,

Typescript : TypeScript comme JavaScrip plus quelques fonctionnalités supplémentaires qui rendent
votre application plus ordonnée et tapé. Il Prend en charge les concepts de programmation orientés
objet tels que l'interface, l'héritage, la classe. TypeScript ajoute une syntaxe supplémentaire à
JavaScript. Il a été développé en tant que projet open source par Microsoft pour rendre le
développement JS plus efficace et détecter les erreurs de compilation dès le début. Le code TypeScript
est converti en JavaScript, qui s'exécute partout où JavaScript s'exécute. Prend en charge toutes les

2
Essafi Sarra Mini-projet web 2 GLSI ISTIC

bibliothèques et extensions JS. TypeScript fournit de nombreuses autres fonctionnalités pour faciliter
la vie d'un développeur. Vous pouvez toujours vous en tirer en ne définissant pas le type de variable
et TypeScript peut déduire le type de données. Vous pouvez utiliser les fonctionnalités de saisie
dynamique.

Le site et documentation officiel se trouve dans ce site : https://www.typescriptlang.org/

Pour essayer du code Typescript et voir son équivalent avec javascript, visitez le site suivant :
https://www.typescriptlang.org/play

Avantages de Angular:

Plateforme Angular comprend :

• Un cadre basé sur des composants pour créer des applications Web évolutives

3
Essafi Sarra Mini-projet web 2 GLSI ISTIC

• Une collection de bibliothèques bien intégrées qui couvrent une grande variété de
fonctionnalités, y compris le routage, la gestion des formulaires, la communication client-
serveur, etc.
• Une suite d'outils de développement pour vous aider à développer, construire, tester et
mettre à jour votre code.
• Il a été créé pour la conception des applications mono pages
• Il offre un support de différentes Plateformes (Mobile, Web, Et Desktop)
• Angular est aimé pour sa rapidité
• Ecrire du code Typescript offre plus de sureté dans le developpement de son application et
prépare une bonne maintenabilité.
• HTML et expression : Dans html, on peut utiliser des conditions, des boucles
• Modulaire de naissance : on peut créer des modules isolés
• Data-binding : liaison entre le html et le contrôleur
• Autres modules pour différentes difficultés (exemples : appel des données d’un autre
serveur, appel des données d’une autres application

Site officiel de Angular et documentation

https://angular.io/start
https://angular.io/docs

III. Applications Angular : Les bases

Composants : Les composants sont les blocs de construction qui composent une application. Une
composante Angular contient :

• Template (HTML) : il est utilisé pour afficher les données aux utilisateurs, il est écrit en html et
donne la possibilité d’inclure les directives Angular pour pouvoir modifier le comportement de
certains élément en html.
• Controleur JavascriptTtypescript: c’est une classe Typescript, qui apporte de dynamisme au
html et définit les données qui va être affiché dans le Template html. Constitué de différente
méthodes et propriétés pour manipuler les données écrit en html.
• Métadonnées : ils sont écris par Angular, c’est la cause de la puissance de l’application, des
données supplémentaire qu’apporte Angular pour pouvoir améliorer le comportement d’une
classe Typescript.

4
Essafi Sarra Mini-projet web 2 GLSI ISTIC

IV. Préparer son environnement de programmation

Nous avons besoin de l’installation du Visual Studio code comme éditeur de texte, NPM comme
gestionnaire de paquets et Angular CLI :

I. Installation d’un éditeur de texte : Visual Studio Code (VsCode)

Téléchargeable gratuitement pour Windows, Mac OS et linux: https://code.visualstudio.com/

II. Installation du gestionnaire de paquet NPM de javascript:

NPM (Node Package Manager) : Nous avons besoin de npm pour télécharger des utilitaires Angular.
(des bouts de code gratuit javascript, css et bien d’autres pour aider les développeurs). Pour
télécharger un module, on utilise la commande npm install. Elle crée dans notre projet un dossier qui
contiendra tous les utilitaires installés. -

5
Essafi Sarra Mini-projet web 2 GLSI ISTIC

Il faut télécharger NodeJS et l’installer du site officiel. Il est disponible également pour Windows,
Mac OS et Linux: https://nodejs.org/en/

Pour savoir s’il est correctement installé, ouvrez un terminal « cmd » et tapez cette commande pour
savoir la version du npm : npm -v

III. Installation du Angular CLI à base de npm:

Vérifier l’installation avec la commande qui affiche la version d’Angular: ng v

6
Essafi Sarra Mini-projet web 2 GLSI ISTIC

Angular CLI qui nous aide à construire votre structure principale ne l’application Angular.