我现在很沮丧。 Angular 路由文件已正确下载，但我无法在我的 Angular 用户界面中使用路由。
我已经使用java作为后端，并且正在尝试使用Angular(第一次作为UI)
这是我的代码: 主页 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html ng-app="scplApp" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link href="<c:url value='/static/css/bootstrap.css'/>" rel="stylesheet"/>
<link href="<c:url value='/static/css/styles.css'/>" rel="stylesheet"/>
<title>SCPL Home Screen</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" title="PNL-Report" rel="home">
<img src="<c:url value="/static/img/pnl-logo-cyan.png"/>" alt="snapdeal-X"></img>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#upload">Upload Files</a></li>
</ul>
</div>
</div>
</nav>
<!-- Start Logo Section -->
<section id="logo-section" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo text-center">
<h1>PNL</h1>
<span>Forward Freight Reports</span>
</div>
</div>
</div>
</div>
</section>
<!-- End Logo Section -->
<br/><br/>
<section class="container" ng-view="true"></section>
<div class="container" ng-controller="forwardFreightCtrl">
<div class="row">
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getWeightPerShipmentAir()">
Weight/Shipment Air
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getWeightPerShipmentSurface()">
Weight/Shipment Surface
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getNumShipmentAir()">
No. Shipments Air
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getNumShipmentSurface()">
No. Shipments Surface
</button>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getRatePerKGAir()">
Rate/KG Air
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getRatePerKGSurface()">
Rate/KG Surface
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getSalienceAir()">
Salience Air
</button>
</div>
<div class="col-md-3 text-center">
<button type="button" class="btn btn-primary" ng-click="getSalienceSurface()">
Salience Surface
</button>
</div>
</div>
<br/><br/>
<h2>{{ data.reportTitle }}</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Zone/Courier</th>
<th>Same City</th>
<th>Metro</th>
<th>ROI</th>
<th>Zone</th>
</tr>
</thead>
<tr ng-repeat="row in data.table">
<th>{{ row[0] }}</th>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
<td>{{ row[3] }}</td>
<td>{{ row[4] }}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="<c:url value='/static/jslib/bootstrap.js'/>"></script>
<%-- <script src="<c:url value="/static/jslib/jquery.stickyheader.js" />"></script>
<script src="<c:url value="/static/jslib/jquery.debounce.js" />"></script> --%>
<script src="<c:url value="/static/js/app.js" />"></script>
<script src="<c:url value="/static/js/services/forwardFreightService.js" />"></script>
<script src="<c:url value="/static/js/controllers/forwardFreightCtrl.js" />"></script>
</body>
</html>这是我的 app.js
var app = angular.module("scplApp",[]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/upload', {
templateUrl: 'uploadData.jsp',
controller: 'uploadCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);Controller :
app.controller('uploadCtrl',['$scope','uploadService', function($scope,uploadService){
$scope.uploadFiles = function(){
var uploadUrl = '/uploadData';
uploadService.uploadFiles($scope.files,uploadUrl);
};
}]);服务:
app.factory('uploadService', ['$http', '$q', function($http, $q){
return {
uploadFiles: function(files,uploadUrl){
var formData = new FormData();
formData.append('file',files);
$http.post(uploadUrl,files,{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){})
.error(function(){});
}
};
}]);目录结构为:WEB-INF/views/.jsp 页面 static/js/.js 文件
我只是希望有人能够通过在这里发布此内容来提供帮助......
最佳答案
在您的 app.js 文件中，您需要将 Angular 路由器作为依赖项注入(inject):
var app = angular.module("scplApp",['ngRoute']);
关于javascript - 无法在我的 Angular 应用程序中包含routeProvider，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33102040/