Question

我是AngularJS的新手，我正在尝试替换一些用于测试Web API服务的HTML网站的AJAX代码。因此，我一直在研究一些AngularJS示例，以了解事情的运作方式。

到目前为止一直很好，但我无法调用我的web api服务在AngularJS中工作。我相信我在这里缺少一些简单的东西，但由于我是新手，我看不到它。所以我希望有人能指出我正确的方向。

似乎问题是在我的控制器中，服务类的加载或初始化似乎导致了我的问题。如果我删除服务类并离开控制器，HTML页面将正确呈现。但是如果我包含它们，AngluarJS字段{{}}会显示为文本的尖括号，因此Angular不会处理它们。但是，如果我删除服务类，Angular会按预期呈现字段...当然，服务类无法执行。

通过将$ http调用放入控制器并删除服务，我得到了类似的结果，但是从未调用过web api。所以我不知道问题是什么。

我的目标只是使用我的web api服务获得一个工作示例。所以我在这一点上提供服务。我只需要让它工作，所以我有一个地方可以开始。

非常感谢任何建议或指导。我希望有人可以快速扫描一下，看看我无法看到的东西，我怀疑这是非常简单的。

祝你好运，乔恩

这是我的HTML页面......很简单。

<!DOCTYPE html>
<html ng-app="myAngularApplication">
<head>
    <title>Sample Angular Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.js"></script>    
    <script src="app/app.js"></script>
    <script src="app/loan/loanController.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body ng-controller="loanController" class="panel-body">
<div class="text-primary">
    <div class="panel panel-default">
        <div class="panel-body">
            <table>
                <tr>
                    <td colspan="3" class="modal-title" style="font-weight: bold;">Encompass Pricing Engine Web API Service</td>
                </tr>
                <tr>
                    <td class="control-label">Loan Number</td>
                    <td>
                        <input type="text" ng-model="loanNumber" value="160000223" class="form-control" style="width: 150px; height: 32px;" />
                    </td>
                    <td>
                        <input type="button" ng-click="fetchLoanFromServer()" value="Get Loan" class="btn-sm btn-success">
                    </td>
                </tr>
            </table>
        </div>
    </div>                
    <p>
        {{message}}
    </p>
    <p>
        {{loan}}
    </p>
    <p>
        {{error}}
    </p>
</div>
</body>
</html>

app.js

(function(){
    myModule = angular.module("myAngularApplication", []);
}());

loanController.js

(function () {

var loanController = function ($scope, $filter, localLoanService, remoteLoanService) {

    $scope.message = "Loan returned";
    $scope.error = "";

    $scope.loan = [];

    $scope.fetchLoan = function () {
        $scope.loan = localLoanService.loan;
    }

    $scope.fetchLoanFromServer = function () {
        remoteLoanService.fetchLoan($scope.loanNumber)
        .success(function (data, status, headers, config) {
            $scope.loan = data;
        })
        .error(function (data, status, headers, config) {
            $scope.loan = [];
            $scope.error = "Failed to retrieved loan from server";
        });
    };

}

//angular.module("myAngularApplication").controller("loanController", ["$scope", loanController]);
angular.module("myAngularApplication").controller("loanController", ["$scope", "$filter", "localLoanService", "remoteLoanService", loanController]);
//angular.module("myAngularApplication").controller("loanController", ["$scope", "remoteLoanService", loanController]);    
//angular.module("myAngularApplication").controller("loanController", ["$scope", "$filter", "remoteLoanService", loanController]);    
}());

localLoanService.js - 这只是从我试图开始工作的一个例子中返回一个书籍列表。

(function () {

var localLoanService = function () {
    var loan = [
        { ID: 1, BookName: "Test Books 1", AuthorName: "Test Author 1", ISBN: "TEST1" },
        { ID: 2, BookName: "Test Books 2", AuthorName: "Test Author 2", ISBN: "TEST2" },
        { ID: 3, BookName: "Test Books 3", AuthorName: "Test Author 3", ISBN: "TEST3" },
        { ID: 4, BookName: "Test Books 4", AuthorName: "Test Author 4", ISBN: "TEST4" },
        { ID: 5, BookName: "Test Books 5", AuthorName: "Test Author 5", ISBN: "TEST5" }
    ];

    return {
        loan: loan
    };
}

angular.module("myAngularApplication").factory("localLoanService", [localLoanService]);
}());

remoteLoanService.js - 这就是我真正想要做的，只需要调用Web API服务。如果我在控制器本身基本上做同样的事情，它仍然不起作用。我无法弄清楚如何让AngularJS进行此调用。我的方法只有一个id参数并返回JSON。

（function（）{

var remoteLoanService = function ($http, loanNumber) {
    var fetchLoan = function () {
        return $http({
                        url: "http://vmw-devt-fsnt82:9810/api/Loan/GetLoan/001120210",
                        method: "GET",
                        params: {id: angular.toJSON(loanNumber, false)}
                    });
    };

    return {
        fetchloan: fetchLoan
    };
}

angular.module("myAngularApplication").factory("remoteLoanService", ["$http", remoteLoanService]);
}());

Answer 1

您没有在服务功能中处理响应。它缺少然后部分：

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
 // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

但是对于您的服务，您应该使用承诺，使用$q

服务：

(function () {

var remoteLoanService = function ($http, $q) {

    var fetchLoan = function (loanNumber) {

        var deferred = $q.defer();

        $http({
            url: "http://vmw-devt-fsnt82:9810/api/Loan/GetLoan/001120210",
            method: "GET",
            params: {id: angular.toJSON(loanNumber, false)}
        }).then(function(response){

            deferred.resolve(response);

        }, function(error){

            deferred.reject();
        });
       return deferred.promise;
    };

    return {
        fetchloan: fetchLoan
    };
}
})();

并在你的控制器中：

$scope.fetchLoanFromServer = function () {
        remoteLoanService.fetchLoan($scope.loanNumber)
        .success(function (data) {
            $scope.loan = data;
        })
        .error(function (data) {
            $scope.loan = [];
            $scope.error = "Failed to retrieved loan from server";
        });
    };

简单的AngularJS Web API失败

1 个答案: