Angular

Angular est un Framework web developer par Google et qui permet de créer des
applications web SPA (Single Page Application), c’est à dire des applications qui
tournent dans une seule page HTML.

Angular utilise 3 technologies principal pour développer des applications robustes et

sophistiquées :

1. HTML : pour la structure de la page

2. SCSS : c’est du CSS avancé. Il permet d’appliquer du style à l’application

3. TypeScript : c’est un sur-ensemble de JavaScript. C’est du JavaScript avec un

typage stricte. Il assure et gère la partie dynamique, comportement et donné.

Installation des dépendances :

Avant de commencer à développer avec Angular il faut tout d’abord préparer
l’environnement de développement.

Node.js et npm :
Node.js est un environnement d’exécution qui permet d’exécuter du code JavaScript
côté serveur et c’est justement ce dont on a besoin car le code TypeScript d’Angular
est destinée à être transformé en code JS à la compilation.
A l’installation de Node, npm (Node Package Manager ou gestionnaire de package
node) sera aussi installé automatiquement.

CLI d’Angular :
La CLI (Command Line Interface ou interface de ligne de commande) d’Angular est
un outil qui permet de créer, gérer et déployer des applications Angular. Elle est donc
essentielle pour développer avec Angular.
Pour l’installer on utilise la commande suivante.

Angular 1
 npm i -g @angular/cli

Le i est un raccourci pour install

Le -g indique à npm qu’il doit installer angular se façon globale.

Une fous l’installation terminé on peut taper la commande ng v pour vérifier la

version installée. ng correspond au CLI d’Angular.

Angular à été développé par Google pour permettre aux développeurs web de créer
des applications robustes et performant.

Les technologies :
Angular utilise principalement 3 technologies pour permettre la création des
applications :

1. HTML : pour permettre la structuration des pages

2. SCSS ou CSS : Angular peux utiliser du CSS ou du SCSS, qui est une extension
du CSS, et qui définissent le style des pages de l’application.

3. TypeScript : TypeScript est un sur-ensemble de JavaScript. Il fait tout ce que fait

JavaScript en plus d’ajouter ses propres fonctionnalités. TypeScript permet de
définir les modèles, gérés les données, la logique métier, etc.

Installation :
Avant de commencer à utiliser Angular il faut tout d’abord préparé son
environnement de travail.

Node.js et npm :
Node.js est un environnement d’exécution qui permet d’exécuter dun code
JavaScript côté serveur. Pour développer avec Angular Node est essentiel.

npm (Node Package Manager) est un gestionnaire de package pour node. En

installant Node npm est automatiquement installé.

Angular 2
 CLI d’Angular :
La CLI (Command Line Interface) est un outil qui permet de créer, gérer et déployer
des applications Angular.
Pour installer Angular on tape la commande suivante :

npm i -g @angle/cli

💡 Le i est un raccourci pour install, et le

installer ce package de manière globale.
-g dit à npm que vous voulez

Une fois l’installation terminé on peut taper la commande ng v pour voir la version.

Créer une application Angular :

Pour créer une nouvelle application Angular on tape la commande suivante :

ng new nom-de-l'app

La commande ng new va créer une nouvelle application Angular, ajouter les

dépendances nécessaires et initialise un dépôt git.

Il est possible d’ajouter des flags pour ajouter plus de précision, comme par exemple
:

ng new nom-de-l'app --style=scss --skip-tests=true

La flag —style=scss indique que je souhaite utiliser SCSS au lieu de CSS. La flag —
skip-tests=true indique que je ne souhaite pas ajouter de tests unitaires à mon
application.

💡 Un flag dans ce contexte est une option de configuration passée à une

commande en ligne de commande. Ces flags sont souvent précédés de
- ou de -- .

Angular 3
 Lancer l’application :
Une fois l’application crée on peut la lancer avec la commande suivante:

ng serve

Le serveur va lancer l’application à l’adresse http://localhost:4200 , qui est l’adresse

par défaut utilisé par Angular.

Component (Composant) :
Les composants sont les éléments de base de l'interface utilisateur dans une
application Angular. Ils encapsulent la logique et la présentation d'une partie de
l'interface. Un composant est composé d'une classe TypeScript qui définit la logique
et les données, d'un template HTML qui définit la structure visuelle, et d'un fichier de
styles CSS (ou d'autres langages de style) pour définir l'apparence.

Pour créer un nouveau composants on utilise la commande suivante:

ng generate component nom-du-composant

Cela va créer un sous dossier qui contiendra les trois fameux fichiers (HTML, CSS
ou SCSS et TypeScrip) et met à jour le fichier app.module.ts pour ajouter le
composant parmi les autres.

Dans le fichier TypeScrip du composant on remarque l’annotation @Component, qui

permet de spécifier des meta données (des informations supplémentaires) pour le
bon fonctionnement de notre composants. Ces meta-données sont :

1. selector : elle spécifie le nom qu’on va utiliser pour injecter notre composants.
Par défaut elle est préfixé par app-

2. templateUrl : elle spécifie le

Angular 4