我完全有可能在做一些愚蠢的事情...... 错误的完整堆栈跟踪
Error: [ng:btstrpd] App Already Bootstrapped with this Element < html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths ng-scope mdl-js js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache
此错误发生在我的index.html 文件中。默认情况下，我路由到login.html。它会持续循环。正在创建许多ng-view。 这是我的 script.js 和 index.html
// create the module and name it app
var app = angular.module('app', ['ngRoute','luegg.directives']);
// configure our routes
app.factory("Data", function(){
var pagesData = {};
var loginData = {};
var data = {};
// var setPageName = function(x){
// pagesData.pageName = x;
// console.log(x);
// };
//
// var setPageId = function(x){
// pagesData.pageId = x;
// console.log(x);
// };
// var getPageData = function(){
// return pagesData;
// };
// return {pageData : pagesData.pageName};
return {
getpageData : function () {
console.log(pagesData);
return pagesData;
},
setPageName : function (name) {
pagesData.pageName = name;
console.log("1111111111111");
console.log(pagesData);
},
setPageId : function (id) {
pagesData.pageId = id;
console.log("1111111111111");
console.log(pagesData);
},
setUserName : function (name) {
loginData.userName = name;
console.log("1111111111111");
console.log(pagesData);
},
setUserEmail : function (mail) {
loginData.userEmail = mail;
console.log("1111111111111");
console.log(pagesData);
},
getLoginData : function () {
console.log(pagesData);
return loginData;
}
}
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login-2.html',
controller : 'loginCtrl'
})
.when('/page', {
templateUrl : 'pages.html',
controller : 'myPagesCtrl'
})
.when('/try', {
templateUrl : 'try.html',
controller : 'myctrl'
});
});
app.controller('myPagesCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('myctrl', function($scope) {
$scope.message = 'Look! I am an about page.';
});
app.controller('mainController', function($scope,$location) {
scope.message = 'Look! I am an about page.';
});<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title> Monarch UI - Bootstrap Frontend & Admin Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-blue.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/images/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/images/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/images/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../assets/images/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../assets/images/icons/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/bootstrap/css/bootstrap.css">
<!-- HELPERS -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/animate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/backgrounds.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/boilerplate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/border-radius.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/grid.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/page-transitions.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/spacing.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/typography.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/utils.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/colors.css">
<!-- ELEMENTS -->
<link rel="stylesheet" type="text/css" href="../../assets/elements/badges.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/buttons.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/content-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/dashboard-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/forms.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/images.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/info-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/invoice.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/loading-indicators.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/menus.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/panel-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/response-messages.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/responsive-tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/ribbon.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/social-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tile-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/timeline.css">
<!-- ICONS -->
<link rel="stylesheet" type="text/css" href="../../assets/icons/fontawesome/fontawesome.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/linecons/linecons.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/spinnericon/spinnericon.css">
<!-- WIDGETS -->
<link rel="stylesheet" type="text/css" href="../../assets/widgets/accordion-ui/accordion.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/calendar/calendar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/carousel/carousel.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/justgage/justgage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/morris/morris.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/piegage/piegage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/xcharts/xcharts.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/chosen/chosen.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/colorpicker/colorpicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datatable/datatable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker-ui/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dialog/dialog.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropdown/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropzone/dropzone.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/file-input/fileinput.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch-alt.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/ionrangeslider/ionrangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jcrop/jcrop.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jgrowl-notifications/jgrowl.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/loading-bar/loadingbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/maps/vector-maps/vectormaps.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/markdown/markdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/modal/modal.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-select/multiselect.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-upload/fileupload.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/nestable/nestable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/noty-notifications/noty.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/popover/popover.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/pretty-photo/prettyphoto.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/progressbar/progressbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/range-slider/rangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slidebars/slidebars.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slider-ui/slider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/summernote-wysiwyg/summernote-wysiwyg.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tabs-ui/tabs.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/theme-switcher/themeswitcher.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/timepicker/timepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tocify/tocify.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tooltip/tooltip.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/touchspin/touchspin.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/uniform/uniform.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/wizard/wizard.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/xeditable/xeditable.css">
<!-- SNIPPETS -->
<link rel="stylesheet" type="text/css" href="../../assets/snippets/chat.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/files-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/login-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/notification-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/progress-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/todo.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/user-profile.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/mobile-navigation.css">
<!-- APPLICATIONS -->
<link rel="stylesheet" type="text/css" href="../../assets/applications/mailbox.css">
<!-- Admin theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/layout.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/color-schemes/default.css">
<!-- Components theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/default.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/border-radius.css">
<!-- Admin responsive -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/responsive-elements.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/admin-responsive.css">
<!-- JS Core -->
<script type="text/javascript" src="../../assets/js-core/jquery-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-widget.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-mouse.js"></script>
<script type="text/javascript" src="../../assets/widgets/interactions-ui/sortable.js"></script>
<script type="text/javascript" src="../../assets/jquery.ns-autogrow/dist/jquery.ns-autogrow.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-position.js"></script>
<!--<script type="text/javascript" src="../../assets/js-core/transition.js"></script>-->
<script type="text/javascript" src="../../assets/js-core/modernizr.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-cookie.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="../../assets/angular/app.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/angular/page-animations.css">
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/myPagesController.js"></script>
<script type="text/javascript" src="scripts/about.js"></script>
<script type="text/javascript" src="scripts/loginController.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
<script type="text/javascript" src="scripts/chosen-sort.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-2.4.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen-demo.js"></script>
<script type="text/javascript" src="../../assets/widgets/accordion-ui/accordion.js"></script>
<script type="text/javascript" src="../../assets/angularjs-scroll-glue/src/scrollglue.js"></script>
<script type="text/javascript" src="../../assets/angular-xeditable/js/xeditable.js"></script>
<script type="text/javascript" src="../../assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard-demo.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/dropzone/dropzone.js"></script>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/tabs/tabs.js"></script>
<script type="text/javascript" src="../../assets/widgets/parsley/parsley.js"></script>
</head>
<body>
<div ng-view>
</div>
<!-- <button><a href="#/pages"><i class="fa fa-home"></i> Home</a></button>
<a href="#/about"><i class="fa fa-shield"></i> About</a> -->
</body>
</html>最佳答案
您的问题是这样的:
.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
})
您不需要在此处指定“index.html”。 index.html 将由您的服务器加载。当检测到“/”路径时，您需要传递要加载到该index.html中的ng-view的模板文件。
编辑:正如我的评论中提到的。您的应用程序中也应该只有 1 个 ng-app 指令。该指令引导 Angular，并且只需要一次。
关于javascript - NG :btstrpd err App Already Bootstrapped with this Element?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41810153/