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.

Teodor Vladutu · Answer 2 · 2014-05-07T12:17:40.840

-1

Wrap your content in:

<div ng-app="sampleApp">
    <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>
</div>

UPDATE: to bootstrap the app manually:

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

More detailse here

I have created a fiddle.

edited May 07 '14 at 12:17

answered May 07 '14 at 12:07

Teodor Vladutu

766
8
15

1

The whole point of OPs approach was to not automatically bootstrap the angular app. (Means: no use the `ng-app` attribute.) – TheHippo May 07 '14 at 12:10

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

2 Answers2