AngularJS SQL


이전 장의 코드를 사용하여 데이터베이스에서 데이터를 읽을 수도 있습니다.

PHP를 사용하여 MySQL에서 데이터 가져오기

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

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

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

SQL을 실행하여 ASP.NET에서 데이터 가져오기

예 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<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("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")
   .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

서버 측 코드

아래에는 여러 가지 서버 측 코드 유형이 나열되어 있습니다.

    PHP와 MySQL을 사용하세요. JSON을 반환합니다.

    2. PHP 및 MS Access 사용. JSON을 반환합니다.

    3. ASP.NET, VB 및 MS Access를 사용합니다. JSON을 반환합니다.

    4. ASP.NET, Razor 및 SQL Lite를 사용합니다. JSON을 반환합니다.

교차 도메인 HTTP 요청

다른 서버(다른 도메인 이름)에서 데이터를 가져와야 하는 경우 교차 도메인 HTTP 요청을 사용해야 합니다.

교차 도메인 요청은 웹 페이지에서 매우 일반적입니다. 많은 웹페이지는 다양한 서버에서 CSS, 이미지, Js 스크립트 등을 로드합니다.

최신 브라우저에서는 데이터 보안을 위해 모든 요청이 동일한 도메인 이름으로 엄격하게 제한됩니다. 다른 사이트에서 데이터를 호출해야 하는 경우 교차 도메인을 통해 해결해야 합니다.

다음 PHP 코드는 교차 도메인 액세스에 사용되는 웹사이트를 실행합니다.

header("Access-Control-Allow-Origin: *");
더 많은 도메인 간 액세스 솔루션을 보려면 PHP Ajax 도메인 간 문제에 대한 최상의 솔루션을 참조하세요.

1. PHP 및 MySql 코드 예제

<?php
header("Access-Control-Allow-Origin: *");
header("콘텐츠 유형: 애플리케이션/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT 회사 이름, 도시, 국가 FROM 고객");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
  if ($outp != "") {$outp .= ",";}
$outp .= '{"이름":"' . $rs["회사 이름"] . '",';
$outp . = '"도시":"' . $rs["도시"] . '",';
$outp .= '"국가":"'. $rs["국가"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>

2. PHP 및 MS Access 代码实例

<?php
header("Access-Control-Allow-Origin: *");
header("콘텐츠 유형: 애플리케이션/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;데이터 소스=Northwind.mdb ");

$rs = $conn->execute("SELECT 회사 이름, 도시, 국가 FROM 고객");

$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"이름":"'  . $rs["회사 이름"] . '",';
    $outp . = '"도시":"'   . $rs["도시"]        . '",';
    $outp .= '"국가":"'. $rs["국가"]     . '"}';
    $ 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 = 새 OledbDataAdapter("SELECT 고객으로부터 회사 이름, 도시, 국가", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
for 각 x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "이름"    & c & ":" & c & x("회사 이름") & c & ","
outp = outp &       c & "도시"    & c & ":" & c & x("도시")        & c & ","
outp = outp &       c & "국가" & c & ":" & c & x("국가")     & c & "}"
next

outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. ASP.NET, VB Razor 및 SQL Lite 代码实例

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT 회사명, 도시, 국가 FROM 고객");
var outp =""
var c = chr(34)
}
@foreach(var row in 쿼리)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "이름"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "도시"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "국가" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "기록" + c + ":[" + outp + "]}"
@outp
←
→