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

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="BestsellerApp2">

<h1>이달의 베스트셀러</h1>

<div ng-controller="MainController">
  <div ng-repeat="book in books">
    <book-info info="book"></book-info>
  </div>
</div>

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

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

<!-- Services -->

<!-- Directives -->
<script src="js/directives/bookInfo.js"></script>

</body>
</html>

2 js/app.js[ | ]

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

3 js/controllers/MainController.js[ | ]

app.controller('MainController', ['$scope', function($scope) {
  $scope.books = [ 
    { 
      name: '미움받을 용기', 
      author: '기시미 이치로, 고가 후미타케',
      price: 14900,
    }, 
    { 
      name: '딸에게 주는 레시피', 
      author: '공지영',
      price: 13500, 
    }, 
    { 
      name: '담론', 
      author: '신영복',
      price: 18000,
    }
  ];
}]);

4 js/directives/bookInfo.js[ | ]

app.directive('bookInfo', function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'js/directives/bookInfo.html' 
  }; 
});

5 js/directives/bookInfo.html[ | ]

<h2>{{ info.name }}</h2> 
<p>{{ info.author }}</p> 
<p>{{ info.price | number }}원</p>

6 테스트[ | ]

예제: http://zetawiki.com/ex/angular/bestseller2/

7 같이 보기[ | ]