declaring 2 app in angular doesn't work

问题

I am trying to have 2 angular modules in the same HTML file. I am implementing an SPA and the second app is intended to be used for 1 partial HTML. Since the second one is under the first, am having the folowing error :

Error: ng:btstrpd App Already Bootstrapped with this Element.

Here is my code:

controller.js:

var app = angular.module('myApp' );

app.controller('loginController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {  
  //code
}]);

app.controller('logoutController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {
   //code 
}]);

app.controller('registerController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {
    //code 
}]);

var app2 = angular.module('meetupApp', ['ngResource']);

app2.controller('meetupsController', ['$scope', '$resource', function ($scope, $resource) {
  //code 
}]);

//here am trying to bootstrap app2
/*  var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {
  angular.bootstrap(dvSecond, ['app2']);
});*/
//angular.bootstrap(document.getElementById("container2"), ["app2"])
angular.bootstrap(document, ['meetupApp']);

home.html:

<h1>Yo!</h1>
<div id="container2" ng-controller="meetupsController">
    <a ng-click='logout()' class="btn btn-default">Logout</a>
    <ul>
        <li ng-repeat="meetup in meetups">
            {{meetup.name}}
        </li>
    </ul>
    <form>
        <input type="text" placeholder="Meetup name" ng-model="meetupName"></input>
        <button ng-click='createMeetup()' type="submit" >Add</button>
    </form> 
    <h1>'we have '+{{meetups.length}}</h1>
</div>

index.html:

<!doctype html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>MEAN Auth</title>
        <!-- styles -->
        <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" >
            <div ng-view></div>
        </div>

        <!-- scripts -->
        <script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.min.js"></script>
        <script src="./main.js"></script>
        <script src="./services.js"></script>
        <script src="./controllers.js"></script>

    </body>
</html>

Can anyone help?

回答1:

Follow this reference here for angular.bootstrap

Your code should look like:

angular.bootstrap(document, ['meetupApp']);

Usage:

angular.bootstrap(element, [modules], [config]);

Here in your case the [modules] is 'meetupsController' and not the var 'app2'.

来源：https://stackoverflow.com/questions/40240701/declaring-2-app-in-angular-doesnt-work

标签

javascript

angularjs

mean-stack