我对angularJS非常陌生。我正在搜索从RESTful API访问服务的信息,但我一无所知。我怎样才能做到这一点?
Answers:
AngularJS提供的$http
服务完全可以满足您的需求:使用JSON将AJAX请求发送到Web服务并从中接收数据(非常适合与REST服务通信)。
举个例子(取自AngularJS文档,稍作改动):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
请注意,AngularJS中还有另一个服务,该$resource
服务以更高级的方式提供对REST服务的访问(示例再次取自AngularJS文档):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
此外,还有第三方解决方案,例如Restangular。请参阅其文档以了解如何使用它。基本上,这是一种更具声明性的方式,可以使您摆脱更多细节。
在$ HTTP服务可以用于一般用途的AJAX。如果您拥有适当的RESTful API,则应查看ngResource。
您还可以看看Restangular,它是第三方库,可轻松处理REST API。
欢迎来到Angular的美好世界!
我对angularJS很陌生。我正在寻找从RESTful API访问服务的信息,但我一无所知。请帮助我做到这一点。谢谢
如果您当前正在使用“ GET”服务,则编写第一个Angular脚本有两个(非常大)障碍。
首先,您的服务必须实现“ Access-Control-Allow-Origin”属性,否则,当从例如Web浏览器调用时,服务将起作用,但从Angular调用时,服务将失败。
因此,您需要在web.config文件中添加几行:
<configuration>
...
<system.webServer>
<httpErrors errorMode="Detailed"/>
<validation validateIntegratedModeConfiguration="false"/>
<!-- We need the following 6 lines, to let AngularJS call our REST web services -->
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
</customHeaders>
</httpProtocol>
</system.webServer>
...
</configuration>
接下来,您需要向HTML文件中添加一些代码,以强制Angular调用“ GET” Web服务:
// Make sure AngularJS calls our WCF Service as a "GET", rather than as an "OPTION"
var myApp = angular.module('myApp', []);
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
一旦有了这些修复程序,实际上调用RESTful API就非常简单。
function YourAngularController($scope, $http)
{
$http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
.success(function (data) {
//
// Do something with the data !
//
});
}
您可以在此网页上找到这些步骤的非常清晰的演练:
祝好运 !
麦克风
Access-Control-Allow-Origin
不应该是一个外卡,除非你面对API公共...
只是为了在$http
此处扩展(快捷方式):http : //docs.angularjs.org/api/ng.$http
//页面中的代码段
$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);
//可用的快捷方式
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
例如,您的json看起来像这样:{“ id”:1,“ content”:“ Hello,World!”}
您可以像下面这样通过angularjs进行访问:
angular.module('app', [])
.controller('myApp', function($scope, $http) {
$http.get('http://yourapp/api').
then(function(response) {
$scope.datafromapi = response.data;
});
});
然后在您的html上,您将像这样:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="myApp">
<p>The ID is {{datafromapi.id}}</p>
<p>The content is {{datafromapi.content}}</p>
</div>
</body>
</html>
如果您不想下载它们,则会为angularjs调用CDN。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>
希望这可以帮助。