Question

我正在使用以下项目结构在Eclipse中创建AngularJS项目：

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;
   });
});

Controller调用 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服务器上部署Project（FetchQuestionAngularJS）时，收到以下错误消息：

-Error：[$ injector：unpr]未知提供者：$ templateRequestProvider＆lt; - $ templateRequest＆lt; - $ route ＆lt; - ngViewDirective

我做错了什么？

如何让我的AngularJS项目（ FetchQuestionsAngularJS ）与Spring RESTful WebService Project（ 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);    
}]);

令我失望的是，先前的错误仍在不断重复。我完全被击中了。对此问题的任何帮助都将受到极大的赞赏。

控制台抛出的错误消息如下：

错误：[$ injector：unpr]未知提供者：$ templateRequestProvider＆lt; - $ templateRequest＆lt; - $ route＆lt; - ngViewDirective

Answer 1

尝试在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: '/' });
});

部署AngularJS项目时出错，该项目与返回JSON数据的Spring RESTful Web服务进行通信

1 个答案: