ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [AngularJS] 6. Http - Angular JS 강좌
      Web/AngularJS 2015. 6. 12. 14:18

      AngularJS AJAX - $http

       $http는 원격 서버에서부터 데이터를 읽기위한 AngularJS 서비스입니다.






      1. Providing Data

       아래 데이터는 웹 서버에서 제공되는 데이터입니다:


      http://www.w3schools.com/angular/customers.php


      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
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      {
      "records": [
        {
          "Name" : "Alfreds Futterkiste",
          "City" : "Berlin",
          "Country" : "Germany"
        },
        {
          "Name" : "Berglunds snabbköp",
          "City" : "Luleå",
          "Country" : "Sweden"
        },
        {
          "Name" : "Centro comercial Moctezuma",
          "City" : "México D.F.",
          "Country" : "Mexico"
        },
        {
          "Name" : "Ernst Handel",
          "City" : "Graz",
          "Country" : "Austria"
        },
        {
          "Name" : "FISSA Fabrica Inter. Salchichas S.A.",
          "City" : "Madrid",
          "Country" : "Spain"
        },
        {
          "Name" : "Galería del gastrónomo",
          "City" : "Barcelona",
          "Country" : "Spain"
        },
        {
          "Name" : "Island Trading",
          "City" : "Cowes",
          "Country" : "UK"
        },
        {
          "Name" : "Königlich Essen",
          "City" : "Brandenburg",
          "Country" : "Germany"
        },
        {
          "Name" : "Laughing Bacchus Wine Cellars",
          "City" : "Vancouver",
          "Country" : "Canada"
        },
        {
          "Name" : "Magazzini Alimentari Riuniti",
          "City" : "Bergamo",
          "Country" : "Italy"
        },
        {
          "Name" : "North/South",
          "City" : "London",
          "Country" : "UK"
        },
        {
          "Name" : "Paris spécialités",
          "City" : "Paris",
          "Country" : "France"
        },
        {
          "Name" : "Rattlesnake Canyon Grocery",
          "City" : "Albuquerque",
          "Country" : "USA"
        },
        {
          "Name" : "Simons bistro",
          "City" : "København",
          "Country" : "Denmark"
        },
        {
          "Name" : "The Big Cheese",
          "City" : "Portland",
          "Country" : "USA"
        },
        {
          "Name" : "Vaffeljernet",
          "City" : "Århus",
          "Country" : "Denmark"
        },
        {
          "Name" : "Wolski Zajazd",
          "City" : "Warszawa",
          "Country" : "Poland"
        }
      ]
      }
      		cs






      2. AngularJS $http

       AngularJS $http 는 웹 서버로부터 데이터를 읽기 위한 핵심 서비스 입니다.


       $http.get(url)은 서버 데이터를 읽기 위해 사용되는 함수입니다.



      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
      <!DOCTYPE html>
      <html>
      <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
          <body>
       
          <div ng-app="myApp" ng-controller="customersCtrl"> 
       
              <ul>
                <li ng-repeat="x in names">
                  {{ x.Name + ', ' + x.Country }}
                </li>
              </ul>
       
          </div>
       
          <script>
              var app = angular.module('myApp', []);
              app.controller('customersCtrl', function($scope, $http) {
                $http.get("http://www.w3schools.com/angular/customers.php")
                .success(function (response) {$scope.names = response.records;});
              });
         </script>
       
          </body>
      </html>
       
      		cs





       






       해설:

        AngularJS 어플리케이션은 ng-app에 의해 정의됩니다. 어플리케이션은 <div> 태그 내부에서 실행됩니다.


        ng-controller 지시어는 제어 객체를 말합니다.


        customersCtrl 함수는 표준 자바 스크립트 객체 생성자 입니다.


        AngularJS는 $scope와 $http 객체와 함께 customersCtrl을 적용할 것 입니다.


        $scope는 어플리케이션 객체입니다.


        $http는 외부 데이터를 요청하기 위한 XMLHttpRequest 객체입니다.


        $http.get()은 위 주소로부터 JSON 데이터를 읽습니다.


        성공한다면, 제어기는 서버로부터 JSON 데이터를 범위 내의 속성을 생성합니다. 








      * 이 강좌는 w3schools를 통해서 작성했습니다

      저작자표시

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

      [AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 8. SQL - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 7. Table - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 4. 제어(controller) - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 3. 지시어(directives) - Angular JS 강좌  (0) 2015.06.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바