loading a json file then bootstraping app

5,898 views
Skip to first unread message

Alessandro Arnodo

unread,
May 17, 2013, 1:35:26 PM5/17/13
to ang...@googlegroups.com
Hello
I'm developing a mobile app and i need to load a json file before the angular bootstrap being executed.
This file contains app config and similar stuff.

How can i handle this?

Thank you so much
Alessandro

Tony Polinelli

unread,
May 17, 2013, 1:50:46 PM5/17/13
to ang...@googlegroups.com

you dont add an ng-app into the dom, which means that the app wont auto bootstrap, then call :

 angular.bootstrap($j('#domNodeToBootstrapInto'), ['myApp']);




Alessandro

--
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?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.





--
Tony Polinelli
http://touchmypixel.com

Alessandro Arnodo

unread,
May 17, 2013, 2:10:37 PM5/17/13
to ang...@googlegroups.com

Thanks Tony.
How can i pass the loaded json file into the angular app.

I don' want to do something like

window.conf = myLoadedConfigFile

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/QQcKjcG18z0/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

Sander Elias

unread,
May 18, 2013, 4:03:59 AM5/18/13
to ang...@googlegroups.com
Hi Alessandro,

Why not? If you prefer to not having any locals, you should just manually bootstrap angular. I won't go in how to do that, there is plenty of information about that,
do something like:

<!doctype html>
<html>
    <head>
        <title>Sample</title>
    </head>
    <body>
        <main>
            <!-- here comes your stuff -->
        </main>
        <script src="scripts/vendor/angular.js"></script>
        <script>
            function () {
                // code to load config JSON sync
                var myConfig = GoGetConfigSync()

                //bootstrap your angular
                angular.element(document).ready(function() {
                     angular.bootstrap(document);
                   });
                //done bootstrapping
                // you can use the myConfig in your modules as you like it!
            };
        </script>
    </body>
</html>

Regards
Sander Elias

Alessandro Arnodo

unread,
May 20, 2013, 3:11:44 AM5/20/13
to ang...@googlegroups.com
Thank you Sander,
how can i inject the data loaded from the json file in the angular scope just before calling angular.bootstrap?

Sander Elias

unread,
May 20, 2013, 4:15:05 AM5/20/13
to ang...@googlegroups.com
Hi Alessandro,

Based on my previous sample, just do something like this in your controllers (or wherever you need it)

angular.module("myapp").conroller("sample",function ($scope) { $scope.config = myConfig } )

Regards
Sander

Alessandro Arnodo

unread,
May 20, 2013, 4:33:53 AM5/20/13
to ang...@googlegroups.com

Could be a better approach using something like require js to obtain this kind of behavior?



--

Jason Stone

unread,
May 21, 2013, 2:32:40 AM5/21/13
to ang...@googlegroups.com
I think Sander is on the right track, but instead of attaching it to a $scope in a controller, I would create a whole new provider for it.
Specifically a 'constant' so it can be used during 'config()' calls.
eg (If you were using jQuery):

<script>
// On DOM load
$(function () {
  // GET your config from the server
  var myConfig = $.get({url: '/configService'}).done(function (data) {
    // Set your constant provider
    angular.module('myApp').constant('appConfig', data);
    
    // Bootstrap your angular app
    angular.bootstrap(document, ['myApp']);
  });
});
</script>

If you don't need your configuration during any "module().config()" functions, then I would recommend using $routeProvider or $stateProvider and setting a "resolve" property with a function that returns a promise for your configuration.
That way the view won't load until your configuration is ready.

Cheers,
Jason

Eduard Gamonal

unread,
May 21, 2013, 3:59:38 AM5/21/13
to ang...@googlegroups.com
Hi,
You can find 3 strategies for a similar problem in this question http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data

Last week I did almost the same thing. However, I load the config json file after the app is loaded. My first approach was to put it in a scope but you might want to put it in a service. This way it is easier to test, you don't expose the config object and you can have getters and setters to access it. Moreover, the scope doesn't seem the right place to store that. it's where you place the variables that will be shown in a template, which isn't the case for a config file.



--
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.

Sander Elias

unread,
May 21, 2013, 6:14:34 AM5/21/13
to ang...@googlegroups.com
Hi Jason,

He asked how to get it in scope, so I did ;)
Using a constant is also an option, and would also be the prefered way. Perhaps I should switch to being a bit more verbose in my answers ;)

Regards
Sander

Pavlo Yuriychuk

unread,
Jan 23, 2014, 4:10:23 AM1/23/14
to ang...@googlegroups.com
I am solving the same problem. So I have created provider that applies default settings during config and also has load method that uses $http.get to load and apply data on the run. This is not a true bootstrapping but at least I do not rely on jQuery, self-made vehicles and done it with minimal efforts.

'use strict';

angular.module('billing')
  .provider('Sample', ['Default', function (Default) {
    var data = {};

    function configure (config) {
      config = config || {};
      config.data = config.data || Default;
      data = angular.copy(config.data);
    };

    return {
      configure: configure,
      $get: ['$http', function ($http) {
        return {
          doStuff: function () {

          },
          load: load () {
             $http.get(URL).success(function (result) {
                configure(result);
            });
          }
        };
      }]
    };
  }]);


Пʼятниця, 17 травня 2013 р. 20:35:26 UTC+3 користувач Alessandro Arnodo написав:

Alessandro Arnodo

unread,
Jan 23, 2014, 4:16:11 AM1/23/14
to ang...@googlegroups.com
Pavlo, really interesting, I'll digg into during the week-end, thank for share


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.



--
Reply all
Reply to author
Forward
0 new messages