Angularjs – 외부 json 파일 불러와서 dom에 바인딩 시키기

코드 출처 : http://codepen.io/tutorialab/pen/EJAet?editors=101

<div id="wrapper" ng-app>
  <div ng-controller="DataCtrl">
    <pre ng-model="data">
     {{data}}
    </pre>

    <input ng-model='name' />
    {{name}}

    <input ng-model='salutation' />
    {{salutation}}

    <input ng-model='greeting' />
    {{greeting}}
  </div>
</div>  

 위 처럼 html 을 만든다.

angular.module('', []);

function DataCtrl($scope, $http) {

  $http.jsonp("http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero").
  success(function(data) {
    $scope.data = data;
    $scope.name = data.name;
    $scope.salutation = data.salutation;
    $scope.greeting = data.greeting;
  }).
  error(function (data) {
    $scope.data = "Request failed";
  });
}

위 처럼 자바스크립트를 작성해서 데이터를 가져오게 만든다.

TOP