01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765
11. routeProvider 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=828375
12. routeProvider 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=828883
13. promise 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=830819
14. promise 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831099
15. ng-repeat 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831382
16. ng-repeat 사용하기 #3 : http://forum.falinux.com/zbxe/index.php?document_srl=831663
17. Debug directive 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=832049

AngularJS에서 injection할 수 있는 객체 중 $http를 사용해서 restFUL service를 활용해보도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>


  <div ng-app="app" ng-controller="AppCtrl">
    <ul>
      <li ng-repeat="user in users">
        {{user.username}}
      </li>
    </ul>
  </div>

<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


var app = angular.module("app", []);

app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});

app.controller("AppCtrl", function($scope, $http) {
  var self = this;
  $http.get("http://jsonplaceholder.typicode.com/users")
    .success(function(data) {
      console.log(data);
      $scope.users = data;
    });
});


우선 controller를 만들 때 $http를 넣어서 dependency injection이 되도록 합니다. 그리고 $http.get을 사용해서 데이터를 받아오고, 그것을 html에서 ng-repeat를 사용해서 출력해보았습니다.


확인해보면 다음과 같이 출력이 됩니다.

Binding.png

이 게시물을...