0
我是AngularJS的新手，我試圖替換用於測試Web API服務的HTML網站的一些AJAX代碼。所以我一直在通過一些AngularJS示例來了解事情的工作方式。到目前爲止這麼好，但我無法接到我的web api服務的調用，以在AngularJS中工作。我相信我在這裏錯過了一些簡單的東西，但由於我是新手，我看不到它。所以我希望有人能指引我走向正確的方向。簡單的AngularJS Web API失敗...
什麼似乎是問題是，在我的控制器中，服務類的加載或初始化似乎導致我的問題。如果我刪除這些服務類並且離開控制器，那麼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。
（函數（）{
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]);
}());