This will be a short and quick walk through on how to make REST API calls using AngularJS. We shall use ngResource to aid us.
Loading ngResource
If we want to use the ngResource module, we have to make sure it’s being loaded separately along with angular. We need to have something like –
|
1 2 |
<script src="/static/js/angular.min.js" type="text/javascript"></script> <script src="/static/js/angular-resource.min.js" type="text/javascript"></script> |
Creating a Module and Resource Objects (Mapping)
Now, we shall create a module named “apiService” to keep our REST stuff separate from our main application logic.
|
1 |
var service = angular.module("apiService", ["ngResource"]); |
Then we shall map REST api calls to our Angular resource objects. Here we create a Booking resource object and the factory method allows us to do that –
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Booking Resource service.factory("Booking", function ($resource) { return $resource( "/api/booking/:Id", {Id: "@Id" }, { "update": {method: "PUT"}, "reviews": {'method': 'GET', 'params': {'reviews_only': "true"}, isArray: true} } ); }); |
Here we create a new resource object which maps to the API url – “/api/booking” with an optional parameter “Id”. Then we define a set of default parameters to be used, here we instruct to extract the value of “:Id” if “Id” is present in the set of params passed.
The above resource object can make these requests:
GET /api/booking/ — Gets all booking
GET /api/booking/1 — Gets the booking with ID 1
POST /api/booking/ — Creates a new booking
PUT /api/booking/1 — Update booking ID 1
DELETE /api/booking/1 — Delete booking ID 1
Besides the basic methods, we have also added a custom method named “reviews” which would add “reviews_only=true” to make a GET query and return the result as an array. This is helpful to deal with custom queries.
Making Rest Calls
Here comes the fun, how do we use the Booking object to make the different calls?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Get all booking returned by the API var bookings = Booking.query(); // Calls: GET /api/booking/ // Get Booking ID 1 var booking = Booking.get({},{'Id': 1}); // Calls: GET /api/booking/1 // Change a value booking.fees = 34; // Save the changes (update it) booking.$save(); // Calls: PUT /api/booking/1 // Delete Booking ID 1 Booking.delete({}, {'Id': 1}); // Calls: DELETE /api/booking/1 // Get Reviews var reviews = Booking.reviews(); // Calls: GET /api/booking/?reviews_only=true |
When making the calls, we need to remember that the first parameter contains the actual data. These data will be used as the parameters of the API. This can be appended like query strings or POSTed. The API will use these data to filter the response. Where as the second parameter overrides the default parameters for the resource definition. It is used by Angular to decide how to make the REST call. In our case, we used – “/api/booking/:Id” as our api entry point and then defined default parameters as – {Id: “@Id” }. So here, the second parameter will help angular decide which URL (by providing the value for Id) to make the request to. We didn’t need to pass any data but we did need to pass the ID in some methods. This is why most of the methods were passed an empty object as the first parameter.
This should explain things a bit more –
|
1 2 3 4 5 6 7 8 |
// URL: /api/booking?name=masnun Booking.query({'name':'masnun'}); // URL: /api/booking/1 Booking.query({},{'Id':1}); // URL: /api/booking/1?name=masnun Booking.query({'name':'masnun'},{'Id':1}); |
Each of these methods allow a callback function to be executed when there is a response from server.
|
1 2 3 |
Booking.delete({}, {'Id': 1}, function () { console.log("Deleted"); }); |
Simple, isn’t it?