Création d’une application AngularJS

Comme nous l’avons deja vu, une application AngularJS est organisée autour des patterns MVC/MVVM, Où le role de chaque composant est ulistré ci-dessous :

Modèle

Le modèle est représenté par un objet ou une valeur JavaScript.

Contrôleur

Le contrôleur est une classe JavaScript prenant en paramètre l’objet $scope, représentant le modèle.

L’objet $scope est automatiquement fourni au contrôleur via le mécanisme d’injection de dépendances utilisé par AngularJS.

Toute propriété ou fonction ajoutée par le contrôleur à l’objet $scope sera accessible par la vue.

La déclaration d’un contrôleur se fait dans un module AngularJS, représentant l’application

La méthode module est appelée pour créer le module MyApplication.

La méthode controller est ensuite utilisée pour déclarer le contrôleur MyController.

Vue

La vue une page HTML affichant les données du modèle.

L’attribut ng-controller lie un contrôleur à la vue. De cette manière, le modèle, initialisé par le contrôleur, sera accessible par la vue dans la zone où est positionné l’attribut.

La syntaxe {{ }} crée un lien, un data binding, entre la vue et une propriété du modèle. À l’affichage de la vue, le marqueur précédent sera remplacé par la valeur de la propriété du modèle. Ce data binding est de type one-way, c’est-à-dire qu’à chaque modification de la propriété par le contrôleur, la vue sera automatiquement mise à jour.

Application complète

L’affichage de la page donne le résultat qui suit :

Premiere application AngularJS

Premiere application AngularJS

Laisser un commentaire