Inject JSON data to scope on page load (no ajax!)

[Andreas Gerstmayr]

How do I pass JSON data to the scope on page load? I don't want to make a seperate AJAX call (it's not an single-page app).

I've tried the following:
<script type="text/javascript">
$(document).ready(function() { // angularjs gets included at the bottom of the page, so it's required to wait until the DOM and all scripts are loaded
   var $scope = angular.element($('#someWidgetContainer')).scope();
   $scope.data = {...};
});
</script>

But unfortunately at this time $scope is undefined.
The run Event of Module doesn't help either.

There is a dirty hack using setTimeout(...access scope..., 0); but I really don't want to use this code in production.
Another workaround is to bootstrap the application manually (see http://docs.angularjs.org/guide/bootstrap), but I want to use the code to manipulate the scope multiple times in the same page (think of widgets with seperate controller & scope & data to initialize the scope).

Any ideas? I would like to manipulate the scope directly, because e.g. some widgets don't have an controller (they just use the angularjs templating), so no module.constant or SomeWidgetController.data = ... etc..

[Olex Lapshyn]

Why do you need to do this in such way? You can put your JSON into global variable for angular to access later on? Or maybe you can use set is as data at some element and use $.fn.data to access it? Why don't make angular get its own JSON and move this to separate factory/service inside your app?

[Grant Rettke]

In our module.run, we make a promise-based call to code like this:

load: function () {
var deferred = $q.defer();
$http({
url : 'config.json',
method: 'GET'
})
.success(function (data) {
configData = data;
deferred.resolve();
}
).error(function () {
deferred.reject('Sorry we couldn\'t configure the
application for you.');
});
return deferred.promise;
},

If it succeeds, the app runs, if it fails, the app dies gracefully.

All caveats apply regarding security and UX.

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/groups/opt_out.



--
Grant Rettke | ACM, AMA, COG, IEEE
gre...@acm.org | http://www.wisdomandwonder.com/
“Wisdom begins in wonder.” --Socrates
((λ (x) (x x)) (λ (x) (x x)))
“Life has become immeasurably better since I have been forced to stop
taking it seriously.” --Thompson

[Andreas Gerstmayr]

Thanks for the answers

Am Sonntag, 15. September 2013 01:36:20 UTC+2 schrieb Olex Lapshyn:

Why do you need to do this in such way? You can put your JSON into global variable for angular to access later on? Or maybe you can use set is as data at some element and use $.fn.data to access it?

I don't like global variables. I'd like to manipulate the scope directly, not store it somewhere and collect it later for manipulating the scope. And when do I know when I can manipulate the scope? In fact I need just an event where I can listen to when the scope is ready.

Am Sonntag, 15. September 2013 01:36:20 UTC+2 schrieb Olex Lapshyn:

Why don't make angular get its own JSON and move this to separate factory/service inside your app?

What do you mean? An AJAX call? No AJAX please! :)

Am Sonntag, 15. September 2013 14:19:19 UTC+2 schrieb Grant Rettke:

In our module.run, we make a promise-based call to code like this:

load: function () {
        var deferred = $q.defer();
        $http({
          url   : 'config.json',
          method: 'GET'
        })
          .success(function (data) {
            configData = data;
            deferred.resolve();
          }
        ).error(function () {
            deferred.reject('Sorry we couldn\'t configure the
application for you.');
          });
        return deferred.promise;
      },

You use ajax here. But I don't want to use AJAX - it's not an single page app. To request a page, one HTTP request is already made to fetch the generated content from the webserver. I don't want to make 2 requests when it isn't necessary.

[Majid Burney]

You don't want to use the standard document ready event, because that's just when Angular is beginning its bootstrapping process. Instead, hook into said bootstrapping process by declaring a config module. The config module can provide the JSON content as a value that can be injected into controllers/services in another module, provided that other module declares the config module as a dependency.

It's probably easier to illustrate with code. Here's a plunk:

http://plnkr.co/edit/sS8mAc?p=preview