AngularJS Manually Bootstrapping a module

Question

My html...

<body id="main">
  {{pageName}}
</body>

My JS:

angular.module('myApp',[])
  .controller('myController', function($scope){
   console.log('init');
   $scope.pageName = 'My page';
});

angular.element(document).ready(function(){
   angular.bootstrap(document.getElementById('main'), ['myApp']);
});

My Resulting HTML:

{{pageName}} instead of 'My Page'

I can do this

<body id="main" ng-controller="myController">
</body>

and it will start working. But, what is the point. Why do I necessarily have to use ng-controller ?

I hope I have made myself clear. Hoping someone would respond to this.

Mr Lister · Accepted Answer · 2013-11-12 12:10:45Z

1

I think the reason is that you are setting pageName in myController but the div cannot use it as the controller is neither defined on it or its parent.

pageName should be set on $rootScope to make it work. You can define that at the run block of module like

angular.module('myApp',[]).run(function($rootScope) {
  $rootScope.pageName='My Page';
});

This run block runs after angular has bootstrapped the application. See here
http://docs.angularjs.org/guide/module

edited Nov 12, 2013 at 12:10

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 12, 2013 at 4:37

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Manually Bootstrapping a module

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related