I'm new to AngularJS and I am trying to replace some AJAX code for an HTML website I use for testing Web API services. So I've been working through some AngularJS examples to get a feel for how things work. So far so good, but I cannot get calls to my web api services to work in AngularJS. I am sure I am missing something simple here but since I am new to this, I cannot see it. So I am hoping that someone can point me in the right direction.
What seems to be the issue is that in my controller, the loading or initialization of the service classes seems to be causing me problems. If I remove the service classes and just leave the controller, the HTML page renders correctly. But if I include them, the AngluarJS fields {{}}, show up with the angle brackets shown as text, so Angular is not handling them. But if I remove the service classes, Angular renders the fields as expected... then of course the service class fail to execute.
I get similar results by putting the $http call in the controller and removing the services, but then the web api is never called. So I don't know what the issue is.
My goal is just to get a working example using my web api services. So I service classes at this point. I just need to get it to work so I have somewhere to start.
Any suggestions or guidance is much appreciated.
Best regards,
Jon
What I have tried:
Here's my HTML page.
<!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>
Here's the JavaScript files.
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 - this just returns a list of books from a sample I was working with.
(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 - this is the call out to my web api service. I have rewritten this a dozen different ways using post and get, and I started out with the $http call in the controller itself. But later I found a better example where it separated it into a service class, which is what I have copied here. I removed the server name to post this on the web and the web api service is setup on a given port, which explains the odd url for the call. The service has been running in production for over a year now, so I think it is fine.
(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]);
}());
Submit an article or tip