Démarrage rapide en Angular 4

Apprendre avec aisance l’utilisation du fameux framework front-end Angular 4 dans le développement de vos applications web.

Les prérequis

Avant de commencer la balade avec Angular 4, vous devez installer quelques outils :

— Nodejs (pour les utilisateurs de Linux et je suis l’un d’eux utilisez ce lien).

— Angular CLI (utilisez la commande sudo npm install -g @angular/cli)

— Visual Studio Code (environnement de développement intégré)

Création du projet Angular

La création d’un projet Angular est assez simple :

1— choisissez l’emplacement du dossier de votre projet

2 — ouvrez la console et exécuter la commande suivante ng new mon-projet

Votre nouveau projet est créé dans le dossier mon-projet pour l’ouvrir lancez Visual Studio Code et choisissez l’option (Fichier →Ouvrir le dossier).

Les composants (Components)

Les composants sont les briques de base d’une application Angular. Ils vous permettent de construire et spécifier les différents éléments dans votre page web.

Un composant est une entité composée de trois éléments :

— Classe : le code source de composant en typescript (ne peur pas c’est de javascript amélioré).

— Template : la vue ou l’interface graphique de composant en html.

— Stylesheet : le style de composant en css.

Voyons l’exemple d’un composant, dans votre projet ouvrez le fichier app.components.ts :

Si vous avez remarquez, il y a trois sections :

— la section d’import où vous mettez les dépendances utilisées dans votre code.

— le décorateur de composant définit les différents propriétés de configuration de composant (nom, template, style, …)

— la classe où vous définissez les différents attributs et méthodes de votre composant.

Pour ajouter facilement un nouveau composant à votre projet vous pouvez utiliser la commande suivante :

ng g component nouveau-composant

Automatiquement, un dossier nouveau-composant sera ajouté à votre projet. Ce dossier contient quatre fichiers :

— nouveau-composant.component.css : le fichier style du composant.

— nouveau-composant.component.html : le fichier template du composant.

— nouveau-composant.component.spec.ts : le fichier de test unitaire du composant.

— nouveau-composant.component.ts : le fichier code du composant.

Exemple

Avant d’entrée plus en détail, nous allons voir un petit exemple d’un composant qui affiche votre nom.

Ouvrez le fichier nouveau-composant.component.ts et ajoutez le code suivant :

Passez au fichier nouveau-composant.component.html et mettez le code suivant :

Maintenant, pour utiliser votre composant ouvrez le fichier app.component.html et remplacez le code existant par la balise <app-nouveau-composant></app-nouveau-composant> si vous voulez changer le nom de la balise retournez au fichier nouveau-composant.component.ts et modifiez la valeur de propriété selector et n’oubliez pas de modifier la balise utilisée.

Enfin, pour tester votre application utilisez la commande ng serve puis ouvrez l’url http://localhost:4200 et vous devez obtenir un résultat comme ça :

De même, vous pouvez utiliser des attributs de type objet dans votre composant :

Pour le template utilisez le code suivant :

Le résultat :

Si vous avez un attribut de type tableau et vous voulez itérer l’affichage de son contenu, Angular vous offre un syntaxe spécifique qui permet de répéter une même balise html pour chaque élément de tableau.

L’attribut *ngFor permet de définir un traitement itératif pour une balise html.

Le résultat :

Angular offre d’autres attributs pour étendre le syntaxe html par exemple *ngIf qui contrôle l’affichage d’une balise html suivant l’évaluation d’une l’expression associée.

Par exemple, si le nombre d’éléments de tableau est pair l’application affiche PAIR si non affiche IMPAIR.

Résultat :

Une autre méthode pour implémenter l’exemple :

Une troisième méthode pour faire la même chose :

La liaison de propriété

Une caractéristique très intéressante en Angular est la liaison de propriété (Property Binding). Cette caractéristique vous permet de liée une propriété (attribut) d’un élément html à une variable dans votre code. Une telle liaison simplifie énormément la manipulation des éléments d’interface.

Il y a trois méthodes pour définir la liaison de propriété. Prenons un exemple qui permet de définir la source d’une image (propriété src) :

La méthode la plus utilisée par les développeurs est la deuxième.

Résultat :

Une dernière remarque la liaison de propriété est unidirectionnelle de variable vers la propriété seulement.

Capture d’événement

Angular vous offre une méthode simple et efficace pour lier les événements déclenchées par l’utilisateurs au traitement défini dans votre code. Prenez l’exemple précédent et ajoutez un bouton qui contrôle l’affichage des images.

Maintenant, le traitement au niveau de code source.

Le lien suivant [ici] vous offre la référence des événements qui vous pouvez utiliser.

