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>

Sources

Publié dans les catégories suivantes

javascript
comments powered by Disqus

Téléphone

+33 637 700 504

Adresse

Bordeaux, 33300
France