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-22 18:41:38Z

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, 2014 at 18:41

answered Feb 22, 2014 at 18:16

thescientist

2,9581 gold badge21 silver badges15 bronze badges

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

5 Comments

Mr MT Over a year ago

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 docs.angularjs.org/guide/controller documentation on docs.angularjs.org - and their example seems quite similar to mine..

thescientist Over a year ago

@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.

Mr MT Over a year ago

... and it should make a difference where if the scripts are in <head>. I just double checked to be sure - no difference... But you are 100% correct that if I put ng-controller on <body> then everything actually works :) Thanks man !

thescientist Over a year ago

@MrMT no prob. the script placement was merely a technical suggestion, unrelated to the actual problem. glad you got it working.

thescientist Over a year ago

@MrMT actually, in your particular case, it looks like the placement does matter. learn something new everyday! :) stackoverflow.com/questions/16537783/…

Zack Argyle · Accepted Answer · 2014-02-22 18:28:03Z

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, 2014 at 18:28

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

2 Comments

thescientist Over a year ago

that shouldn't be an issue stackoverflow.com/questions/16537783/…

Mr MT Over a year ago

Well, that didn't help - but when I put ng-controller="myAppController" on <body> then everything started to work.

Collectives™ on Stack Overflow

Bootstrapping AngularJS app dynamically

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related