angularjsページでRESTful APIからサービスにアクセスするにはどうすればよいですか?


88

私はangularJSに非常に慣れていません。RESTful APIからサービスへのアクセスを探していますが、何もわかりませんでした。どうやってやるの?

回答:


145

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

AngularJSが提供する$httpサービスと全く同じあなたが欲しいもの:WebサービスへのAJAXリクエストを送信し、(RESTサービスに話をするために完全である)JSONを使用して、それらからデータを受信します。

例を示すには(AngularJSのドキュメントから抜粋して少し変更したもの):

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

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

また、AngularJSで別のサービスがあることに注意してください$resourceサービス(例は再びAngularJSのドキュメントから取られた)よりハイレベルなファッションでRESTサービスへのアクセスを提供します。

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

オプション3:直角

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


1
ここで私を助けてくれませんか。わからない stackoverflow.com/questions/16463456/…。REST APIからサービスをロードできません。空の配列を取得します。ありがとう
anilCSE

@GoloRoden CORSを処理するときに、角度で$ http.defaults.useXDomain = trueを使用している人を見ました。本当にそうする必要があるのでしょうか?別のドメインでlaravelとangularを設定しただけなので。私はangularからのhttpリクエストでlaravelコントローラーをヒットしました。$ http.defaults.useXDomainを使用するかどうかにかかわらず、問題なく機能します。これについて論理的な説明はありますか?
under5hell 14


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>

次に、Angularに「GET」Webサービスを呼び出させるために、HTMLファイルに少しコードを追加する必要があります。

// 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を使用する

幸運を !

マイク


10
誰かにWebサービスを完全にインターネットに開放するよう勧めるのはなぜですか?Access-Control-Allow-Originあなたが公共の対面APIもない限り...ワイルドカードであってはなりません
デイヴ・マッキントッシュ

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

1
.success()および.error()は廃止されます。代わりに.then()および.catch()を使用する必要があります
Derber Alter

0

たとえば、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>

お役に立てれば。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.