New version Angular 9
In this part we will call an API to fill a list through a button.
The source for this part is here: 02_apis.zip.
The samples can be run with Firefox, in general or by running, into the directory,
To make http queries to services a dependency should be added to our controller: $http.
It contains two methods:
The two functions returns a promise that can handle error and succes, with specific callback functions taking the following parameters
for example:
$http.get('http://test/com') success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });
In our test, since we don't have any webservice available we will use a "fake" rest server. It's composed by several parts (that must all be included!):
Look at the notes to see how it works
The API exposed actually respond to GET requests to the url '/customers' The object returned contains:
We will include sinon-server, fakerest and api-server to let the APIs work Then angular.min and the bootstrap.css file to have a nicer style!
We will create a new application with its controller. The controller, when loading will create an empty array of customers. Then will declare a function that will call the "/customers" API retrieving its data and filling the customers array.
The get function will return asynchronously and will invoke the success callback passing
var app = angular.module('customersModule',[]); app.controller('CustomersController',['$scope','$http',function($scope,$http){ $scope.customers = []; $scope.loadData = function(){ $http.get(/customers) .success(function(data, status, headers, config) { $scope.customers=data; }); } }]);
We will set the body with the right module and the controller. Then we will create a button. The buttons contains the ng-clik attribute. The function called on the ng-click atribute will be a function inserted on the $scope by the CustomersController.
A "template" is present to iterate on the all customers. This is declared through the "ng-repeat" attribute (an Angular directive)
Then all the data inside a single customer is shown
<body ng-app="customersModule"> <div ng-controller="CustomersController"> <button type="button" class="btn btn-default" ng-click="loadData()">Load</button> <table class="table"> <tr><th>Id</th><th>First Name</th><th>Last Name</th></tr> <tr ng-repeat="customer in customers"> <td>{{customer.id}}</td><td>{{customer.first_name}}</td><td>{{customer.last_name}}</td> </tr> </table> </div> </body>
Clicking on the Load button the data will be...hem...loaded!
FakeRest uses a standard REST flavor, described below.
GET /foo
returns a JSON array. It accepts three query parameters: filter
, sort
, and range
. It responds with a status 200 if there is no pagination, or 206 if the list of items is paginated. The response contains a mention of the total count in the Content-Range
header.``` GET /books?filter={author_id:1}&sort=['title','desc']&range=[0-9]
HTTP 1.1 200 OK Content-Range: items 0-1/2 Content-Type: application/json [ { id: 3, authorid: 1, title: 'Sense and Sensibility' }, { id: 2, authorid: 1, title: 'Pride and Prejudice' } ] ```
POST /foo
returns a status 201 with a Location
header for the newly created resource, and the new resource in the body.``` POST /books { author_id: 1, title: 'Emma' }
HTTP 1.1 201 Created Location: /books/4 Content-Type: application/json { "author_id": 1, "title": "Emma", "id": 4 } ```
GET /foo/:id
returns a JSON object, and a status 200, unless the resource doesn't exist``` GET /books/2
HTTP 1.1 200 OK Content-Type: application/json { id: 2, author_id: 1, title: 'Pride and Prejudice' } ```
PUT /foo/:id
returns the modified JSON object, and a status 200, unless the resource doesn't existDELETE /foo/:id
returns the deleted JSON object, and a status 200, unless the resource doesn't exist