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

Question

我现在很沮丧。 angular-路由文件已正确下载，但我无法在 angular UI.

中使用路由

我已经将 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: '/'
 });
}]);

控制器：

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 文件

我只是希望有人可以通过在此处发布此内容来提供帮助...

Answer 1

在您的 app.js 文件中，您需要将 angular 路由器作为依赖注入：

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

Answer 2

应用程序初始化应该是：

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

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

Unable to include routeProvider in my angular app

html

javascript

java

angularjs

ngroute