Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 8. SQL - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 8. SQL - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:25
728x90

AngularJS SQL

 이전 장에서 작성된 코드는 데이터베이스로 부터 읽어들이는데 사용되기도 합니다.


1. Fetching Data From a PHP Server Running MySQL


  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html >
<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>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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.w3schools.com/angular/customers_mysql.php")
   .success(function (response) {$scope.names = response.records;});
});
</script>
 
</body>
</html>
 
cs



2. Fetching Data From an ASP.NET Server Running SQL

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<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.w3schools.com/angular/customers_sql.aspx")
    .success(function (response) {$scope.names = response.records;});
});
</script>
cs
 



3. Server Code Examples
 아래 섹션들은 SQL 데이터를 가져와 사용하는 서버코드의 목록입니다.




4. Cross-Site HTTP Requests
 다른 서버에서부터 데이터를 요청하는 것을 cross-site HTTP 요청이라 부릅니다.

 Cross-site 요청은 웹에서 일반적으로 사용됩니다. 대다수 페이지는 CSS, 이미지, 스크립트를 다른 서버로 부터 불러옵니다.

 현대 브라우저에서, 스크립트로부터 cross-site HTTP 요청은 보안적 이유로 같은 사이트에서로 제한됩니다.

 아래 라인은 PHP 예제로 cross-site 접근을 허용하도록 추가하는 라인입니다.


 

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









4-1. Server Code PHP and MySQL


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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 .="]";
 
$conn->close();
 
echo($outp);
?>
cs





4-2. Server Code PHP and MS Access



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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 .= "]";
 
$conn->close();
 
echo ($outp);
?>
cs





4-3. Server Code ASP.NET, VB and MS Access


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ 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 = outp & "]"
response.write(outp)
conn.close
%>
cs





4-4. Server Code ASP.NET, VB Razor and SQL Lite


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@{
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 ="["
}
@foreach(var row in query)
{
if outp <> "[" then 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 = outp + "]"
@outp
cs





 





* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 10. HTML Event - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 7. Table - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 6. Http - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more