无法在我的angular应用中包含routeProvider

Unable to include routeProvider in my angular app

本文关键字：包含 routeProvider 应用 angular 我的更新时间：2023-09-26

我现在很沮丧。angular-route文件下载正常，但我无法在我的angular UI中使用路由。

我使用java作为后端，并试图使用角(第一次作为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: '/'
	});
}]);

控制器:

app.controller('uploadCtrl',['$scope','uploadService', function($scope,uploadService){
	
$scope.uploadFiles = function(){
	var uploadUrl = '/uploadData';
	uploadService.uploadFiles($scope.files,uploadUrl);
};	
}]);

service:

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(){});
		}
	};
}]);

dir结构为:WEB-INF/views/.jsp pages静态/js/

. js文件

我只是希望有人可以帮助张贴这个在这里…

在你的app.js文件中，你需要把angular路由器作为一个依赖项注入:

var app = angular.module("scplApp",['ngRoute']);

应用程序初始化应该是:

var app = angular.module("scplApp", ['ngRoute']);