CODEWITHSUNDEEP
angularjs
Mr MT
Mr MT

Reputation: 658

Bootstrapping AngularJS app dynamically

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

Upvotes: 0

Views: 973

Answers (2)

thescientist
thescientist

Reputation: 2948

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.

Upvotes: 1

Zack Argyle
Zack Argyle

Reputation: 8407

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']);

Upvotes: 0

Related Questions