3 ways to get backend data to AngularJS

May 27, 2013 – 6:07 pm Tags: ,

It seems this is a rather common conundrum with Angular code: You have some backend data, say in PHP or Rails, and you want to output it when rendering the page so that Angular can display it.

Since Angular is designed to work more as a single-page app framework, it isn’t immediately obvious how to do this without Ajax, so here I’ll present three ways you can do it.

1. Using ng-init

This is probably the single most straightforward way to do it. Simply stick an ng-init attribute to some element and that’s all.

<div ng-controller="FooCtrl">
  <span ng-init="hello = true">something</span>

This example would set $scope.hello to true

However, this is not always a suitable option: Since the data goes into an element’s attribute, it can be difficult to do correctly if you need to assign values other than numbers or booleans.

So, ng-init is best used with simple values.

2. Using a global variable

This may actually be even more straightforward than the above option, and is probably the simplest choice if you need to set strings or objects which can be difficult to get working correctly with ng-init

Simply store your data in a global variable (or a namespaced variable) and access it directly from your controller:

var stuff = { hello: 'foobar' };
function FooCtrl($scope) {
  $scope.hello = stuff.hello;

However, as you might know, globals aren’t exactly a great solution for various reasons.

I would not recommend using this approach unless you’re doing an extremely trivial application. Otherwise it can lead to confusion about what the variables are used for, as often your global would be defined away from your controller code, and all the other issues which globals generally have.

3. Using module.value

This is my recommended approach: Use module.value to assign the data into the module.

For example,

var myModule = angular.module('example', []);
myModule.value('stuff', { hello: 'foobar' });
myModule.controller('FooCtrl', function($scope, stuff) {
  //the 'stuff' value we created before the controller is
  //automatically injected by Angular's DI system

This approach uses Angular’s own dependency injection mechanics to get the data to where it needs to be. You can define as many controllers or services and simply declare your value’s name as a dependency and it will get automatically injected to it. Doesn’t get much simpler than that!

And as an added benefit, this can be leveraged in testing to mock out the value easily.

In closing

So, approaches 1 and 3 are really the ones I would recommend using. #2 can be used for trivial code, but I would recommend avoiding it since often the case for trivial code is it ends up becoming non-trivial very fast :)

Do you have any other solutions to this? What is your favorite way to solve this, and why?

Spend less time dealing with bad JS code and bugs by automating your testing

Ask any JavaScript developer and they'll probably tell you dealing with bugs suck. Whenever you change something, something else could break - Have you ever thought "I wonder if this is going to break something..." when writing code? I have and it's not exactly my idea of fun.


But it doesn't have to be that way. There are many ways you can use tools and automated testing to do all the tedious testing work - and even help you fix bugs more easily.


Sign up for my newsletter, and I'll send you my best tips on...


  • How to catch problems before things break in production

  • How to use automatic testing to stop worrying if you code is going to break

  • Practical examples of how you can apply this to your own projects

We will never sell your information or spam you, ever.

Share this:
  1. 5 Responses to “3 ways to get backend data to AngularJS”

  2. The blog post is in German but the code examples should explain the idea:


    By Thomas Koch on May 31, 2014

  3. How do you pass data to module.value ?
    The data you want to display is in php and the module.value calls has to be in javascript file

    I assume you keep js and markup different

    By Sudhir on Feb 19, 2015

  4. Sudhir, it’s a bit tricky to be honest. The best way would be if you can initialize your module, and then call the module function with the value from PHP, eg.

    <script src="my-angular-module.js"></script>
    myModule.value('something', <?php echo json_encode($data); ?>);

    This way we would avoid using global variables, and we could even have a default for ‘something’ within the module itself.

    Alternatively, you could place initialization like that within the configuration blocks of your main module. See here: https://docs.angularjs.org/guide/module

    By Jani Hartikainen on Feb 20, 2015

  5. How do u ask for data from server,meaning if there is menu list present in server,how do you display on the frontend

    By samu on Sep 30, 2015

  1. 1 Trackback(s)

  2. Dec 30, 2013: AngularJS best practices: Refactoring existing code to Angular | CodeUtopia - The blog of Jani Hartikainen

Post a Comment

You can use some HTML (a, em, strong, etc.). If you want to post code, use <pre lang="PHP">code here</pre> (you can replace PHP with the language you are posting)