我正在学习angularjs，我创建了2个页面，即welcome.html和queryboard.html。在这个链接的帮助下，我试图实现侧面面板 determine your location using Wifi。
在我的欢迎页面上，我成功地实现了滑动面板。我的欢迎页面有一个轮播，点击轮播上的文本，它重定向到另一个页面queryboard.html但是当加载了queryboard页面时，它会在控制台上抛出错误
$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to:
Error: [$injector:modulerr] Failed to instantiate module pageslide-directive due to:
Error: [$injector:nomod] Module 'pageslide-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument
以下是welcome.html
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="resources/js/main.js"></script>
<script src="resources/js/CarouselController.js"></script>
<script src="resources/js/angular-pageslide-directive.js"></script>
<script src="resources/js/gsenv.js"></script>
</head>
<body>
<style type="text/css">
body {
background: url(/resources/images/nyc.jpg) center top no-repeat;
}
.ng-pageslide {
background: #ac2925;
}
</style>
<div ng-controller="CarouselDemoCtrl" class="container-fluid col-md-12 col-md-offset-10" >
<h1 class="text-center text-primary centered">Welcome to ananta-gs dashboard</h1>
<div>
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="/resources/images/cloud-home.jpg" style="margin:auto;">
<div class="carousel-caption">
<a href="#" ng-click='sendEnvName(slide.text)'>
<h3 class="carousel-caption text-primary center-block">
{{slide.text}}</h3>
</a>
</div>
</uib-slide>
</uib-carousel>
<a href="" style="background-color: #ac2925" ng-show="errorShow" ng-click="toggle()">There are exceptions during app initialization, click here to see details</a>
</div>
<div>
<pageslide ps-open="checked" ps-side="left" ps-squeeze="true">
<div style="padding:20px" id="demo-right">
<h2>Exceptions : </h2>
<p style="word-wrap: break-word">{{exceptions}}</p>
<a ng-click="toggle()" class="button">Close</a>
</div>
</pageslide>
</div>
</div>
</body>
</html>
js for queryboard.js
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.errorShow = false;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.sendEnvName = function (data) {
dataShare.sendEnvDetails(data);
window.location.href = "query/queryboard.html";
}
$scope.addSlide = function (envName) {
slides.push({
text: envName,
id: currIndex++
});
};
$http.get("http://localhost:8080/getEnvList")
.success(function (data) {
var envs = data.spaceLookUpDetailsList;
for (var i in envs) {
$scope.addSlide(envs[i].envName);
}
if(data.exceptions) {
$scope.errorShow = true;
$scope.exceptions = data.exceptions;
}
})
.error(function (errordata) {
$uibModal.open({
templateUrl: 'error/ErrorModal.html',
controller: 'ErrModalInstanceCtrl',
resolve: {
error: function () {
console.log('error=' + errordata.errorMessage)
return errordata;
}
}
});
});
$scope.toggle = function () {
$scope.checked = !$scope.checked;
}
});
angular.module('ui.bootstrap.demo').controller('ErrModalInstanceCtrl', function ($scope, $uibModalInstance, error) {
$scope.errormessage = error.errorMessage;
$scope.stacktrace = error.stackTrace;
$scope.ok = function () {
$uibModalInstance.close('closed');
};
});
下面是queryboard.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<script src="../../../resources/js/angular-pageslide-directive.js.js"></script>
</head>
<script type="text/css">
.app-modal-window .modal-dialog {
width: 500px;
}
</script>
<script src="../../../resources/js/main.js"></script>
<script src="../../../resources/js/TypeAheadController.js"></script>
<script src="../../../resources/js/gsenv.js"></script>
下面是gsEnv.js，用于在多个页面之间传输数据作为请求参数
angular.module('ui.bootstrap.demo').factory('dataShare', function ($window) {
var KEY = 'GS.SelectedENV';
var sendEnvDetails = function (data) {
var mydata = $window.sessionStorage.getItem(KEY);
mydata = data;
$window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
};
var getData = function () {
var mydata = $window.sessionStorage.getItem(KEY);
if (mydata) {
mydata = JSON.parse(mydata);
}
return mydata || [];
};
return {
sendEnvDetails: sendEnvDetails,
getData: getData
};
});
仅适用于SPA的angularjs，或者我是否需要为每个html页面声明单独的应用程序，并且它是否支持多个页面之间的数据传输