AngularJS - Passing values from backend to frontend

Question

What's the best way to pass a value from the backend to AngularJS in the frontend? I'm using Django and the templates are able to spit out values that I need, however I'm not sure what's the best practice on passing these values to AngularJS.

Think of a blog post and its comments, If I had an AngularJS service that retrieves all the comments of a certain blog post by passing the post ID to the service, and Django is rendering the HTML template and it does know what's the post ID, however I need to pass this post ID to AngularJS and subsequently to the service.

One idea is to have it in a hidden <input> and assign this input to a model. Not very appealing.

Another one is to have a directive and pass this value in an attribute to this directive, this way I would be able to access this attribute's value:

// Django (or any backend) is rendering {{ object.value }}
<div class="myDirective" data-object-id={{ object.value }}>
   ...
</div>

angular.module('myDirectives', []).
    directive('myDirective', function() {
        return {
            restrict: 'C',
            transclude: false,
            link: function postLink($scope, $element, $attrs) {
                // $attrs.objectId would have the value
            }
        }
    });

These two approaches look fine. But I'm wondering if there is a cleaner way of doing this? Any approach that follows AngularJS best practices?

pkozlowski.opensource · Accepted Answer · 2012-11-24 20:05:48Z

22

If you need to initialize only a handful of model values from a view the ng-init directive might be what you are looking for: http://docs.angularjs.org/api/ng.directive:ngInit

Using it you could simply write:

<div ng-init="myModel=backend-generated-value-here">
   ...
</div>

Having said the above you might have a bit of hard-time finding best practices for your use-case as AngularJS is focused on Web2.0, full-client-side web applications. At the moment it doesn't play ideally with the server-side generate content. It might change in the future versions of AngularJS.

answered Nov 24, 2012 at 20:05

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aziz Alfoudari Over a year ago

Thanks. I would say around 90% of my application has been transformed to client-side while the backend (Django) is purely serving rest APIs.

Charlesthk Over a year ago

As the documentation says, ng-init is only appropriate with ng-repeat, a better way would be to create a custom directive to pass data from html to controller.

nsx Over a year ago

I am curious about how both Django compiler and AngularJS should work with this solution... are they both suppose to read this same code area at a time?

Tiago Roldão · Accepted Answer · 2012-11-24 16:49:06Z

9

If all you need is to setup initial values for a given "page" (meaning backend call to a view) then you can do as you demonstrated. I would only make it "cleaner" by setting up a global variable via javascript, like so:

// Django (or any backend) is rendering {{ object.value }}
<script>
  var backendVars = {
    {{object.name}} : {{object.value}}
    //and any other objects, manually parsed
  }
</script>

And read it on with angular on the bootstrapping process.

However, angularJS is a MVC of it's own, so you may want to be able to set/get data or backend controllers' processes, without necessarily reloading the entire page. The "cleanest" way is then to make a web service to return the data you need (i.e. a view that returns JSON, for instance) and retrieve it via $http or $resource service:

angular.module('myApp', []).
  controller('MainCtrl', function($scope, $html) {
    $html({
    method: 'GET',
    url: '/your/JSON/view.json'
      }).
      success(function(data, status){
        $scope.yourData = data;
      }).
      error(function(data, status){
        //whatever you need to do if the data is not available
      });
  }

Also, I should note that you shouldn't put data and logic directly on directives - they are meant for DOM manipulation - instead get your information on a controller, and then pass it on to a directive via scope inheritance, attributes or 2-way data binding. Hope it helps.

answered Nov 24, 2012 at 16:49

Tiago Roldão

10.7k3 gold badges32 silver badges28 bronze badges

4 Comments

Aziz Alfoudari Over a year ago

I cannot invoke a web service because it depends on the value the backend is passing. Think of a blog post and the view that shows this blog post, if I had an API that returns this blog post information I need to pass the post ID to the web service in order to retrieve its data.

Tiago Roldão Over a year ago

Then the first part of the answer is what you were asking for. But it isn't "angulary" - you are using a big (and heavily structured) MVC framework to do the job of a smaller, toolbelt-like framework (like jQuery, or something more model-oriented). In angular, you would think of it this way: why call you.com/blog/123 and bootstrap an app with every different page, when you can call you.com/#/blog/123 and use $route and $html to get the blog content, never leaving the page (app) as you change views? Again, if it is for something like a blog, angular may not be the best choice.

Aziz Alfoudari Over a year ago

You have got a point. I would rather not pollute the global namespace though, I'm trying to avoid global variables as much as possible. Thanks for your answer, I will either go for the two approaches I mentioned or use ng-init as @pkozlowski.opensource described.

Jayr Motta Over a year ago

There is a problem with Thiago's answer and AngularJS approach to this kind of thing IMHO. According to @pkozlowski.opensource, "AngularJS is focused on Web2.0, full-client-side web applications. At the moment it doesn't play ideally with the server-side generate content." But using "you.com/#/blog/123" and "$route and $html to get the blog content" falls into another set of client problems related with the dependency of a JavaScript Virtual Machine and hashbangs, they say it breaks the web (isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs). What to do then?

David Lam · Accepted Answer · 2016-05-10 07:13:48Z

9

I believe the proper way to do this is for the server to render a script with a value provider, then dependency-inject it in your app. Like so:

index.php:

<html ng-app='myApp'>

<head>
    <title>AngularJS Back to Front</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src='index.js'></script>
    <?php
        $globals = array(
            'count' => 1, 
            'title' => 'Active users',
            'users' => array(
                'name' => 'john',
                'age'  => 21
            )
        );

        $globalsJSON = json_encode( $globals )
    ?>

    <script>
        myApp.value('globals', <?=$globalsJSON;?>);
    </script>
</head>

<body ng-controller="myController">
    <div>{{title}}</div>
</body>

</html>

index.js:

var myApp = angular.module( 'myApp', [] );

myApp.controller( 'myController', [ 'globals', '$scope', function( globals, $scope ) {
    // Copy globals to scope
    for ( var property in globals ) {
        $scope[ property ] = globals[ property ];
    }
}]);

edited May 10, 2016 at 7:13

David Lam

4,9863 gold badges25 silver badges35 bronze badges

answered Jul 11, 2014 at 11:25

Izhaki

23.6k9 gold badges72 silver badges107 bronze badges

1 Comment

user1969453 Over a year ago

Adding php to an already complicated situtation doesn't seem good to me.

Collectives™ on Stack Overflow

AngularJS - Passing values from backend to frontend

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related