"AngularJS 튜토리얼 - 베스트셀러 예제 4"의 두 판 사이의 차이

2015년 6월 17일 (수) 22:17 판

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', 'bookService', function($scope, bookService) {
  bookService.success(function(data) {
    $scope.bestseller = data;
  });
}]);

4 js/services/bookService.js

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

5 테스트

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

6 같이 보기