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 :

 

 

Première Application Angular 2

Dans cette exemple, nous allons voir comment développer et exécuter une petite application Angular 2 et TypeScript.

Il est aussi possible de développer en Angular 2 avec JavaScript et Dart

Introduction:

Cette application respecte la structure d’une application Angular 2 réelle et affiche un message simple :

Voir le résultat final de l’application ici.

Développement de l’application

  • prérequis: Installer Node.js et npm.
  • Etape 1: Créer et configurer le projet.
  • Etape 2: Créer votre application.
  • Etape 3: Create et ajouter un composant à votre application.
  • Etape 4: Démarrer votre application.
  • Etape 5: Define the web page that hosts the application.
  • Etape 6: Développez et executer l’application.
  • Etape 7: Make some live changes.
  • Conclusion

Installer Node.js et npm

Si Node.js et npm ne sont pas installés dans votre machine, installez-les. Pour notre exemple, nous aurons besoin de la version node v5.x.x ou plus et npm 3.x.x ou plus.

Pour verifier quelle version utilisez-vous, exécuter node -v et npm -v dans le terminal (Invite de commande pour Windows).

npm est installé avec Node.js

Etape 1: Créer et configurer le projet

Créer le dossier du projet:

Utilisez le terminal/invite de commande pour créer le dossier/répertoire du projet et deplacez-vous à ce dernier.

Créer les fichiers de configuration

Notre projet Angular a besoin de plusieurs fichiers de configurations:

  • package.json ce fichier contient les dépendances du projet (fichier de configuration de NPM).
  • tsconfig.json ce fichier définit la façon dont le compilateur de TypeScript génère du JavaScript à partir des fichiers du projet.
  • typings.json
  • systemjs.config.js

 

Créez chacun de ces fichiers dans le répertoire de votre projet. Copier/coller le contenu ci-dessous :

package.json

tsconfig.json

typings.json

systemjs.config.js

Pour plus de détails sur les fichiers de configuration, lisez les deux guides Npm Package Configuration et TypeScript Configuration.

en cours de construction …

 

 

Vues et Binding AngularJS

Pour le pattern MVC/MVVM, une vue a pour rôle d’afficher les données à l’utilisateur. Elle dispose du modèle pour récupérer les données à afficher et transmet les actions de l’utilisateur aux contrôleurs.

Pour AngularJS, une vue se traduit par une page HTML, ou plus précisément un template de page HTML. Le modèle, initialisé par le contrôleur, est transmis par l’objet $scope à la vue. AngularJS s’occupe ensuite de fusionner le template avec les données du modèle pour générer la vue à afficher à l’utilisateur.

1. Binding

Pour pouvoir afficher une donnée du modèle dans la vue, il faut passer par du binding.

Le principe de binding est de synchroniser une donnée du modèle et l’affichage de cette donnée. Il existe trois types de bindings gérés par AngularJS. Le binding one-way permet de mettre à jour la vue lorsque le modèle change. De manière identique au binding one-way, le two-way permet de mettre à jour la vue dès que le modèle change. Par contre, ce binding permet aussi de mettre à jour le modèle lorsque la vue change, c’est-à-dire lorsque l’utilisateur modifie par exemple la valeur d’un champ d’un formulaire HTML. Enfin, le binding one-time permet d’afficher une donnée du modèle dans la vue puis de désactiver la relation de binding.

Afficher une donnée

Pour pouvoir afficher la valeur d’une propriété du modèle dans la vue, il faut utiliser la syntaxe {{ nomPropriété }}, où nomPropriété correspond au nom de la propriété. À l’affichage de la vue, le marqueur précédent sera remplacé par la valeur de la propriété du modèle.

L’exemple précédent affiche la valeur de la propriété value du modèle dans une balise HTML p via la syntaxe {{ }}.

L’attribut ng-bind permet aussi d’afficher une donnée, en renseignant le nom de la propriété du modèle à afficher comme valeur de l’attribut. À l’affichage de la vue, AngularJS va insérer la valeur de la propriété du modèle dans le contenu de la balise.

L’exemple précédent affiche la valeur de la propriété value du modèle dans une balise HTML p via la syntaxe ng-bind.

Le fonctionnement de ces deux syntaxes est le même, tout comme le résultat. La seule différence intervient lors de l’affichage de la page.

