Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 6. Http - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 6. Http - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:23
728x90
반응형

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를 통해서 작성했습니다

728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 8. SQL - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 7. Table - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 5. 필터(filter) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 4. 제어(controller) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 3. 지시어(directives) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more