Bootstrapping AngularJS app dynamically

Question

I have a problem with boostrapping an angularjs app - with initialization code in the controller. The simplified test-case is like this (index.js):

var myApp = angular.module( 'myApp', []);

myApp.controller( 'myAppController', [ '$scope', function($scope) {
    console.log('never shown');
    $scope.test = 'constructor called';
    // removed more init code
}]);

$(document).ready(function(){
    angular.bootstrap( document, ['myApp']);
    console.log('Finished boostrapping.');
});

The HTML file for this test-case:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TeST</title>
    </head>
    <body>
        {{test}}
        <script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

The result is that console output only says "Finished bootstrapping" - and the controller function is never invoked. .. This baffles me a little, but this is my first angular 1.2 app. I get the same result If I put ng-app="myApp" in the tag and let angular bootstrap the app automatically. ...

thescientist · Accepted Answer · 2014-02-22T18:41:38.673

1

you never set ng-controller anywhere in your markup.

also, you should either put your script tags in the head, or after </body>.

edit: when using bootstrap this way, the placement of the <script> tags goes matter.

edited Feb 22 '14 at 18:41

answered Feb 22 '14 at 18:16

thescientist

2,906
1
20
15

Well no I do not set the controller - but this is the whole point - that the app will be boostrapped dynamically some time after the page load. The controller should be set with .controller(..) call. I checked the http://docs.angularjs.org/guide/controller documentation on docs.angularjs.org - and their example seems quite similar to mine.. – Mr MT Feb 22 '14 at 18:23
@MrMT what ng-app does is completely different from what ng-controller does. You should review the documentation in that link again because each case has ng-controller in the example. bootstrap just sets ng-app. – thescientist Feb 22 '14 at 18:27
... and it should make a difference where if the scripts are in . I just double checked to be sure - no difference... But you are 100% correct that if I put ng-controller on then everything actually works :) Thanks man ! – Mr MT Feb 22 '14 at 18:28
@MrMT no prob. the script placement was merely a technical suggestion, unrelated to the actual problem. glad you got it working. – thescientist Feb 22 '14 at 18:31
@MrMT actually, in your particular case, it looks like the placement does matter. learn something new everyday! :) http://stackoverflow.com/questions/16537783/which-method-should-i-use-to-manually-bootstrap-my-angularjs – thescientist Feb 22 '14 at 18:33

score 0 · Answer 2 · answered Feb 22 '14 at 18:28

0

The first parameter to the angular.bootstrap method is an element. Currently you are passing in document, which is not an element.

Try 
    angular.bootstrap(document.documentElement, ['myApp']);
or  
    angular.bootstrap(document.body, ['myApp']);

answered Feb 22 '14 at 18:28

Zack Argyle

8,057
4
29
37

that shouldn't be an issue http://stackoverflow.com/questions/16537783/which-method-should-i-use-to-manually-bootstrap-my-angularjs – thescientist Feb 22 '14 at 18:32
Well, that didn't help - but when I put ng-controller="myAppController" on then everything started to work. – Mr MT Feb 22 '14 at 18:32

Bootstrapping AngularJS app dynamically

2 Answers2