Manually bootstrap angular app to create async app initialization

Question

I am trying to manually bootstrap my angular app in order to load some data asynchronously that my app relies on. See this article

The problem is no matter what I try I cant get access to an instance of a factory using angular.injector. See this plunker

The problem is anytime I run code like this:

var Injector = angular.injector(["MyAPP", "ng"]);
var initService = Injector.get("MyService");

I just get unknown provider errors.

Can someone please help me make this plunker work, or point me to a better way to create an angular app initialization service. thanks,

I don't see anything wrong with what you posted, but there really isn't much there. Can you provide a plunkr that demonstrates the issue? — GPicazo
– GPicazo, Commented Jul 13, 2015 at 22:14
Have you taken a look at the official documentation? docs.angularjs.org/guide/bootstrap — csbarnes
– csbarnes, Commented Jul 13, 2015 at 22:17
GPicazo, if you look at the plunker you will see that the app is not bootstrapping because initApp is throwing an error due to an unknown provider isssue. the root of my question is how to get the injector service to acctually work and allow access to a factory instance. — Alex Haines
– Alex Haines, Commented Jul 13, 2015 at 22:35

David Atchley · Accepted Answer · 2015-07-14 00:59:02Z

1

Edited: Updated to reflect our discussion in the comments thread.

To setup the initApp() function to initialize, asynchronously using a Promise, any app level services required, including the factories (as defined in the original plunker) you can have it simply return a Promise that will resolve when the initial injections are complete; and once that is done, call your bootstrapApplication() method to bootstrap Angular on the page.

function initApp() {
  return new Promise(function(resolve, reject) {
        var Injector = angular.injector(["ng","plunker"]);
        Injector.invoke(['factoryTwo', function(factoryTwo) { 
          console.log(factoryTwo.test);
          resolve();
        }]);
  });
}


function bootstrapApplication() {
  angular.element(document).ready(function() {
      angular.bootstrap(document, ["plunker"]);
  });
}  

initApp().then(bootstrapApplication);

Here's a link to the forked plunker with the above code snippet working: http://plnkr.co/edit/764AqLZf6rQHwPZ1RAZc?p=preview

edited Jul 14, 2015 at 0:59

answered Jul 13, 2015 at 22:18

David Atchley

1,2048 silver badges10 bronze badges

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

8 Comments

Alex Haines Over a year ago

The whole point is to make initApp a promise and bootstrap the app after the promise is fuffiled. Also this does not make it work, if you look at the console the initApp function is throwing an error.

Alex Haines Over a year ago

also the angular object and methods are available before bootstrapping

David Atchley Over a year ago

True, I hadn't had the console opened. Here's a fork of that plunker with the initApp working as Promise and loading the Factory. Needed to load ng via injector before plunker as well; but this works as you describe: plnkr.co/edit/764AqLZf6rQHwPZ1RAZc?p=preview

Alex Haines Over a year ago

Hey David awesome this works. Thanks! Unfortunately it still is not working in my main app. I get --> [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- $location <- $urlRouter <- $state. I think this is because i need to inject something else besides just ng. do you know what it is that i need to inject.

David Atchley Over a year ago

If you click that link in the console it should take you to an Angular error page that might give you more detail. I don't know what else you're depending on.

|

S. Ali Mihandoost · Accepted Answer · 2015-07-13 22:44:38Z

0

you must bootstrap loaded ajax content before insert in page

You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding.

In your fiddle, it would look something like this.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Obviously, $compile must be injected into your controller for this to work.

Read more in the $compile documentation.

answered Jul 13, 2015 at 22:44

S. Ali Mihandoost

3,1343 gold badges21 silver badges24 bronze badges

Collectives™ on Stack Overflow

Manually bootstrap angular app to create async app initialization

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related