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

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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 을 만든다.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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";
});
}
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"; }); }
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";
  });
}

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

Subscribe
Notify of
guest


이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP