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