In my last post, I showed you how how to create a RESTful API in PHP. In this post, I’ll show you how to implement that API using Angular.js.
Angular.js is a JavaScript framework developed by Google, designed to make your front-end development as easy as possible. Angular follows the MVC (model-view-controller) pattern of software development and encourages loose coupling between presentation, data, and logic components.
To utilize my PHP API, I’m going to use $http
service in Angular. The $http
service is a core Angular service that facilitates communication with the remote HTTP servers via browser’s XMLHttpRequest object or via JSONP. The first thing I’ll do is build my controller which I’ll call AppsController.js.
Controller
AppsController.js
function AppListCtrl($scope, $http, $templateCache) {
$scope.listApps = function() {
$http({method: 'GET', url: './api.php?action=get_app_list', cache: $templateCache}).
success(function(data, status, headers, config) {
$scope.apps = data; //set view model
$scope.view = './Partials/list.html'; //set to list view
}).
error(function(data, status, headers, config) {
$scope.apps = data || "Request failed";
$scope.status = status;
$scope.view = './Partials/list.html';
});
}
$scope.showApp = function(id) {
$http({method: 'GET', url: './api.php?action=get_app&id=' + id, cache: $templateCache}).
success(function(data, status, headers, config) {
$scope.appDetail = data; //set view model
$scope.view = './Partials/detail.html'; //set to detail view
}).
error(function(data, status, headers, config) {
$scope.appDetail = data || "Request failed";
$scope.status = status;
$scope.view = './Partials/detail.html';
});
}
$scope.view = './Partials//list.html'; //set default view
$scope.listApps();
}
AppListCtrl.$inject = ['$scope', '$http', '$templateCache'];
The $http
service uses the GET request to retrieve the JSON object from the server, in this case api.php. The data returned is used to fill the view model object. $scope.view
sets the partial view to render. Lets take a look at the partial views.
Partial Views
list.html
<ul>
<li ng-repeat="app in apps">
<a href="" ng-click="showApp(app.id)">{{app.name}}</a>
</li>
</ul>
The list partial view loops through the view model and displays the app names. ng-repeat="app in apps"
is similar to a For Each
loop in .NET. The ng-click
event calls the showApp
function in the controller. It accepts one parameter, the id, and uses a GET request to retrieve the app data. The appDetail
view model for the detail
partial view is populated and the partial view is rendered.
detail.html
<table>
<tr>
<td>App Name: </td><td>{{appDetail.app_name}}</td>
</tr>
<tr>
<td>Price: </td><td>{{appDetail.app_price}}</td>
</tr>
<tr>
<td>Version: </td><td>{{appDetail.app_version}}</td>
</tr>
</table>
<br />
<a href="" ng-click="listApps()">Return to the app list</a>
The detail partial view displays the data stored in the appDetail
view model.
Main View
index.html
<html ng-app>
<script src="./JS/angular.min.js"></script>
<script src="./JS/AppsController.js"></script>
<body ng-controller="AppListCtrl">
<ng-include src="view"></ng-include>
</body>
</html>
In the main view, ng-include
fetches, compiles and includes an external HTML fragment. As you can see creating a REST client with Angular.js can be short and simple. For a higher level of abstraction, I’d recommend you check out the $resource service.
Demo: http://demos.ijasoneverett.com/REST_AngularJS.php
Source Code: https://github.com/ijason/AngularJS-REST-Client
Stay tuned for more Angular.js tutorials as I dive further into this superheroic javascript framework.
6 Comments
Hey,
For consuming Rest APIs from AngularJS, you might want to try https://github.com/mgonto/restangular
It’ll make your life simpler 🙂
Thanks for the suggestion. It works well.
Use this dude, https://github.com/mgonto/restangular 😉
I try this example with my web api but didnt work for me.
can you give me some more example to display data using angular with web api?
Lo utilice con un rest hecho en laravel4 y funciona perfectamente
Muchas gracias, facil y sencillo
Close to this topic: https://aping.readme.io/ (apiNG is an AngularJS directive for receiving and displaying data very easy)