Load AngularJS after Office Initialized

This JavaScript code snippet shows how to load an AngularJS application after Office has been initialized (or some other event has occurred). The key point here is that you need to do a manual bootstrap because the DOMContentLoaded event will have already been fired.

Office.initialize = function () {

    //load angular app after office has been initialized
    $.getScript('services.js', function () {
        $.getScript('app.js', function () {
            $.getScript('controllers.js', function () {

                //manually start angular application
                angular.bootstrap($('#container'), ['myApp']);

            });
        });
    });

}

Links:
- Angular Bootstrap
- JavaScript API for Office (v1.1)
- jQuery.getScript()

This entry was posted in Uncategorized. Bookmark the permalink.
  • http://www.andrewconnell.com/ Andrew Connell

    OK this fixed my issue (I didn’t have to manually load the scripts), but I don’t understand exactly why I had to do this & why I couldn’t just use the ngApp directive.

  • nabil

    Thank you !

    in my case, i have only wrote an angular boostrap: angular.bootstrap($(‘#container’), ['myApp']);

    and of course I have loaded all my scripts from my HTML page. And no ng-app directive on my HTML page…