AngularJS 튜토리얼 - 베스트셀러 예제 4

AngularJS 튜토리얼 - 베스트셀러 예제 3

1 index.html[ | ]

<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="BestsellerApp4">

<div ng-controller="MainController">
  <h1>이달의 베스트셀러</h1>

  <div ng-repeat="book in books">
    <p>{{ book.name }} ({{ book.author }})</p> 
    <p>{{ book.price | number }}원</p> 
  </div>

</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>

<!-- Services -->
<script src="js/services/books.js"></script>

<!-- Directives -->

</body>
</html>

2 js/app.js[ | ]

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

3 js/controllers/MainController.js[ | ]

app.controller('MainController', ['$scope', 'books', function($scope, books) {
  books.success(function(data) {
    $scope.books = data;
  });
}]);

4 js/services/books.js[ | ]

app.factory('books', ['$http', function($http) { 
  return $http.get('http://zetawiki.com/ex/json/books.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

5 테스트[ | ]

입력값(JSON) 예제: http://zetawiki.com/ex/json/books.json
예제: http://zetawiki.com/ex/angular/bestseller4/

6 같이 보기[ | ]