CODEWITHSUNDEEP
javascriptangularjsrazorangularjs-directive
Nikhil Vasdev
Nikhil Vasdev

Reputation: 193

Bootstrapping multiple angular apps on a page causes the error of controller undefined

I have two angular apps on my page. First one is bootstrapped using the "ng-app" directive that is on the main body. Second app is initialized manually using angular.bootstrap method.

First app that is automatically bootstrapped 

<body ng-cloak ng-app="app">
<section id="mainbody">
  <div class="container radar-main-container">
    @RenderBody()
  </div>
</section>

Below is the app.js for the main app

var commonModule = angular.module('common', ['ui.router']);
var appMainModule = angular.module('app', ['common']);

Second app that is manually bootstrapping

@section footerScript {
  angular.bootstrap(document.getElementById('signup'), ['signupApp']);
}

Html

<div id="signup" ng-app="signupApp" ng-controller="SignupController">
  <div ui-view></div>
</div>

Controllers created in the second module:

signupModule.controller("SignupController", ['$scope', '$location',
    function($scope, $location, $window) {
}

signupModule.controller("PackageInfoController", ['$scope', '$location',
    function($scope, $location) {
}

When I run this code I get the error "SignupController" is not a function got undefined and it takes me to this link Error

Upvotes: 1

Views: 576

Answers (2)

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

First of all,Your apps must not be nested (one inside another).You applications must be out it and not on body tag. The second thing is,that you can use ng-app in you html file only one time.

Upvotes: 0

Mikko Viitala
Mikko Viitala

Reputation: 8404

Maybe this helps you out, since it works perfectly fine.

HTML template

<!DOCTYPE html>
<html>    
  <head>
    ...
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-app="app" ng-controller="AppCtrl">
      main
    </div>
    <div id="signup" ng-controller="SignupCtrl">
      signup
    </div>

    <script>
      // @section footerScript
      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById('signup'), ['signup','common']);
      });
  </body>
</html>

app.js

var common = angular.module('common', []);

var app = angular.module('app', ['common']);
app.controller('AppCtrl', function($scope) {});

var signup = angular.module('signup', ['common']);
signup.controller('SignupCtrl', function($scope) {});

Upvotes: 0

Related Questions