以角度声明 2 应用程序不起作用答案

【问题标题】：declaring 2 app in angular doesn't work以角度声明 2 应用程序不起作用
【发布时间】：2016-10-25 13:01:04
【问题描述】：

我试图在同一个 HTML 文件中包含 2 个角度模块。我正在实现一个 SPA，第二个应用程序旨在用于 1 个部分 HTML。由于第二个在第一个之下，因此出现以下错误：

错误：ng:btstrpd 应用程序已使用此元素引导。

这是我的代码：

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>

谁能帮忙？

【问题讨论】：

你的 ng-app 价值是什么？？
您的意思是应用程序的名称？如果是这样，它的 app2

标签： javascript angularjs mean-stack

【解决方案1】：

Follow this reference here for angular.bootstrap

您的代码应如下所示：

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

用法：

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

在您的情况下，[modules] 是 'meetupsController' 而不是 var 'app2'。

【讨论】：

10q 现在我有另一个错误错误：ng:btstrpd App already bootstrapped with this element ''
您可能还想编辑 Q 以共享您的 HTML 代码。
阅读 angular.bootstrap 以清楚地了解 Angular 初始化过程的工作原理。我认为您声明您的 ng-app 错误。
好的，同时你能帮我编辑问题吗
在已引导的元素上调用 angular.bootstrap 时发生错误。请注意，出于引导目的，元素与 document.xml 相同。因此，在您的代码中，<html ng-app="myApp"> 已经在引导元素 'document' 并且通过 angular.bootstrap(document, ['meetupApp']); 您正在尝试引导一个已经引导的应用程序，因此会出现错误。