How to add initial data to angularjs app from rendered html

Question

I'm creating a large AngularJs App, which requires User Login.
After authenticating user, a page is rendered to him and subsequent data is loaded later.

There are two ways for this:

XHR Fetch after Page Load:
This means sending an XHR request in 'run' block or somewhere to get LoggedIn user. say to '/api/current_user.json'
Data Embedded in HTML
To avoid initial load time of above method, I think its good to embed some JSON in Html page as a <script> tag.

However, I'm unable to get this data in 'script' tag from my module.run block.
How can I do that ?

.constant('user',myGlobalUser) take a look on how this topic is managed by mean.io folks — Whisher
– Whisher, Commented Mar 28, 2014 at 8:40

andrbmgi · Accepted Answer · 2014-03-28 07:50:21Z

4

You can use the window object or use ng-init to pass the data from the rendered HTML to Angular:

Window Object

Assign your values to the "window" object. In Angular inject the $window service which references the window object and access your stored values.

Example:

In your HTML file:

<script>
  window.init = { name: "John Doe" };
</script>

In the controller (should work similarly for the run block):

app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {      
  $scope.user = $window.init;
  ...
}]);

Ng-Init

Create a function that initializes the values for you.

In the HTML:

<body ng-controller="MainCtrl" ng-init="initialize( { name: 'Jane Doe' } )">

In the controller:

$scope.initialize = function( json ) {
  $scope.user2 = json;
};

plnkr

edited Mar 28, 2014 at 7:50

answered Mar 28, 2014 at 6:58

andrbmgi

5283 silver badges17 bronze badges

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

3 Comments

Vikas Raturi Over a year ago

Thanks @andrbmgi, but i prefer not to pollute global window object, is there some other way than this or this may be only one?

andrbmgi Over a year ago

Point taken. You could always do delete $window.init; to unpolute ;). I updated the plnkr.

andrbmgi Over a year ago

I included another option going with ng-init. This polutes your $scope with another function. A fix for that... you guessed delete $scope.initialize. The plnkr now contains both soultions side by side.

Collectives™ on Stack Overflow

How to add initial data to angularjs app from rendered html

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related