Résultat :

Pour des raisons de débogage souvent nous utilisons la fonction console.log() les informations affichées par cette méthode peuvent être consultées dans Google Chrome en faisant ctrl+shift+i puis Console.

Définition de style

Pour définir le style d’un composant vous devez recourir au syntaxe css qui doit être mis dans le fichier spécifié par la propriété styleUrls de composant. Par exemple, nous allons définir le style d’un élément <h1> :

An niveau de modèle html ajoutez un élément <h1> :

Résultat :

Dans certains cas vous voulez changer dynamiquement le style de l’élément, Angular vous propose de lier la propriété class de l’élément avec une variable qui s’occupe de chargement du style spécifique à partir du fichier de style. Par exemple, dans notre cas le titre va changer de couleur (Vert\Rouge) suivant l’état de visibilité des images.

Commencez par la définition des styles :

Modifiez le fichier de code :

Finalement, liez la propriété à la variable :

Résultat :

Si vous voulez appliquer plusieurs classes de styles à l’élément au même temps, simplement affectez à la variable de liaison l’ensemble des classes séparées par espace. Voyons un exemple :

Modifiez le fichier source :

Résultat :

La définition de style peut être réalisée aussi à travers la propriété style. Dans l’exemple suivant, nous allons modifier le code pour assurer le changement de couleur par l’attribut style. Commencez par l’enlèvement des styles de couleur dans le fichier code :

Définissez le couleur de style suivant l’état :

Vous devez avoir le même résultat qu’auparavant.

Les services

Lors de développement, souvent vous êtes amenés à utiliser le même code plusieurs fois dans différents composants par exemple pour accéder à une source de données. Dans ces cas, il serait judicieux de créer un service qui englobe le traitement commun et le rendre accessible à tout les composants sans le récrire plusieurs fois.

Pour créer un service, utilisez la commande suivante :

ng g service nom-service

Suite à la création de service, vous obtenez deux fichiers (nom-service.service.spec.ts et nom-service.service.ts) et un avertissement. Commençons par le traitement de l’avertissement qui demande la publication du service, éditez le fichier app.module.ts en ajoutant au code la ligne d’importation et en mettant le service dans la liste des providers :

Le nom de service est celui de classe au niveau de fichier nom-service.service.ts.

Dans l’exemple suivant, nous allons utiliser notre service comme fournisseur de données :

Maintenant, nous allons utiliser le service dans notre composant :

Lancez l’application et voir le console de navigateur :

Ce que reste c’est l’affichage des données reçues dans une liste et d’indiquer si le nombre des éléments pair ou impair :

Les animations

Angular offre la possibilité de créer des animations extraordinaires qui peuvent être associées à n’importe quel élément html.

Installez la bibliothèque d’animation Angular dans votre projet :

npm install @angular/animations@latest --save

Si vous rencontrez des problèmes appliquez ces commandes :

rm -rf node_modules
npm cache clear
npm install @angular/animations@latest -- save
npm install

Par la suite, importez la bibliothèque d’animation :

Nous allons utiliser la bibliothèque d’animation avec notre composant. Commençons par le fichier de code où vous devez importer les différents objets d’animation puis les utiliser au niveau de propriété animations de composant enfin vous devez faire quelques modifications dans la classe de composant :

La fonction animate() au niveau de transition peut avoir plusieurs paramètres : un seul paramètre qui définie la période d’animation et l’action associé optionnellement à un paramètre de style ou un paramètre keyframes qui rassemble plusieurs styles pour avoir une animation séquentielle.

Par la suite, vous devez associer l’animation à l’élément html :

Résultat (l’animation est un peu différent de l’image) :

Déploiement de l’application

Pour préparer votre application au déploiement vous devez générer une version de production de votre application. Ce processus permet de créer une version d’application optimisée en utilisation des ressources.

La commande suivante permet la génération de version de production :

ng build --prod

Un dossier dist qui contient la version de production sera ajouté à votre projet. Vous pouvez utiliser le contenu de ce dossier pour déployer votre application en utilisant ftp par exemple.

A titre d’exemple, nous allons déployer notre application en utilisant github pages. Commençons par l’installation de package nécessaire :

sudo npm i -g angular-cli-ghpages

Allez à github et créez un nouveau répertoire “new repository” :

Par la suite, suivez les étapes mentionnées par github :

echo "# nom-projet" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/aymentoumi/nom-projet.git
git push -u origin master

Maintenant, le déploiement sous le chemin de votre compte github :

ng build --prod --base-href https://aymentoumi.github.io/nom-projet/

sudo ngh

Félicitation votre site est bien déployer sur github.