Création d’un projet Angular avec Angular CLI

Créer un projet Angular avec Angular CLI

La création d’un projet Angular avec Angular CLI est effectuée via la commande ng new :

Les applications Angular utilisent généralement un routeur et l’option –routing permet de rendre plus lisible la mise en œuvre de celui-ci en créant un fichier séparé pour spécifier la table de routage.

Créez le projet openApp:

Une fois la création du projet terminée, testez l’application par défaut associée à tout nouveau projet. Pour cela, utilisez la commande suivante :

En fait, cette commande réalise deux choses essentielles :

  • Elle lance un serveur local (le NG Live Development Server) qui en sous-main appelle le transpiler TypeScript qui transcode (transpile) en JavaScript tous les codes TypeScript que vous créez ou modifiez.
  • Elle exécute l’outil webpack, qui lie les codes JavaScript pour former différents bundles (des fichiers qui regroupent les codes et ressources et ne sont pas sauvegardés sur votre disque tant que l’application est en mode développement) et visualise votre application sur l’URL localhost:4200.

Ces deux opérations sont répétées dès que vous modifiez un de vos codes sources. Du code étant produit et la fenêtre de votre navigateur étant rafraîchie, ne sauvegardez donc vos fichiers qu’à bon escient.
Dans votre navigateur, invoquez le serveur local sur le port 4200 : localhost:4200.

Angular 8 – Présentation d’Angular CLI

angular cli

Angular CLI

Angular CLI est un outil qui permet :

  • D’installer les modules de Node.js (des modules supplémentaires devront être installés suivant vos besoins).
  • De créer la structure d’un projet Angular .
  • De créer les ossatures des différentes entités qui composent une application Angular et dont vous aurez besoin : les modules, les composants, les services, les directives, les pipes, les guards, les enums.
  • De spécifier et d’exécuter les tests unitaires ou d’intégration.
  • De créer la version de production de votre application.
  • Etc.

Une fois Angular CLI installé, exécutez vos actions via la commande ng en ligne de commande.

Les Filtres AngularJS

Les Filtres AngularJS :

AngularJs contient des Filtres pour formater les données, ci-dessous quelques exemple :

- currency : Formater un nombre en format devise

- date : Formater une date

uppercase : Afficher une chaine de caractére en majuscule

lowercase : Afficher une chaine de caractére en miniscule

- orderBy : Ce filtre, o va l’ajouter dans une directive, il est utilisé pour modifier l’ordre en choisissant un critére

- filter : on l’utilise pour filtrer dans les tableaux, par exemple on veux filtrer un liste et chercher les noms qui contient la lettre ‘r’

– On va utiliser une zone de texte pour donner la main à l’utilisateur de faire la recherche, pour ce faire on va utiliser ng-model :

 

Synchronisation des données entre la vue et le model (binding des données)

Synchronisation des données entre la vue et le model (binding des données) :

Dans ce tuto, nous allons voir comment faire pour synchroniser les données entre la partie vue (html) et model (controller).

Qu’est-ce que le data-binding ?

Tout simplement, c’est la liason entre la partie vue de votre application (view) et la partie logique (model). Donc, pour bien comprendre le principe, nous allons les directives suivantes.

 1. ng-bind :

Cette directive est utilisée pour faire la liason entre un élément HTML (view) et une propriété dans la partie logique (model).
N.B : Cette directive est utilisée juste pour l’affichage des propriétés, on peut l’utiliser par exemple dans une balise <p>

Exemple :

Remarque :

On peut utiliser l’expression {{}} au lieur de la directive ng-bind, cidessous un exemple :

2. ng-model :

On peut dire que la directive ng-model joue le rôle inverse de la directive ng-bind, cette dernière nous permet de lire une donée entrante par un utilisateur et l’envoyer au model pour traitement, on peut l’utiliser avec les balises (input, select, textarea,…).

Exemple :