AngularJS SQL

AngularJS는 데이터베이스에서 데이터를 표시하는 데 매우 적합합니다. 데이터가 JSON 형식이 되도록 확인하세요.

MySQL을 실행하는 PHP 서버에서 데이터를 가져옵니다

AngularJS 예제

<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("customers_mysql.php")
  .then(function (response) {$scope.names = response.data.records;});
});
</script>

직접 시도해 보세요

SQL을 실행하는 ASP.NET 서버에서 데이터를 가져옵니다

AngularJS 예제

<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("customers_sql.aspx")
  .then(function (response) {$scope.names = response.data.records;});
});
</script>

직접 시도해 보세요

서버 코드 예제

아래 부분은 SQL 데이터를 가져오는 서버 코드를 나열합니다.

  • PHP와 MySQL을 사용하여. JSON을 반환합니다.
  • PHP와 MS Access를 사용하여. JSON을 반환합니다.
  • ASP.NET, VB, MS Access를 사용하여. JSON을 반환합니다.
  • ASP.NET, Razor, SQL Lite를 사용하여. JSON을 반환합니다.

신풍 HTTP 요청이라고 합니다

요청 페이지를 제외한 다른 서버에서 데이터를 요청하는 것을신풍 HTTP 요청.

신풍 요청은 네트워크에서 흔합니다. 많은 페이지는 다른 서버에서 CSS, 이미지, 스크립트를 로드합니다.

보안 이유로, 현대 브라우저에서스크립트에서 발생신풍 HTTP 요청은 제한됩니다동일한 사이트。

PHP 예제에서는 다음과 같은 줄을 추가하여 신풍 접근을 허용했습니다.

header("Access-Control-Allow-Origin: *");

1. 서버 코드 PHP와 MySQL

<?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);
?>

2. 서버 코드 PHP 및 MS Access

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");
$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");
$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while (!$rs->EOF) {
  if ($outp != "") {$outp .= ",";}
  $outp .= '{"Name":"' . $rs["CompanyName"] . '",';
  $outp .= '"City":"' . $rs["City"] . '",';
  $outp .= '"Country":"'. $rs["Country"] . '"}';
  $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo ($outp);
?>

3. 서버 코드 ASP.NET, VB 및 MS Access

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable = objDataSet.Tables("myTable")
outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next
outp = "{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. 서버 코드 ASP.NET, Razor C#, 및 SQL Lite

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp = ""
var c = chr(34)
}
@foreach(var row in query){{}}
if (outp != "") { outp = outp + "," }
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp = "{" + c + "records" + c + ":[" + outp + "]}"
@outp