Rumah > Artikel > hujung hadapan web > Cara Angular.js membaca data latar belakang daripada PHP_AngularJS
Terdapat banyak kaedah untuk membaca data tempatan melalui sudut. Dalam contoh sebelumnya, dalam kebanyakan kes, data disimpan dalam pembolehubah $skop modul, atau data yang dimulakan ditakrifkan secara langsung menggunakan ng-init. Tetapi kaedah ini hanya untuk menunjukkan kesan fungsi lain. Kali ini mari belajarcara menggabungkan Angular dan PHP untuk membaca data dari latar belakang.
Mula-mula, menggunakan PHP, kami menentukan satu set data latar belakang, kodnya adalah seperti berikut (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); ?>
Maksud kod ini agak mudah Selepas menyambung ke pangkalan data, gunakan pernyataan sql untuk memilih data yang sepadan daripada pangkalan data ($conn->query("SELECT CompanyName, City,Country FROM Customers")) . Selepas itu, struktur gelung digunakan untuk menyimpan data yang diambil dalam pembolehubah $outp dalam bentuk pasangan nilai kunci.
Seterusnya, kendalikan seperti berikut dalam 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>
Perkhidmatan $http masih digunakan di sini untuk membaca data dan laluan url yang sepadan dengan fail data dihantar masuk. Selepas berjaya, data dikembalikan dan terikat kepada pembolehubah $scope.names.
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.