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

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

1 index.html[ | ]

<!doctype html>
<html>
<head>
<style>
.likes { background: yellow; width: 100px; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="BestsellerApp">
 
<div ng-controller="MainController">
  <h1>{{ title }}</h1>
 
  <div ng-repeat="book in books"> 
    <p>{{ book.name }} ({{ book.author }})</p>
    <p>{{ book.price | number }}원</p> 
    <button class="likes" ng-click="like($index)">
      좋아요 ( {{ book.likes }} )
    </button>
  </div>

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

<!-- Services -->
<!-- Directives -->

</body>
</html>

2 js/app.js[ | ]

var app = angular.module("BestsellerApp", []);

3 js/controllers/MainController.js[ | ]

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = '이달의 베스트셀러';
  $scope.books = [ 
    { 
      name: '미움받을 용기',
      author: '기시미 이치로, 고가 후미타케',
      price: 14900,
      likes: 0,
    }, 
    { 
      name: '딸에게 주는 레시피', 
      author: '공지영',
      price: 13500, 
      likes: 0,
    }, 
    { 
      name: '담론', 
      author: '신영복',
      price: 18000,
      likes: 0,
    }
  ];
  $scope.like = function(index) { 
    $scope.books[index].likes += 1; 
  };
}]);

4 실행결과[ | ]

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

5 같이 보기[ | ]