無法在我的角度應用程序中包含routeProvider

Question

我現在很沮喪。 angular-route文件已正確下載，但我無法在我的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(){}); } }; }]);

dir結構為：WEB-INF / views / .jsp頁面static / js / .js文件

我只是希望有人可以通過在此處發布此內容來提供幫助...

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