AngularJs with REST service

The following example descibes an full demo implementation of a REST Service combined with an AngularJs Webapplication example. The REST Service runs on a Raspberry Pi Model B and the AngularJs Webapplication runs on a Synology (Apache-server).

Setup the RESTService

First I setup a RESTService using a Raspberry Pi with Node.js (v0.10.2) and Express.js. (NPM v1.2.15). With the following code changes. AngularJs version 1.2.12


/**
 * Module dependencies.
 */

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
<strong>var inputs = [ { pin: '11', gpio: '17', value: 1 }, { pin: '12', gpio: '18', value: 0 } ];</strong>
var allowCrossDomain = function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "http://yourowndomainname.com");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 next();
}
var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
<strong>app.use(allowCrossDomain);</strong>
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
 app.use(express.errorHandler());
}

// Express route for incoming requests for a customer name
app.get('/inputs', function(req, res){
res.send(inputs);
});

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
 console.log('Express server listening on port ' + app.get('port'));
});

The input vars is used for the json message. The allowCrossDomain vars are use for the CORS (Cross-Origin Resource Sharing) implementation. Otherwise the newest browsers doesn’t work.

With the following command starts the REST Service on the Raspberry PI.

node app

Setup the Webserver

On the Webserver I create the following index.html in the root. My First AngularJs demoApp.


<!doctype html>
<html lang="en" ng-app="demoApp">
<head>
 <meta charset="UTF-8">
 <title> Welkom </title>
 <link rel="stylesheet" href="/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
 <link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
 <nav class="navbar navbar-default" role="navigation">

<ul class="nav .nav-pills nav-justified">
 <li class="active"><a href="#/home"><span class="glyphicon glyphicon-home"></span></a></li>
 <li><a href="#/profiel"><span class="glyphicon glyphicon-user"></span></a></li>
 </ul>

</nav>

<div ng-view></div>
</div>

<script src="/lib/jquery-1.11.0.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular/angular-resource.min.js"></script>
<script src="/lib/angular/angular-route.min.js"></script>
<script src="/lib/angular/angular-sanitize.min.js"></script>
<script src="/lib/underscore-min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/services/services.js"></script>
<script src="/js/controllers/HomeController.js"></script>
<script src="/js/controllers/ProfielController.js"></script>
<script src="/lib/bootstrap.min.js"></script>
</body>
</html>

After that make charouting for the difference pages in the app. There’s a home.html and a profiel.html. For default routing I used

'use strict';

var demoApp = angular.module('demoApp',['ngRoute','gpioServices'])
 .config(function($routeProvider){
 $routeProvider.when('/home',
 {
 templateUrl:'templates/home.html',
 controller:'HomeController'
 });
 $routeProvider.when('/profiel',
 {
 templateUrl:'templates/profiel.html',
 controller:'ProfielController'
 });
 $routeProvider.otherwise({redirectTo: '/home'});

});

Home template for displaying information about the controller “HomeController”

home.html


<div class="container">
 <div ng-controller="HomeController">
 <h2>Welkom op onze site</h2>
 <table class="table table-striped">
 <tr>
 <th>Pin</th>
 <th>GPIO</th>
 <th>Value</th>
 </tr>
 <tr ng-repeat="d in data">
 <td>{{d.pin}}</td>
 <td>{{d.gpio}}</td>
 <td>{{d.value}}</td>
 </tr>
 </table>

</div>
</div>

The service call for rest…

Service.js


var gpioServices = angular.module('gpioServices', ['ngRoute','ngResource']);

gpioServices.factory('Input', ['$resource',
 function($resource){
 return $resource('http://raspberryIP:3000/inputs', {}, {
 query: {method:'GET', isArray:true}
 });

}]);

One of the controllers….

Homecontroller.js


'use strict';

demoApp.controller('HomeController',['$scope','Input',
 function HomeController($scope,Input) {
 $scope.home = {
 voornaam: 'Mark',
 achternaam: 'Vriens'
 }
 $scope.data = Input.query();
 }]
);

I tested with the browsers IE11 and chrome … and yes it works for me 😉

TIP1: Don’t mix HTTP and HTTPS… IE11 doesn’t work.

TIP 2: Use the best version of AngularJS