A RESTful Client with Angular.js

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.