gh9 gh9 - 1 year ago 41
AngularJS Question

manual bootstrap angular with http calls

I have a WebAPI service that returns dynamic configuration data. Before my angular app loads I would like to call that service and load the config data into angular. JSFiddle of my attempt at doing that. My question is, after seeing the string test in the console I am seeing nothing else written into the console. How do I get

test 2
wierd wierd
to appear into the console

var app = angular.module('app', [])

app.provider("ConfigService", function () {
var self = this;
self.Settings = {};

self.config = function (data) {
this.$get =
function($http) {
return self;

angular.element(document).ready(function($http) {
function(configService) {
console.log('test 2')
$http.get('').then(function(result) {
console.log('wierd wierd')


angular.bootstrap(document, ['app']);


In response to the question, why I do not run this in phase instead.
In the phase the app is still initializing and sometimes it loads up prior to my configuration section being completed. I wanted 100% guarantee that my config section is loaded first before any of the app is.


EDIT: I have updated the application with your constraints regarding blocking execution until API call is complete.

Try this:

I moved the code to the block. This is where all providers are available and you can use $http and your ConfigService. I kept the bootstrap call in the document ready function, and I also added the $q service so you can block execution of the application until the API call is complete. You can verify this by looking at the order of the test outputs in the console:

'ConfigService', '$http', '$q', 
function(configService, $http, $q) {
  console.log('test 2');
  var deferred = $q.defer();
  $http.get('/6svnemu8/2/').then(function(result) {
  }, function(result){
  console.log("test 3");
     console.log('wierd wierd');


  }, function(result){
    console.log("call failed.");