L'objectif est de créer une application AngularJS avec les opérations de stockage de données CRUD.
Prérequis
Pour cela il faut utiliser le service $resource qui est disponible avec le JavaScript angular-resource. Il faut aussi que le module principal de l'application déclare une dépendance au module ngResource.
angular.module("myapp", ['ngResource']);
Il faut aussi un serveur RESTful de votre choix.
La mise en place
L'ajout d'un service
L'objectif est de définir un service qui va retourner les cinq fonctions suivantes get(), query(), save(), remove() et delete() via l'objet $resource auquel on a passé l'url pour l'objet que l'on souhaite. Ici Phone va devenir un objet accessible dans notre contrôleur.
// app/assets/javascripts/service.js
angular.module('myApp.services').factory('Phone', ['$resource',
function($resource){
return $resource('api/v1/phones/:id', { id: '@_id' }, {
update: { method: 'PUT' }
});
}]);
On définit { id: '@_id' } afin d'utiliser l'_id de l'instance en cours de la $resource. C'est très pratique pour les update ou delete.
Le paramétrage des routes
Il nous reste à paramétrer les routes pour cet objet Phone.
// app/assets/javascripts/routes.js
$stateProvider.state('phones', { // state for showing all phones
url: '/phones',
templateUrl: 'phones/index.html',
controller: 'PhoneListController'
}).state('viewPhone', { //state for showing single Phone
url: '/phones/:id/view',
templateUrl: 'phones/show.html',
controller: 'PhoneViewController'
}).state('newPhone', { //state for adding a new Phone
url: '/phones/new',
templateUrl: 'phones/new.html',
controller: 'PhoneCreateController'
}).state('editPhone', { //state for updating a Phone
url: '/phones/:id/edit',
templateUrl: 'phones/edit.html',
controller: 'PhoneEditController'
});
Le contrôleur
Il est maintenant possible de définir les fonctions accessibles via le $scope de l'application dans chacun des contrôleurs liés à notre objet Phone.
// app/assets/javascripts/controller.js
angular.module('myApp.controllers').controller('PhoneListCtrl', function($scope, $state, $window, Phone) {
$scope.phones = Phone.query(); //fetch all phones. Issues a GET to /api/phones
$scope.deletePhone = function(phone) { // Delete a phone. Issues a DELETE to /api/phones/:id
if ($window.confirm('Really delete this?')) {
phone.$delete(function() {
$window.location.href = ''; //redirect to home
});
}
};
})
.controller('PhoneViewCtrl', function($scope, $stateParams, Phone) {
$scope.phone = Phone.get({ id: $stateParams.id }); //Get a single phone.Issues a GET to /api/phones/:id
})
.controller('PhoneCreateCtrl', function($scope, $state, $stateParams, Phone) {
$scope.phone = new Phone(); //create new phone instance. Properties will be set via ng-model on UI
$scope.addPhone = function() { //create a new phone. Issues a POST to /api/phones
$scope.phone.$save(function() {
$state.go('phones'); // on success go back to home i.e. phones state.
});
};
})
.controller('PhoneEditCtrl', function($scope, $state, $stateParams, Phone) {
$scope.updatePhone = function() { //Update the edited phone. Issues a PUT to /api/phones/:id
$scope.phone.$update(function() {
$state.go('phones'); // on success go back to home i.e. phones state.
});
};
$scope.loadPhone = function() { //Issues a GET request to /api/phones/:id to get a phone to update
$scope.phone = Phone.get({ id: $stateParams.id });
};
$scope.loadPhone(); // Load a phone which can be edited on UI
});
L'utilisation
Tout étant prêts, il reste à écrire les templates qui les appelleront en utilisant les ng-submit pour les formulaires et les ui-sref et ng-click pour les boutons. ui-sref va être utilisé pour faire un appel aux routes; pour l'édition, on va donc faire appel au state editPhone qui va afficher le template d'édition.
<form ng-submit="addPhone()" ></form>
<form ng-submit="updatePhone()" ></form>
<a ui-sref="editPhone({id:phone._id})">Edit</a>
<a ui-sref="viewPhone({id:phone._id})">View</a>
<a ng-click="deletePhone(phone)">Delete</a>