Question

我对angularJS很新。我正在寻找从RESTful API访问服务，但我没有任何想法。我怎么能这样做？

Answer 1

选项1：$ http服务

AngularJS提供了完全符合您要求的$http service：使用JSON（非常适合与REST服务交谈）向Web服务发送AJAX请求并从中接收数据。

举一个例子（摘自AngularJS文档并略微改编）：

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

选项2：$ resource service

请注意，AngularJS中还有另一项服务，$resource service以更高级的方式提供对REST服务的访问（例如，再次从AngularJS文档中获取）：

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

选项3：Restangular

此外，还有第三方解决方案，例如Restangular。请参阅其documentation了解如何使用它。基本上，它更具说明性，并且将更多细节抽象出来。

Answer 2

$http服务可用于通用AJAX。如果您有合适的RESTful API，则应该查看ngResource。

您还可以查看Restangular，它是第三方库，可以轻松处理REST API。

Answer 3

欢迎来到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 !
        //  
    });
}

您可以在此网页上找到这些步骤的非常清晰的演练：

Using Angular, with JSON data

祝你好运！

麦克

Answer 4

在这里展开$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

Answer 5

例如你的json看起来像这样： {＆＃34; id＆＃34;：1，＆＃34;内容＆＃34;：＆＃34;你好，世界！＆＃34;}

您可以像这样通过angularjs访问：

<!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>

然后在你的HTML上，你会这样做：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

如果您不想下载它们，则会调用CDN for angularjs。

"/dataset/data/0/1"

希望这有帮助。

如何在angularjs页面中从RESTful API访问服务？

5 个答案:

选项1：$ http服务

选项2：$ resource service

选项3：Restangular