89

私はangularJSを初めて使用します。RESTful API からサービスにアクセスする方法を探していますが、わかりませんでした。どうやってやるの？

4

5 に答える 5

145

オプション 1: $http サービス

AngularJS は、AJAX リクエストを Web サービスに送信し、JSON (REST サービスとの通信に最適) を使用して Web サービスからデータを受信するという、まさにあなたが望むことを行う$httpサービスを提供します。

例を挙げます (AngularJS のドキュメントから抜粋し、わずかに変更しました):

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

オプション 2: $resource サービス

AngularJS には別のサービスもあることに注意してください。これは、REST サービスへのアクセスをより高度な方法で提供するサービスです (例は AngularJS のドキュメントから再度抜粋したものです) $resource。

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

オプション 3: 直角

さらに、Restangularなどのサードパーティのソリューションもあります。使用方法については、ドキュメントを参照してください。基本的に、それはより宣言的であり、あなたから離れた詳細を抽象化します。

于 2013-05-06T07:35:18.410 に答える
10

Angular の素晴らしい世界へようこそ !!

私はangularJSを初めて使用します。RESTful API からサービスにアクセスする方法を探していますが、わかりませんでした。それをするのを手伝ってください。ありがとうございました

現在「GET」サービスを使用している場合、最初の Angular スクリプトを作成するには 2 つの (非常に大きな) ハードルがあります。

最初に、サービスは「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 !
        //  
    });
}

この Web ページで、これらの手順の非常に明確なウォークスルーを見つけることができます。

JSON データで Angular を使用する

幸運を ！

マイク

于 2014-01-21T12:45:35.490 に答える
7

$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
于 2013-08-17T20:31:52.927 に答える