ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [AngularJS] 8. SQL - Angular JS 강좌
      Web/AngularJS 2015. 6. 12. 14:20
      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 를 참고하여 작성하였습니다.


      저작자표시

      'Web > AngularJS' 카테고리의 다른 글

      [AngularJS] 11. 모듈(module) - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 10. HTML Event - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 7. Table - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 6. Http - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2015.06.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바