Le tout est encapsulé dans deux "div" qui déclarent notre application et notre contrôleur AngularJS

L'implémentation côté client

Commençons par installer le package Nuget AngularJS. Ajoutons ensuite dans notre page l'appel au fichier . js d'Angular ainsi qu'à un fichier UserController. js. Notre application AngularJS s'appelle UserApp, nous ne sommes pas toujours obligés de lui donner un nom mais nous verrons plus loin que cela est nécessaire dans notre cas, dans notre fichier nous commençons donc par :

var userApp = angular.module('UserApp',[])

Nous devons maintenant créer notre contrôleur Angular qui est l'élément essentiel de notre code JavaScript. Il ajoute dans le $scope un objet Model qui contient une propriété "NewUser" représentant le nouvel utilisateur et "Users" contenant la liste des utilisateurs déjà créés. Il ajoute également au $scope trois méthodes, pour la création, la mise à jour et la suppression. Il charge également la liste des utilisateurs déjà créés lors de l'affichage de la page. Il définit également deux méthodes pour passer en mode édition d'une ligne et le quitter.

Première version

Une première version de notre contrôleur pourra donc ressembler à :

function UserController($scope, $http) ;

L'implémentation du "save''" pourrait être :

$scope.Save = function () ;

Cela fonctionne et vous trouverez dans le code source joint une implémentation de ce type dans le fichier SimpleUserController. js. Mais cette version n'est pas optimale. En effet le contrôleur a trop de responsabilité, ce n'est pas à lui de communiquer avec le serveur, il est trop couplé à $http ce qui le rend difficilement testable (Eh oui AngularJS permet aussi de faire des tests unitaires de notre code JavaScript).

Seconde version : Création d'un service

Faisons évoluer ce code. La bonne pratique est de créer un service qui s'occupera de communiquer avec le serveur, il pourrait ressembler en partie à cela :

userApp.factory('UserService', ['$http', function($http) ]);

Puis la définition de notre contrôleur devient :

function UserController($scope, UserService) {
    $scope.Model = {}
    $scope.Model.Users = UserService.query();
    $scope.Save = function () {
        var u = UserService.save($scope.Model.NewUser);
        $scope.Model.Users.push(u);
    };
....

Notez que l'injection de dépendance est intégrée à Angular.

Cette version est déjà un peu meilleure, mais elle reste fastidieuse. Et les concepteurs d'Angular ont pensé, à juste titre, que communiquer avec un serveur, pour récupérer des données et les mettre à jour, serait une tâche récurrente. Nous allons donc faire évoluer notre service.

Troisième version : utilisation de $resource

Commençons par modifier la première ligne de notre fichier pour charger le module ngResource :

var userApp = angular.module('UserApp', ['ngResource']);

Il faut aussi appeler le fichier angular-resource. js dans notre page.

$resource propose l'ensemble les méthodes de CRUD, mais l'update est réalisé avec un save (id, object) qui fait un POST alors que dans notre contrôleur Web API nous avons choisi un PUT qui ne prend que l'objet en paramètre. Nous allons donc ajouter cette méthode. Notre service devient alors :

userApp.factory('UserService', ['$resource', function ($resource) {
    return $resource('/api/user', null,
        { update: { method: 'PUT' } });
}]);

et notre contrôleur :

function UserController($scope, UserService) {
    $scope.Model = {}
    $scope.Model.Users = UserService.query();
    $scope.Save = function () {
        var u = UserService.save($scope.Model.NewUser);
        $scope.Model.Users.push(u);
    };
    $scope.Update = function (user) {
        UserService.update(user);
        user.Edit = false;
    };
    $scope.Delete = function (user, index) {
        UserService.delete({ id: user.Id });
        $scope.Model.Users.splice(index, 1);
    };
    $scope.Edit = function (user) {
        user.Edit = true;
    };
    $scope.Cancel = function (user) {
        user.Edit = false;
    };
};

Et voilà nous avons maintenant notre CRUD avec 30 lignes de Javascript plutôt lisibles, et une implémentation de nos services REST côté serveur facile à mettre en place.

Nous avons donc vu un aperçu des possibilités d'AngularJS, avec l'utilisation de ng-model, ng-repeat, ng-show/hide, ng-click ainsi que l'utilisation de $resource. Nous n'avons eu à écrire aucun appel Ajax ni gérer aucun call back… ou presque, en fait il y en a un implicite lors de l'appel du save (). Si vous avez besoin d'un call back vous pouvez écrire quelque chose du genre :

$scope.Update = function (user) {
        UserService.update(user, function (response) {
            //call back
        });
        user.Edit = false;
    };

Vous pouvez télécharger l'exemple complet ici.

Bref ça donne quasiment envie de faire du Javascript non ? :)