无法在我的角度应用程序中包含routeProvider

Question

I am frustrated now. 我现在很沮丧。 the angular-route file is downloaded properly but i am unable to use routing in my angular UI. angular-route文件已正确下载，但我无法在我的angular UI中使用路由。

i have used java for backend and am trying to use angular(for the first time as UI) 我已经将Java用于后端并且正在尝试使用angular（第一次作为UI）

here is my code: homepage --> 这是我的代码：主页->

 <%@ 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>

and here is my app.js 这是我的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); }; }]);

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 structure is : WEB-INF/views/ .jsp pages static/js/ .js files dir结构为：WEB-INF / views / .jsp页面static / js / .js文件

i am just hoping that someone might be able to help by posting this here... 我只是希望有人可以通过在此处发布此内容来提供帮助...

Answer 1

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

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

Answer 2

应用初始化应为：

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

无法在我的角度应用程序中包含routeProvider

问题描述

2 个解决方案

解决方案1
2 2015-10-13 11:57:21

解决方案2
1 已采纳 2015-10-13 11:59:35

无法在我的角度应用程序中包含routeProvider

问题描述

2 个解决方案

解决方案1 2 2015-10-13 11:57:21

解决方案2 1 已采纳 2015-10-13 11:59:35

解决方案1
2 2015-10-13 11:57:21

解决方案2
1 已采纳 2015-10-13 11:59:35