私はangularJSに非常に慣れていません。RESTful APIからサービスへのアクセスを探していますが、何もわかりませんでした。どうやってやるの?
回答:
AngularJSが提供する$http
サービスと全く同じあなたが欲しいもの:WebサービスへのAJAXリクエストを送信し、(RESTサービスに話をするために完全である)JSONを使用して、それらからデータを受信します。
例を示すには(AngularJSのドキュメントから抜粋して少し変更したもの):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
また、AngularJSで別のサービスがあることに注意してください$resource
サービス(例は再びAngularJSのドキュメントから取られた)よりハイレベルなファッションでRESTサービスへのアクセスを提供します。
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を確認する必要があります。
REST APIを簡単に処理するためのサードパーティライブラリであるRestangularもご覧ください。
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ページで、これらの手順の非常に明確なウォークスルーを見つけることができます。
幸運を !
マイク
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>
お役に立てれば。