Es gibt viele Methoden zum Lesen lokaler Daten über Angular. In den vorherigen Beispielen werden die Daten in den meisten Fällen in der Variablen $scope des Moduls gespeichert oder die initialisierten Daten werden direkt mit ng-init definiert. Diese Methoden dienen jedoch nur dazu, die Auswirkungen anderer Funktionen zu demonstrieren. Dieses Mal lernen wirwie man Angular und PHP kombiniert, um Daten aus dem Hintergrund zu lesen.
Zuerst haben wir mit PHP einen Satz Hintergrunddaten definiert. Der Code lautet wie folgt (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); ?>
Die Bedeutung dieses Codes ist relativ einfach. Nachdem Sie eine Verbindung zur Datenbank hergestellt haben, verwenden Sie die SQL-Anweisung, um die entsprechenden Daten aus der Datenbank auszuwählen ($conn->query("SELECT CompanyName, City,Country FROM Customers")). . Anschließend wird die Schleifenstruktur verwendet, um die abgerufenen Daten in Form von Schlüssel-Wert-Paaren in der Variablen $outp zu speichern.
Gehen Sie als Nächstes in js wie folgt vor:
<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>
Der $http-Dienst wird hier weiterhin zum Lesen von Daten verwendet und der der Datendatei entsprechende URL-Pfad wird übergeben. Nach Erfolg werden die Daten zurückgegeben und an die Variable $scope.names gebunden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.