Wait for $http result before initializing angular app

Question

I have an angular app that needs to do a quick http request to get some config information before the rest of the application is initiated, at least before the controllers. Looked into using $UrlRouterProvider, but I did not figure out how to make the app wait for the http be done.

What I need to be finished:

 $http({method: 'GET', url: '/config'}).then(function(res) {
      configProvider.setConfig(res.data.config);
 }

What about creating a base, abstract state, and resolve that request to it? That way you'll have it before the controllers — Alon Eitan
– Alon Eitan, Commented Nov 16, 2017 at 11:47
Using a $stateProvider for example? I tried something like this: .state('app', { abstract: true, url:'/', views: { "content": { templateUrl: "myurl.html"}, resolve { myVar: ['$http', 'myService', function($http, myService) { return $http({method: 'GET', url: 'url'}).then( function(res) { //do stuff }). Not much luck with that — Slagathor
– Slagathor, Commented Nov 16, 2017 at 12:05
Yep, that's exactly what I mean. It works for me so I'm not sure why it didn't work for you, but check the answer - It looks promising — Alon Eitan
– Alon Eitan, Commented Nov 16, 2017 at 12:16

Harpreet · Accepted Answer · 2017-11-16 11:52:51Z

1

You can create a separate js file where you can make http request and then initialize/bootstrap your app via js code instead of ng-app in html code.

Refer the below code:

(function() {
  var application, bootstrapApplication, fetchData;
  application = angular.module('app');
  fetchData = function() {
    var $http, initInjector;
    initInjector = angular.injector(['ng']);
    $http = initInjector.get('$http');
    $http.get('<url>');
  };
  bootstrapApplication = function() {
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['app']);
    });
  };
  fetchData().then(bootstrapApplication);
})();

I hope it helps.

answered Nov 16, 2017 at 11:52

Harpreet

1,60715 silver badges27 bronze badges

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

2 Comments

Slagathor Over a year ago

I maybe rather want a "cleaner" way to do it through app.js with the help of whats hidden in the framework

Harpreet Over a year ago

I just described here the approach with some code hint and this can definitely be improved a lot while implementation. For that need a deeper insight in the problem/code. :)

Pierre Mallet · Accepted Answer · 2017-11-16 13:27:37Z

Resolve must be declared on state, not on the view

change

.state('app', {
    abstract: true,
    url:'/',
    views: {
        "content": {
            templateUrl: "myurl.html"
        },
        resolve {
            myVar: ['$http', 'myService', function($http, myService) {
                   return $http({method: 'GET', url:'url'})
                            .then(function(res) { //do stuff })

to

.state('app', {
    abstract: true,
    url:'/',
    views: {
        "content": {
            templateUrl: "myurl.html"
        }
    },
    resolve {
            myVar: ['$http', 'myService', function($http, myService) {
                   return $http({method: 'GET', url:'url'})
                            .then(function(res) { //do stuff })...

Collectives™ on Stack Overflow

Wait for $http result before initializing angular app

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related