AngularJS HTTP


$http は AngularJS のコア サービスで、リモート サーバーからデータを読み取るために使用されます。

JSON ファイルを読み取る

以下は Web サーバーに保存されている JSON ファイルです:

http://www.php.cn/try/angularjs/data/Customers_JSON.php

{
   "レコード":
[
{
"名前" : "アルフレッズ・フッターキステ",
"都市" : "ベルリン",
"国" : "ドイツ"
},
{
"名前" : "ベルグルンド・スナブコップ",
「都市」 : "ルレオ",
"国" : "スウェーデン"
},
{
"名前" : "商業中心地 モクテスマ",
"都市" : "メキシコ D.F.",
"国" : "メキシコ"
},
{
"名前" : "エルンスト ヘンデル",
"都市" : "グラーツ",
"国" : "オーストリア"
},
{
"名前" : "FISSA Fabrica Inter. Salchichas S.A."、
"都市" : "マドリード"、
"国" : "スペイン"
}、
{
"名前" : "ガレリア デル ガストロノモ"、
"都市" : "バルセロナ"、
"国" : "スペイン"
},
{
"名前" : "島 Trading",
"City" : "Cowes",
"country" : "UK"
},
{
"Name" : "Königlich" エッセン"、
"都市" : "ブランデンブルク"、
"国" : "ドイツ"
}、
{
"名前" : "笑うバッカス ワイン セラーズ"、
"都市" : "バンクーバー"、
"国" : "カナダ"
},
{
"名前" : "Magazzini Alimentari Riuniti",
"都市" : "ベルガモ",
"国" : "イタリア"
},
{
"名前" : "北/南"、
"都市" : "ロンドン"、
"国" : "イギリス"
}、
{
"名前" : "パリ専門"、
"都市" : "パリ"、
"国" : "フランス"
},
{
"名前" : "ガラガラヘビキャニオン食料品店",
"都市" : "アルバカーキ",
"国" : "アメリカ"
},
{
"名前" : "シモンズビストロ",
"都市" : "København",
"国" : "デンマーク"
},
{
"名前" : "The Big Cheese",
"都市" : "ポートランド",
"国" : "アメリカ"
},
{
"名前" : "Vaffeljernet",
"都市" : "オーフス",
"国" : "デンマーク"
},
{
"名前" : "ウォルスキー ザジャズド"、
"都市" : "ワルシャワ"、
"国" : "ポーランド"
}
]
}

AngularJS $http

AngularJS $http は、Web サーバー上のデータを読み取るためのサービスです。

$http.get(url) はサーバーデータを読み取るために使用される関数です。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

アプリケーション分析:

注: 上記のコードの get リクエストは、このサイトをローカル エリアに直接コピーして実行すると、クロスドメインの問題が発生します。解決策は、Customers_JSON.php のデータを自分のサーバーにコピーすることです。PHP への最良の解決策は次のとおりです。 Ajax のクロスドメインの問題。

AngularJS アプリケーションは ng-app を介して定義されます。アプリケーションは <div> 内で実行されます。

ng-controllerディレクティブセットcontroller オブジェクト の名前。

関数 customersController は、標準の JavaScript オブジェクト コンストラクター です。

コントローラー オブジェクトにはプロパティがあります: $scope.names。

$http.get() Webサーバーから静的なJSONデータを読み取ります。

サーバー データ ファイルは次のとおりです: http://www.php.cn/try/angularjs/data/Customers_JSON.php。

サーバーからJSONデータをロードすると、$scope.namesは配列になります。


Note上記のコードは、データベース データを読み取るために使用することもできます。