Возникли проблемы с простым примером angularjs
Я новичок в AngularJS и пытаюсь заменить некоторый AJAX-код для HTML-сайта, который я использую для тестирования сервисов Web API. Поэтому я проработал несколько примеров AngularJS, чтобы получить представление о том, как все работает. Пока все хорошо, но я не могу получить вызовы к моим сервисам web api для работы в AngularJS. Я уверен, что здесь мне не хватает чего-то простого, но так как я новичок в этом деле, я не могу этого видеть. Поэтому я надеюсь, что кто-то сможет указать мне правильное направление.
Проблема, по-видимому, заключается в том, что в моем контроллере загрузка или инициализация классов обслуживания, по-видимому, вызывает у меня проблемы. Если я удалю классы обслуживания и просто оставлю контроллер, HTML-страница будет отображаться правильно. Но если я включаю их, поля AngluarJS {{}} отображаются с угловыми скобками, показанными в виде текста, поэтому Angular не обрабатывает их. Но если я удалю классы обслуживания, Angular отобразит поля так, как ожидалось... тогда, конечно, класс обслуживания не будет выполнен.
Я получаю аналогичные результаты, помещая вызов $http в контроллер и удаляя службы, но тогда веб-api никогда не вызывается. Так что я не знаю, в чем дело.
Моя цель-просто получить рабочий пример с использованием моих веб-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>
<div class="panel panel-default">
<div class="panel-body">
<table>
<tr>
<td colspan="3" class="modal-title" style="font-weight: bold;">Pricing Engine WS</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="fetchLoan()" 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>
Вот файлы JavaScript.
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", "$filter", "localLoanService", "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 - это вызов моего веб-api-сервиса. Я переписал это дюжиной различных способов, используя post и get, и начал с вызова $http в самом контроллере. Но позже я нашел лучший пример, где он разделил его на класс обслуживания, который я скопировал здесь. Я удалил имя сервера, чтобы опубликовать это в интернете, и служба веб-api настроена на заданный порт, что объясняет нечетный url-адрес для вызова. Сервис работает в производстве уже больше года, так что я думаю, что все в порядке.
(function () {
var remoteLoanService = function ($http, loanNumber) {
var fetchLoan = function () {
return $http({
url: "http://abc123:9810/api/Loan/GetLoan/",
method: "GET",
params: {id: angular.toJSON(loanNumber, false)}
});
};
return {
fetchloan: fetchLoan
};
}
angular.module("myAngularApplication").factory("remoteLoanService", ["$http", remoteLoanService]);
}());