Angular.bootstrap()

A few days ago I started a new Angular application that is embedded into a Grails application. Since this is the first Angular application in this Grails application I started with a simple “Hello, World” app to make sure everything was working correctly. Turns out it didn’t.

I loaded the angular script, had jQuery in the page, loaded my Javascript file with the angular module definition, used ng-app and ng-controller, and output the simple hello variable I declared in the controller. All that was shown was {{greeting}} on the page.

After a lot of checking and rechecking I came to the conclusion that there was no actual problems with my setup, but instead was a deeper problem. The Angular application wasn’t being initialized automatically. Because the page I was embedding the Angular application onto is being rendered dynamically, I assume the ng-app wasn’t being found at the correct time.

A few minutes later I found that you can manually initialize an angular application in one line:

angular.bootstrap(document, ['myApp'])

After doing that the application initialized and I was greeted with the routine “Hello, world”. Problem solved.