Lorsque le navigateur va afficher la page, il va rendre visuellement le HTML puis AngularJS sera exécuté. Si la syntaxe {{ }} est utilisée, entre le moment où le navigateur aura affiché la page et le moment où AngularJS aura interprété la vue et appliqué le binding, l’utilisateur verra la chaîne de caractères {{ value }}. Après l’interprétation de la vue, le marqueur sera remplacé par la valeur liée.

Dans le cas de l’attribut ng-bind, avant l’interprétation d’AngularJS, rien ne sera affiché. La valeur bindée apparaîtra après l’interprétation.

Ces deux syntaxes permettent de faire du binding one-way, c’est-à-dire que si une modification est effectuée par le contrôleur sur le modèle, cette modification sera automatiquement répercutée sur la vue. Par contre, si la valeur est modifiée au niveau de la vue, elle ne sera pas prise en compte par le modèle. Ce binding correspond au scénario où l’on souhaite afficher une donnée du modèle sans qu’elle soit modifiable par l’utilisateur.

Récupérer les données renseignées par l’utilisateur

Dans les scénarios où il est nécessaire de récupérer des informations renseignées par un utilisateur, à travers un formulaire HTML par exemple, le binding two-way doit être utilisé.

Pour en profiter avec AngularJS, il faut utiliser l’attribut ng-model en renseignant la propriété du modèle à binder.

L’exemple précédent correspond à un formulaire de connexion. Les inputs HTML sont bindés aux propriétés username et password du modèle. Dès que l’utilisateur renseignera ces champs, le modèle sera mis à jour. Le contrôleur aura accès aux données renseignées via les propriétés $scope.username et $scope.password.

Grâce à ce binding et à l’attribut ng-model, la vue et le modèle sont synchronisés, que les modifications soient effectuées dans la vue ou dans le contrôleur.

Par défaut, la mise à jour du modèle après modification de la vue est effectuée dès que l’utilisateur renseigne une nouvelle information. Par exemple, sur un champ HTML input de type text, la mise à jour du modèle sera effectuée à chaque nouveau caractère saisi ou à chaque caractère supprimé. Il est possible de personnaliser ce comportement en utilisant l’attribut ng-model conjointement à l’attribut ng-model-options.

Ce dernier attribut attend comme valeur un objet JavaScript pouvant être composé des propriétés updateOn, debounce et getterSetter. La propriété updateOn permet de spécifier sur quel évènement JavaScript la mise à jour du modèle est déclenchée.

L’exemple précédent utilise l’attribut ng-model-options sur les champs Login et Password pour définir la mise à jour du modèle après l’évènement blur, correspondant à la perte de focus du champ.

La propriété debounce de ng-model-options définit un temps d’attente, en millisecondes, avant de déclencher la mise à jour du modèle.

L’exemple précédent utilise l’attribut ng-model-options sur les champs Login et Password pour définir un temps d’attente de 500 millisecondes avant la mise à jour du modèle.

Enfin, la propriété getterSetter permet d’activer le mode getter/setter sur le binding.

L’exemple précédent utilise l’attribut ng-model-options sur le champ Login pour activer le mode getter/setter.

Le contrôleur de l’exemple précédent enrichit le modèle avec une propriété password et avec une fonction username de type getter/setter. Si cette fonction est appelée sans paramètre, elle renverra la valeur stockée, sinon elle modifiera cette valeur.

L’intérêt principal de cette option est de pouvoir stocker la donnée dans le modèle de manière différente à l’affichage dans la vue.

Afficher une donnée puis désactiver la relation de binding

AngularJS propose un troisième type de binding : le one-time binding. Le principe de ce binding est d’afficher une propriété du modèle dans la vue, puis de désactiver la relation de binding. De cette manière, si la valeur change dans le modèle, la vue ne sera pas mise à jour.

Pour profiter de ce type de binding, il faut utiliser la syntaxe {{::nomPropriété}}, où nomPropriété correspond au nom de la propriété. À l’affichage de la vue, le marqueur précédent sera remplacé par la valeur de la propriété du modèle.

L’exemple précédent affiche la valeur de la propriété value du modèle dans une balise HTML p via la syntaxe {{::}}. Si la propriété du modèle change, la vue ne sera pas mise à jour.

L’avantage de ce binding est de ne pas surcharger la page avec des bindings sur des propriétés qui ne changeront pas. Cette optimisation sera vue plus en détail dans le chapitre Notions avancées.

Installation d’AngularJS

