2015-10-13 7 views
0

Я расстроен сейчас. файл с угловым маршрутом загружается правильно, но я не могу использовать маршрутизацию в своем угловом пользовательском интерфейсе.Невозможно включить routeProvider в мое угловое приложение

я использовал Java для внутреннего интерфейса, и я пытаюсь использовать угловые (в первый раз, как UI)

вот мой код: Главная ->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
 
<!DOCTYPE html> 
 
<html ng-app="scplApp" lang="en"> 
 
<head> 
 
\t <script \t src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
 
\t <link href="<c:url value='/static/css/bootstrap.css'/>" rel="stylesheet"/> 
 
\t <link href="<c:url value='/static/css/styles.css'/>" rel="stylesheet"/> 
 
\t <title>SCPL Home Screen</title> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
\t <div class="container"> 
 
\t \t <div class="navbar-header"> 
 
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
 
        aria-controls="navbar"> 
 
\t \t \t <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t \t <a class="navbar-brand" href="#" title="PNL-Report" rel="home"> 
 
\t \t \t \t <img src="<c:url value="/static/img/pnl-logo-cyan.png"/>" alt="snapdeal-X"></img> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t \t <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> 
 
\t \t </div> 
 
\t </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"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getWeightPerShipmentAir()"> 
 
\t \t \t \t Weight/Shipment Air 
 
\t \t \t </button> 
 
\t \t </div> 
 
    \t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getWeightPerShipmentSurface()"> 
 
\t \t \t \t Weight/Shipment Surface 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getNumShipmentAir()"> 
 
\t \t \t \t No. Shipments Air 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getNumShipmentSurface()"> 
 
\t \t \t \t No. Shipments Surface 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t </div> 
 
\t <br/> 
 

 
    \t <div class="row"> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getRatePerKGAir()"> 
 
\t \t \t \t Rate/KG Air 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getRatePerKGSurface()"> 
 
\t \t \t \t Rate/KG Surface 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getSalienceAir()"> 
 
\t \t \t \t Salience Air 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t <div class="col-md-3 text-center"> 
 
\t \t \t <button type="button" class="btn btn-primary" ng-click="getSalienceSurface()"> 
 
\t \t \t \t Salience Surface 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t </div> 
 
<br/><br/> 
 

 
<h2>{{ data.reportTitle }}</h2> 
 
\t <table class="table table-hover"> 
 
\t \t <thead> 
 
\t \t <tr> 
 
\t \t \t <th>Zone/Courier</th> 
 
\t \t \t <th>Same City</th> 
 
\t \t \t <th>Metro</th> 
 
\t \t \t <th>ROI</th> 
 
\t \t \t <th>Zone</th> 
 
\t \t </tr> 
 
\t \t </thead> 
 
\t \t <tr ng-repeat="row in data.table"> 
 
\t \t \t <th>{{ row[0] }}</th> 
 
\t \t \t <td>{{ row[1] }}</td> 
 
\t \t \t <td>{{ row[2] }}</td> 
 
\t \t \t <td>{{ row[3] }}</td> 
 
\t \t \t <td>{{ row[4] }}</td> 
 
\t \t </tr> 
 
\t </table> 
 
</div> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
\t <script src="<c:url value='/static/jslib/bootstrap.js'/>"></script> 
 
<%-- \t <script src="<c:url value="/static/jslib/jquery.stickyheader.js" />"></script> 
 
\t <script src="<c:url value="/static/jslib/jquery.debounce.js" />"></script> --%> 
 
\t <script src="<c:url value="/static/js/app.js" />"></script> 
 
\t <script src="<c:url value="/static/js/services/forwardFreightService.js" />"></script> 
 
\t <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) { 
 

 
\t $routeProvider.when('/upload', { 
 
\t \t templateUrl: 'uploadData.jsp', 
 
\t \t controller: 'uploadCtrl' 
 
\t }) 
 
\t .otherwise({ 
 
\t \t redirectTo: '/' 
 
\t }); 
 
}]);

Контроллер:

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

 
}]);

обслуживание:

app.factory('uploadService', ['$http', '$q', function($http, $q){ 
 
\t return { 
 
\t \t uploadFiles: function(files,uploadUrl){ 
 
\t \t \t var formData = new FormData(); 
 
\t \t \t formData.append('file',files); 
 
\t \t \t $http.post(uploadUrl,files,{ 
 
\t \t \t \t transformRequest: angular.identity, 
 
\t \t \t \t headers: {'Content-Type': undefined} 
 
\t \t \t }) 
 
\t \t \t .success(function(){}) 
 
\t \t \t .error(function(){}); 
 
\t \t } 
 
\t }; 
 
}]);

структура НАПРАВЛ: WEB-INF/просмотров/.jsp страницы статические/JS/ .js файлы

я просто надеюсь, что кто-то может быть в состоянии помочь, разместив это здесь ...

ответ

1

инициализации приложения должны быть:

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

благодарит прабха. Моя маршрутизация в пользовательском интерфейсе мешает моей маршрутизации диспетчера-сервлета ....... любое предложение относительно этого. Я делаю это правильно? –

2

в вашем app.js файле, необходимо придать угловой маршрутизатор как зависимость:

var app = angular.module("scplApp",['ngRoute']); 
Смежные вопросы