在角度中声明2个应用程序不起作用 [英] declaring 2 app in angular doesn't work
本文介绍了在角度中声明2个应用程序不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在同一HTML文件中包含2个angular模块.我正在实施SPA，第二个应用程序打算用于1个部分HTML.由于第二个在第一个之下，因此出现以下错误:
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 :
错误:ng:btstrpd应用程序已与此元素一起启动.
Error: ng:btstrpd App Already Bootstrapped with this Element.
这是我的代码:
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>
任何人都可以帮忙吗?
推荐答案
您的代码应如下所示:
angular.bootstrap(document, ['meetupApp']);
用法:
angular.bootstrap(element, [modules], [config]);
在您的情况下，[modules]是'meetupsController'，而不是var'app2'.
Here in your case the [modules] is 'meetupsController' and not the var 'app2'.
这篇关于在角度中声明2个应用程序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
