1

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

Mikko Viitala
  • 8,344
  • 4
  • 37
  • 62
Nikhil Vasdev
  • 183
  • 1
  • 3
  • 14
  • so is `signupModule` defined as `var signupModule = angular.module('signupApp');` ? – Claies Jan 22 '15 at 12:06
  • Yes as follows: var signupModule = angular.module('signupApp', ['common']); – Nikhil Vasdev Jan 22 '15 at 12:08
  • you should not use `ng-app` for the modules you're manually bootstrapping. see **[angular documentation](https://docs.angularjs.org/guide/bootstrap)** – mikelt21 Jan 22 '15 at 19:16
  • possible duplicate of **http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page** – mikelt21 Jan 22 '15 at 19:18

2 Answers2

0

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) {});
Mikko Viitala
  • 8,344
  • 4
  • 37
  • 62
  • Well you are including the "signup" div already. But what if I have loaded it using MVC razor engine [@RenderBody] syntax. At that time it is giving the error. – Nikhil Vasdev Jan 23 '15 at 07:53
  • Not familiar with razor. Updated the answer wrapping bootstrapping inside doc ready. If that's not helping then you need help from someone else. Also, added the razor tag to your question. – Mikko Viitala Jan 23 '15 at 18:52
0

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.

Hazarapet Tunanyan
  • 2,809
  • 26
  • 30