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?

Do you want to level-up your JavaScript skills and improve the quality of the code you write? Let me show you how unit tests help you achieve that

Sign up for my newsletter and I'll show you...

  • How tests build a safety net, which can help eliminate more than 2x the bugs - without spending huge amounts of time writing them
  • How to easily write your first JavaScript unit test with Mocha, even if you have ZERO prior experience
  • A technique that makes writing tests easy - many developers never learn this!
  • And I'll even tell you my biggest testing mistake so you can avoid it yourself, which has even caused customer data loss

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)