위키
포럼
도구
바뀐글
랜덤

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

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 2명의 중간 판 3개는 보이지 않습니다)
2번째 줄: 2번째 줄:


==index.html==
==index.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!doctype html>
<!doctype html>
<html>
<html>
33번째 줄: 33번째 줄:
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>


==js/app.js==
==js/app.js==
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
var app = angular.module('BestsellerApp3', []);
var app = angular.module('BestsellerApp3', []);
</source>
</syntaxhighlight>


==js/controllers/MainController.js==
==js/controllers/MainController.js==
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
app.controller('MainController', ['$scope', function($scope) {
app.controller('MainController', ['$scope', function($scope) {
   $scope.books = [  
   $scope.books = [  
61번째 줄: 61번째 줄:
   ];
   ];
}]);
}]);
</source>
</syntaxhighlight>


==js/directives/bookInfo.js==
==js/directives/bookInfo.js==
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
app.directive('bookInfo', function() {  
app.directive('bookInfo', function() {  
   return {  
   return {  
74번째 줄: 74번째 줄:
   };  
   };  
});
});
</source>
</syntaxhighlight>


==js/directives/bookInfo.html==
==js/directives/bookInfo.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<h2>{{ info.name }}</h2>  
<h2>{{ info.name }}</h2>  
<p>{{ info.author }}</p>  
<p>{{ info.author }}</p>  
<p>{{ info.price | number }}원</p>
<p>{{ info.price | number }}원</p>
</source>
</syntaxhighlight>


==js/directives/likeBook.js==
==js/directives/likeBook.js==
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
app.directive('likeBook', function() {
app.directive('likeBook', function() {
   return {
   return {
96번째 줄: 96번째 줄:


       scope.toggleLike = function() {  
       scope.toggleLike = function() {  
        element.toggleClass('btn-active');
         if(scope.like) {  
         if(scope.like) {  
           scope.buttonText = "좋아요";  
           scope.buttonText = "좋아요";  
108번째 줄: 107번째 줄:
   };
   };
});
});
</source>
</syntaxhighlight>


==js/directives/likeBook.html==
==js/directives/likeBook.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<button class="btn btn-active" ng-click="toggleLike()">  
<button ng-click="toggleLike()">  
   {{ buttonText }}  
   {{ buttonText }}  
</button>
</button>
</source>
</syntaxhighlight>


==테스트==
==테스트==
*예제: http://zetawiki.com/angular/bestseller3/
*예제: http://zetawiki.com/ex/angular/bestseller3/


==같이 보기==
==같이 보기==

2020년 11월 2일 (월) 02:53 기준 최신판

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

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

<div ng-controller="MainController">
  <div ng-repeat="book in books">
    <book-info info="book"></book-info>
    <like-book></like-book>
  </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>
<script src="js/directives/likeBook.js"></script>

</body>
</html>

2 js/app.js[ | ]

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

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 js/directives/likeBook.js[ | ]

app.directive('likeBook', function() {
  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'js/directives/likeBook.html',
    
    link: function(scope, element, attrs) { 
      scope.buttonText = "좋아요", 
      scope.like = false, 

      scope.toggleLike = function() { 
        if(scope.like) { 
          scope.buttonText = "좋아요"; 
          scope.like = false; 
        } else { 
          scope.buttonText = "좋아요 취소"; 
          scope.like = true; 
        } 
      } 
    }
  };
});

7 js/directives/likeBook.html[ | ]

<button ng-click="toggleLike()"> 
  {{ buttonText }} 
</button>

8 테스트[ | ]

9 같이 보기[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=AngularJS_튜토리얼_-_베스트셀러_예제_3&oldid=607202"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}