ホームページ >ウェブフロントエンド >jsチュートリアル >Angular.js が PHP_AngularJS からバックグラウンド データを読み取る方法
angular を介してローカル データを読み取る方法は数多くありました。前の例では、ほとんどの場合、データはモジュールの $scope 変数に保存されるか、初期化されたデータが ng-init を使用して直接定義されます。ただし、これらの方法は他の機能の効果を実証するためだけです。今回はAngular と PHP を組み合わせてバックグラウンドからデータを読み取る方法を学びましょう。
まず、PHP を使用して、一連のバックグラウンド データを定義しました。コードは次のとおりです (test.php):
<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; charset=UTF-8"); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT CompanyName, City, Country FROM Customers"); $outp = ""; while($rs = $result->fetch_array(MYSQLI_ASSOC)) { if ($outp != "") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}'; } $outp ='{"records":['.$outp.']}'; $conn->close(); echo($outp); ?>
このコードの意味は比較的単純です。データベースに接続した後、SQL ステートメントを使用してデータベースから対応するデータを選択します ($conn->query("SELECT CompanyName, City, Country FROM Customers"))。 。その後、ループ構造を使用して、取得したデータをキーと値のペアの形式で $outp 変数に保存します。
次にjsで以下のように操作します:
<div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("test.php") .success(function (response) {$scope.names = response.records;}); }); </script>
ここでも $http サービスがデータの読み取りに使用され、データ ファイルに対応する URL パスが渡されます。成功すると、データが返され、$scope.names 変数にバインドされます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。