--- title: "How to Use Drupal REST Services with AngularJs · Appnovation" url: "https://www.appnovation.com/insights/how-use-drupal-rest-services-angularjs" description: "A quick introduction to AngularJS and how to use it with Drupal 8 RESTful web services to build dynamic front ends." --- Article # How to Use Drupal REST Services with AngularJs [![](https://cdn.sanity.io/images/ey850001/production/36eb314260fb474cacc1b3a473d7e8402d997898-68x68.png?w=68&auto=format) Appno Blogger Appnovation Coop](/people/appno-blogger.md) Nov 07, 2014 3 min read ![How to Use Drupal REST Services with AngularJs](https://cdn.sanity.io/images/ey850001/production/2ca99ef326e0317ae9a1c7abc16c6817fac344cd-1400x400.jpg?w=1400&auto=format) In a previous post I showed how to use [Drupal 8 RESTful services](/insights/setup-drupal-8-restful-web-services-3-easy-steps.md). In this post I will go through a quick intro to [AngularJS](/services/web-development.md) 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 (opens in new window)](https://github.com/yeoman/generator-angular) to scaffold an angular app and then use [Bower (opens in new window)](http://bower.io/) 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 (opens in new window)](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. \
Show me node #\ \
\
\

Node From Drupal\

\
\

{{ node.title\[0\].value }}\

\

{{ node.body\[0\].value }}\

\
Now you should see the site at localhost:9000/#/drupal. Use the counter in the textare to browse through the nodes. [![](https://cdn.sanity.io/images/ey850001/production/36eb314260fb474cacc1b3a473d7e8402d997898-68x68.png?w=68&auto=format) Appno Blogger Appnovation Coop · Appnovation](/people/appno-blogger.md) ## Keep reading [![What is Sovereign AI](https://cdn.sanity.io/images/ey850001/production/a5889abdd5e80376912546622e046e3fbef234b4-2496x1664.png?w=640&auto=format)](/insights/what-is-open-source-sovereign-ai.md) Article · 7 min AI ### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md) Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation. [Iain MacNeil](/people/iain-macneil.md) Article [![AI-first experience design](https://cdn.sanity.io/images/ey850001/production/8bbc2418e87924ef10f36115478a2e10d5bed95e-1584x624.jpg?w=640&auto=format)](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Article · 6 min AI Sep 10, 2026 ### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years. [Andrew Douglas](/people/andrew-douglas.md) Article [![What Becomes Possible When AI Can Read All the Data](https://cdn.sanity.io/images/ey850001/production/c28ab0bd26753421ee42937e13adc7a7f19b47f0-1296x510.jpg?w=640&auto=format)](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Article · 4 min AI Sep 09, 2026 ### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before. [Appnovation](/people/appnovation.md) Article ## Get the thinking, *before everyone else.* One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.