Pour pouvoir utiliser AngularJS, il faut référencer ce framework dans la page HTML de votre application. Pour cela, il faut soit, télécharger le fichier source sur le site officiel https://angularjs.org/ soit utiliser le CDN de Google.

Référencer AngularJS

Si votre application n’a pas accès à internet, il est necessaire de télécharger AngularJS et le référencer à l’aide du code suivant :

Dans le cas contraire, il est conseillé d’utiliser le CDN de Google, le code est le suivant :

L’exemple précédent référence la version 1.3.10 d’AngularJS via le CDN de Google.

L’utilisation du CDN offre différents avantages non négligeables :

  • libération de ressources et de la bande passante sur son propre serveur;
  • Parallélisation des téléchargements;
  • Accélération du chargement;
  • Actualisation automatique des librairies…
Un CDN est l’acronyme de « Content Delivery Network »; c’est un réseau de serveurs permettant de distribuer, de manière optimisée, des ressources, généralement des fichiers CSS ou JavaScript, à des sites web hébergés dans le monde entier.

Nous avons vu dans cet article comment référencer AngularJS pour pouvoir l’utiliser dans votre application. Dans l’article suivant, nous decouvrirons l’attribut ng-app. Ce dernier indique à AngularJS quelle partie de la page HTML doit gérer

La porté d’AngularJS

Après l’installation d’AngularJS, vous devriez définir quelle partie de la page HTML doit’il gerer. Pour cela, il existe un attribut ng-app permettant de specifier la partie de la page est’il responsable.

Explication :

Le code ci-dessus indique à AngularJS de gérer toute la page HTML, parce que l’attriut ng-app est declaré au niveau de la balise <html>, donc il est responsable de gerer toute la page HTML. La valeur myapp  de ng-app spécfie quelle application doit etre chargée.

L’attribut ng-app est souvent declaré comme attrbut d’un élément racine du DOM, par exemple la balise html ou body. Mais si juste une partie de la page qu’est gérée par AngularJS, il faut declarer l’attribut ng-app sur l’élément racine de la zone devant être géré par le framework.

Explications :

Dans le code précédent, seule le contenu de la div qui sera géré par AngularJS

Single Page Application

SPA signifie Single Page Application, ou application  monopage en français, est une application web accessible via une page web unique. Le but est d’éviter le chargement d’une nouvelle page à chaque action demandée, et de fluidifier ainsi l’expérience utilisateur.

Différences entre une SPA et un site web classique ?

La différence entre une SPA et un site web classique réside dans leur structure et dans la relation entre le navigateur et le serveur.

SPA Site web classique
Composée d’une seule page Composé de plusieurs pages
Le rôle du navigateur est beaucoup plus important que dans un site web, toute la logique applicative y étant déportée Le rôle du navigateur est simplement d’afficher les pages envoyées par le serveur et de lui transmettre les actions de l’utilisateur
Le serveur est responsable de fournir les ressources de l’application et surtout d’exposer les données Le serveur contient la logique applicative (il fournit les pages à afficher et réagit aux actions de l’utilisateur)

Les avantages et les inconvénients des SPA

Les arguments en faveur d’un site web à page unique sont les suivants :

  • Tout le contenu est chargé en une seule fois ;
  • Scroller est moins compliqué et risqué que de cliquer ;
  • La maintenance est plus simple ;
  • La densité d’information favorise un meilleur référencement.

Les arguments en défaveur des sites web à page unique sont les suivants :

  • Le site est plus long à charger ;
  • Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ;
  • Les utilisateurs peuvent être désorientés.

Exemple des SPA

Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page mais le contenu est modifié au fur et à mesure selon les requêtes. Un autre exemple de SPA et de Websocket : la recherche en saisie automatique sous Google qui modifie le contenu en dynamique.

Introduction aux modules AngularJS

Un module permet d’encapsuler l’ensemble des éléments d’une application AngularJS.

Pour créer un module, on utlise la méthode module de l’objet angular. Cette méthode prend en paramètre le nom de module suivi d’un tableau, correspondant aux dépendances du module.

L’objet correspondant au module expose plusieurs méthodes, notamment Controller permettant de déclarer un contrôleur en respectant la syntaxe suivante :

Le code précédent crée un module nommé MyApplication et y déclare un contrôleur nommé MyControleur et basé sur la fonction MyControleur.

L’attribut ng-app, utilisé dans la vue, permet de définir quel module doit être chargé.

L’attribut ng-app est utilisé ici pour charger le module MonApplication.