Angular $resource: kommunicera med backend via REST

Vad är ngResource?

ngResource är ett tillägg till Angular.js som gör det enkelt att prata med REST-gränssnitt (RESTful services). Det används vanligen för att skapa ett objekt som motsvarar en entitet i REST-gränssnittet. Detta objekt kan sedan användas i t.ex. controllers för att läsa, skriva, uppdatera och radera saker via REST.

Läs mer här:

AngularJS: API: $resource.

Användning

När du definierar din applikation måste du ange att den är beroende av ngResource:

//app declaration and dependency injection
var app = angular.module(
  "resourceExample", ["ngRoute", "ngResource"]
);

Nu kan du skapa en (eller flera) $resources – i exemplet har vi lagt dem i filen våran controller:

app.controller("Item", ["$scope", "$resource", function ($scope, $resource) {

  // Ask $resource to create a nice magical "Item"-resource
  // In order to do that we need
  
  var ItemResource = $resource(
    
    // 1. 
    //Path to rest api, with changeable
    // parameters prefixed with :
    "/api/item/:_id",

    // 2.
    // The object $resource creates will have methods
    // that accept object literals as input
    // Here we map object properties (left side)
    // to parameters in the url (right side)
    {
      _id:"@_id"
    },

    // 3.
    // What different REST calls should we support (right side)
    // and what method names do we want them to map to (left side)
    {
      create: { method: 'POST', isArray: true },
      get: { method: 'GET', isArray: true },
      getById: { method: 'GET', isArray: false },
      update: { method: 'PUT' },
      destroy: { method: 'DELETE' }
    }
  );
}]);

Ovan skapar vi en ”Item” $resource. Observera att $resource ”automagiskt” skapar objekt som kommer att ta hand om all kommunikation med REST-gränssnittet. I vårt fall lagrar vi detta objekt i ”ItemResource” variabeln.

Allt $resource behöver från dig är tre inparametrar där vi definierar URL i REST-gränssnittet, koppling av inparametrar (se nedan), samt vad metoder heter och vilken typ av REST-anrop olika metoder ska göra.

I vår kontroller kan vi nu inkludera de nya objekten som beroenden och börja använda dem. En fördel med ett ngResource-baserat objekt är även att det är s.k. ”promise” (löfte) vilket låter dig programmera som om det betedde sig synkront, trots att det hämtar data från REST asynkront. Se kommentarerna i koden:

app.controller("home", ["$scope",
  function($scope) {

    // declare a new $resource for the /api/item REST route
    var ItemResource = $resource(
      
      // 1. 
      //Path to rest api, with changeable
      // parameters prefixed with :
      "/api/item/:_id",

      // 2.
      // The object $resource creates will have methods
      // that accept object literals as input
      // Here we map object properties (left side)
      // to parameters in the url (right side)
      {
        _id:"@_id"
      },

      // 3.
      // What different REST calls should we support (right side)
      // and what method names do we want them to map to (left side)
      {
        create: { method: 'POST', isArray: true },
        get: { method: 'GET', isArray: true },
        getById: { method: 'GET', isArray: false },
        update: { method: 'PUT' },
        destroy: { method: 'DELETE' }
      }
    );

    // Bind the property $scope.items
    // to a promise returned by ItemResource.get()
    $scope.items = ItemResource.get(callbackFunc);

    // IMPORTANT
    // When the data eventually returns through
    // ajax ItemResource.get will tell the $scope
    // this - "resolve its promise"
    // The $scope will automatically update
    // (and thus the view will update too)

    function callbackFunc(data){
      // data will now contain all items
      console.log(data);
    }

}]);
0 votes