How to initialize controllers manually after bootstrapping angular app using angular.bootstrap?

Question

Found solution to this question.
I have a normal javascript app.I want to embed my angularjs app into it by bootstrapping manually.The problem is that "controllers with that module is not at all initialized"

index.html:

<html>
  <head> <title>Including angular app into another</title> </head>
  <body>
    //I have normal javascript app
    <div>First App</div>

    <div id="secondApp">
      <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"> </div>
    </div>
    //included all libraries required for the app
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    //main.js
    <script src="scripts.js"></script>
  </body>
</html>

scripts.js:

angular.module('sampleApp', []);
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);

angular.module('sampleApp')
 .controller('MainCtrl', function($scope, $rootScope, $timeout) {
   //i have included the functionality required for my second app
 });

But it is not embedding angular app into first app, getting an error "Argument 'MainCtrl' is not a function, got undefined"

I don't understand, where i am doing wrong.

Just bootstrap the whole app in index.html instead of doing this in scripts.js like this

<script type="text/javascript">
  angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('secondApp'), ['assetWidgetApp']);
 });
</script>

Thanks!!!

You might try something like what this question has: http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page — drew_w, May 07 '14 at 12:11

score 1 · Answer 1 · answered May 07 '14 at 12:18

The order of the statements is wrong. It should be:

angular.module('sampleApp', []);

angular.module('sampleApp')
 .controller('MainCtrl', function($scope, $rootScope, $timeout) {
   //i have included the functionality required for my second app
 });

// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);

You need to define the controller before you bootstrap the angular app.

How to initialize controllers manually after bootstrapping angular app using angular.bootstrap?

1 Answers1