How to Use Drupal REST Services with AngularJs

In a previous post I showed how to use Drupal 8 RESTful services. In this post I will go through a quick intro to AngularJS and how we can use Angular and Drupal together.

So why angular?

"HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.” - AngularJS site.

To start off we will use Yeoman Angular Generator to scaffold an angular app and then use Bower to manage the app dependencies. We will not talk about installing yeoman and bower. Just to make sure you have these dependencies run the following command in the terminal,

$ npm install --global yo bower grunt-cli

If the above command ran successfully, then you are good to go. We are going use an AngularJS generator from here: https://github.com/yeoman/generator-angular. Installation instructions for the generator are on the github page.

Once you have installed the generator, run the following command to scaffold and angular app:

$ yo angular appName

Good thing about yeoman is that it comes built in with a server, so you won't have to do anything special to run this app - just type the following in the terminal, and our basic scaffolded app would be up and running:

$ grunt server

It should open the app at

http://localhost:9000/#/

and you should see something like this

In your project folder, /app directory is the one that we are interested in. If you go into “/app/scripts/app.js” you will see all the routes for your application. We are going to add a new route there for the controller we are going to create for this tutorial. Let's call this "route drupal".

Here is the code to create it:

$ angular
.module('newtestApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/drupal' , {
templateUrl: 'views/drupal.html',
controller: 'DrupalCtrl'
});

After you have done this, let's create a new controller to handle the route we just created. Enter the following command in the terminal and angular-generator would take care of the rest:

$ yo angular:controller Drupal

Ideally you should define a service that would do the get and post requests, but for the sake of this tutorial we will do everything in a controller. Here is the code for the controller:

angular.module('newtestApp')

.controller('DrupalCtrl', function ($scope, $resource) {
var url = "your-site.com";

var nodeService = $resource(url +'node/:nodeId',
{ nodeId: '@nodeId' },
{
get: {
method:'GET',
transformRequest: function(data, headersGetter) {
headersGetter()['Accept'] = 'application/hal+json'
}
}
});

$scope.getNode = function() {
var node = nodeService.get({'nodeId': $scope.nodeId}, function() {
$scope.node = node;
});
}

});

Make sure that you change the url variable to your site url.

After this, create a new file in app/views by the name of "drupal.html". This is where we are going to place our views related stuff. The following is the code for our view.

<div id="node-to-load">
Show me node #<input type="number" value="0" min="1" ng-model="nodeId" ng-change="getNode()">
</div>

<div id="laod-node-here">
<h1>Node From Drupal</h1>
<br />
<h3>{{ node.title[0].value }}</h3>
<p>{{ node.body[0].value }}</p>
</div>

Now you should see the site at localhost:9000/#/drupal. Use the counter in the textare to browse through the nodes.