有一个简单的angularjs例子的问题 [英] Having an issue with a simple angularjs example
问题描述
我是AngularJS的新手，我正在尝试替换一些用于测试Web API服务的HTML网站的AJAX代码。因此，我一直在研究一些AngularJS示例，以了解事情的运作方式。到目前为止一切顺利，但我无法调用我的web api服务在AngularJS中工作。我相信我在这里缺少一些简单的东西，但由于我是新手，我看不到它。所以我希望有人可以指出我正确的方向。
似乎问题是在我的控制器中，加载或初始化服务类似乎是在给我带来麻烦。如果我删除服务类并离开控制器，HTML页面将正确呈现。但是如果我包含它们，AngluarJS字段{{}}会显示为文本的尖括号，因此Angular不会处理它们。但是，如果我删除服务类，Angular会按预期呈现字段...当然，服务类无法执行。
通过将$ http调用放入控制器并删除服务，我得到了类似的结果，但是从未调用过web api。所以我不知道问题是什么。
我的目标只是使用我的web api服务获得一个有效的例子。所以我在这一点上提供服务。我只需要让它工作，所以我有一个地方可以开始。
任何建议或指导都非常感谢。
祝你好运，
Jon
我的尝试：
这是我的HTML页面。
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>
这是JavaScript文件。
app.js
Here's the JavaScript files.
app.js
(function(){
myModule = angular.module("myAngularApplication", []);
}());
loanController.js
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 - 这只是从我正在使用的样本中返回一个书籍列表。
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 - 这是我的web api服务的调用。我使用post和get重写了十几种不同的方法，我开始在控制器本身使用$ http调用。但后来我发现了一个更好的例子，它把它分成了一个服务类，这就是我在这里复制的。我删除了服务器名称以在网上发布此内容，并在给定端口上设置了web api服务，这解释了该呼叫的奇怪URL。该服务已经在生产中运行了一年多，所以我觉得很好。
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]);
}());
推荐答案
控制器中的http调用并删除服务，但是web api永远不会调用。所以我不知道问题是什么。
我的目标只是使用我的web api服务获得一个有效的例子。所以我在这一点上提供服务。我只需要让它工作，所以我有一个地方可以开始。
任何建议或指导都非常感谢。
祝你好运，
Jon
我的尝试：
这是我的HTML页面。
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
Here's the JavaScript files.
app.js
(function(){
myModule = angular.module("myAngularApplication", []);
}());
loanController.js
loanController.js
(function () {
var loanController = function (scope,
filter, localLoanService, remoteLoanService) {
filter, localLoanService, remoteLoanService) {
这篇关于有一个简单的angularjs例子的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
