2014-11-04 29 views
0

我創造AngularJS項目在Eclipse中使用下列項目結構:錯誤,同時部署AngularJS項目,該項目使用Spring的RESTful Web服務返回JSON數據通信

Project Screen Shot

的index.html如下:

<!DOCTYPE html> 
<html ng-app="ToDoApp" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="Script/jquery-2.1.1.js"></script> 
    <script src="Script/angular.js"></script> 
    <script src="Script/angular-resource.js"></script> 
    <script src="Script/angular-route.js"></script> 
    <script src="Script/app.js"></script> 
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" /> 
    <title>Question & Answer</title> 
</head> 
<body> 
    <div class="container"> 
     <div ng-view></div> 
    </div> 
</body> 

個app.js如下:

var urlBase="http://LocalHost:8080/FetchQuestions/"; 
var ToDoApp = angular.module("ToDoApp", ['ngRoute','ngResource']). 
config(function($routeProvider) { 
    $routeProvider. 
        when('/service/question/', 
        { controller: 'ListQuestionCtrl', 
         templateUrl: urlBase+'ListQuestions.html' 
       }).when('/service/question/:tag1,:tag2,:tag3', 
        { controller: 'ListQuestionByTagsCtrl', 
         templateUrl: urlBase+'ListQuestions.html' 
       }).when('/service/question/insert/:user_id/:qtn_id/:answer', 
        { controller: 'InsertQuestionAnswerCtrl', 
         templateUrl: urlBase+'InsertAnswer.html' 
       }).otherwise({ redirectTo: '/' }); 
}); 



ToDoApp.controller("ListQuestionCtrl", function ($scope, $http) { 
    $http.get('http://LocalHost:8080/FetchQuestions/service/question/'). 
    success(function (data) { 
    $scope.items = data; 
    }); 
}); 

ToDoApp.controller("ListQuestionByTagsCtrl", function ($scope, $routeParams, $http) { 
    var Tag1 = $routeParams.tag1, Tag2 = $routeParams.tag2, Tag3 = $routeParams.tag3; 
    $http.get('http://LocalHost:8080/FetchQuestions/service/question/'+Tag1+','+Tag2+','+Tag3). 
    success(function (data) { 
     $scope.items = data; 
    }); 
}); 

ToDoApp.controller("InsertQuestionAnswerCtrl",function($scope, $routeParams, $http){ 
    var userid = $routeParam.user_id, qtnid = $routeParams.qtn_id, ans = $routeParam.answer; 
    $http.get('http://LocalHost:8080/FetchQuestions/service/question/insert/'+userid+'/'+qtnid+'/'+ans). 
    success(function (data){ 
     $scope.items = data; 
    }); 
}); 

的控制器調用一個的RESTful web服務(FetchQuestions)即在JSON格式返回數據。

ListQuestion.html只是使用ng-repeat上範圍可變並顯示數據以表格格式如下:

<tr ng-repeat="item in items"> 
     <td>{{item.Question_id}}</td> 
     <td>{{item.Question_Text}}</td>    
</tr> 

當我WAMP服務器上部署的項目(FetchQuestionAngularJS),我得到以下錯誤信息:

-Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective

我在做什麼錯了?

我怎樣才能讓我的AngularJS項目(FetchQuestionsAngularJS)與Spring RESTful Web服務項目(FetchQuestions)進行通信?

我FetchQuestions,項目的結構下面給出:

enter image description here

我在網上查一些教程和博客,我堅持所以任何幫助是值得歡迎的。

後某些編輯在app.js

var urlBase="http://LocalHost:8080/FetchQuestions/"; 
var ToDoApp = angular.module("ToDoApp", ['ngRoute','ngResource']). 
config(function($routeProvider) { 
    $routeProvider. 
        when('/service/question/', 
        { controller: 'ListQuestionCtrl', 
         templateUrl:'ListQuestions.html' 
       }).when('/service/question/:tag1,:tag2,:tag3', 
        { controller: 'ListQuestionByTagsCtrl', 
         templateUrl:'ListQuestions.html' 
       }).when('/service/question/insert/:user_id/:qtn_id/:answer', 
        { controller: 'InsertQuestionAnswerCtrl', 
         templateUrl:'InsertAnswer.html' 
       }).otherwise({ redirectTo: '/' }); 
}); 

ToDoApp.factory('TodoService',[ '$resource',function($resource) { 
return new Questions($resource); 
}]); 

function Questions(resource){ 

this.resource = resource; 
this.getAllQuestions = function(scope){ 
    resource('http://LocalHost:8080/FetchQuestions/service/question/'). 
    success(function (data){ 
     scope.items = data; 
    }); 
}; 
this.getQuestion = function(scope,Tag1,Tag2,Tag3){ 
    resource('http://LocalHost:8080/FetchQuestions/service/question/'+Tag1+','+Tag2+','+Tag3). 
    success(function (data){ 
     scope.items = data; 
    }); 
}; 
this.insertQuestion = function(scope,userid,qtnid,ans){ 
    resource('http://LocalHost:8080/FetchQuestions/service/question/insert/'+userid+'/'+qtnid+'/'+ans). 
    success(function (data){ 
     $scope.items = data; 
    }); 
}; 
} 


ToDoApp.controller("ListQuestionCtrl",['$scope','TodoService', function ($scope, TodoService) { 
TodoService.getAllQuestions($scope); 
}]); 

ToDoApp.controller("ListQuestionByTagsCtrl",['$scope','TodoService', function ($scope, $routeParams, TodoService) { 
var Tag1 = $routeParams.tag1, Tag2 = $routeParams.tag2, Tag3 = $routeParams.tag3; 
TodoService.getQuestions($scope,Tag1,Tag2,Tag3);  
}]); 

ToDoApp.controller("InsertQuestionAnswerCtrl",['$scope','TodoService',function($scope, $routeParams, TodoService){ 
var userid = $routeParam.user_id, qtnid = $routeParams.qtn_id, ans = $routeParam.answer; 
TodoService.insertQuestion($scope,userid,qtnid,ans);  
}]); 

讓我失望了以前的錯誤依然不斷重複。 我完全被打擊。任何關於這個問題的幫助將不勝感激。

由控制檯拋出的錯誤消息如下:

Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective

回答

0

嘗試把引號的控制器名稱在routeprovider。

config(function($routeProvider) { 
$routeProvider. 
       when('/service/question/', 
       { controller: 'ListQuestionCtrl', 
        templateUrl: urlBase+'ListQuestions.html' 
      }).when('/service/question/:tag1,:tag2,:tag3', 
       { controller: 'ListQuestionByTagsCtrl', 
        templateUrl: urlBase+'ListQuestions.html' 
      }).when('/service/question/insert/:user_id/:qtn_id/:answer', 
       { controller: 'InsertQuestionAnswerCtrl', 
        templateUrl: urlBase+'InsertAnswer.html' 
      }).otherwise({ redirectTo: '/' }); 
}); 
+0

的確解決了以前的錯誤消息的擊打Genarates一個新---錯誤:[$注射器:unpr]未知提供商:$ templateRequestProvider < - $ templateRequest < - $路線< - ngViewDirective – 2014-11-04 13:20:31