위키
포럼
도구
바뀐글
랜덤

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

(새 문서: ==index.html== <source lang='html5'> <!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script> <script src="https://code.an...)
 
잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 2명의 중간 판 6개는 보이지 않습니다)
1번째 줄: 1번째 줄:


==index.html==
==index.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!doctype html>
<!doctype html>
<html>
<html>
<head>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
</head>
<body ng-app="BestsellerApp5">
<body ng-app="BestsellerApp5">


<div class="header">
<div class="header">
   <a href="/angular/bestseller5/#/">이달의 베스트셀러</a>
   <a href="#">이달의 베스트셀러</a>
</div>
</div>


30번째 줄: 30번째 줄:
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>


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


50번째 줄: 50번째 줄:
     });
     });
});
});
</source>
</syntaxhighlight>


==js/controllers/HomeController.js==
==js/controllers/HomeController.js==
<source lang='javascript'>
<syntaxhighlight lang='javascript'>
app.controller('HomeController', ['$scope', 'books', function($scope, books) {
app.controller('HomeController', ['$scope', 'books', function($scope, books) {
   books.success(function(data) {
   books.success(function(data) {
59번째 줄: 59번째 줄:
   });
   });
}]);
}]);
</source>
</syntaxhighlight>


==js/controllers/BookController.js==
==js/controllers/BookController.js==
<source lang='javascript'>
<syntaxhighlight lang='javascript'>
app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
   books.success(function(data) {
   books.success(function(data) {
68번째 줄: 68번째 줄:
   });
   });
}]);
}]);
</source>
</syntaxhighlight>


==js/services/books.js==
==js/services/books.js==
<source lang='javascript'>
<syntaxhighlight lang='javascript'>
app.factory('books', ['$http', function($http) {
app.factory('books', ['$http', function($http) {
   return $http.get('http://zetawiki.com/json/bestseller3.json')
   return $http.get('http://zetawiki.com/ex/json/books.json')
         .success(function(data) {
         .success(function(data) {
           return data;
           return data;
81번째 줄: 81번째 줄:
         });
         });
}]);
}]);
</source>
</syntaxhighlight>


==views/home.html==
==views/home.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<div class="main">
<div class="main">
   <h2>책 목록</h2>
   <h2>책 목록</h2>
95번째 줄: 95번째 줄:


</div>
</div>
</source>
</syntaxhighlight>


==views/book.html==
==views/book.html==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<div class="book">
<div class="book">
   <h2>{{ detail.name }}</h2>
   <h2>{{ detail.name }}</h2>
104번째 줄: 104번째 줄:
   <p>{{ detail.price | number }}원</p>
   <p>{{ detail.price | number }}원</p>
</div>
</div>
</source>
</syntaxhighlight>
 
==테스트==
*예제: http://zetawiki.com/ex/angular/bestseller5/


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

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

1 index.html[ | ]

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

<div class="header">
  <a href="#">이달의 베스트셀러</a>
</div>

<div ng-view></div>

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

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

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

<!-- Directives -->

</body>
</html>

2 js/app.js[ | ]

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

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: "HomeController",
      templateUrl: "views/home.html"
    })
    .when('/books/:id', {
      controller: 'BookController',
      templateUrl: 'views/book.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

3 js/controllers/HomeController.js[ | ]

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

4 js/controllers/BookController.js[ | ]

app.controller('BookController', ['$scope', 'books', '$routeParams', function($scope, books, $routeParams) {
  books.success(function(data) {
    $scope.detail = data[$routeParams.id];
  });
}]);

5 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(data) {
           return data;
         });
}]);

6 views/home.html[ | ]

<div class="main">
  <h2>책 목록</h2>

  <div ng-repeat="book in books">
    <a href="#/books/{{$index}}">
      <p> {{ book.name }} ({{ book.author }}) </p>
    </a>
  </div>

</div>

7 views/book.html[ | ]

<div class="book">
  <h2>{{ detail.name }}</h2>
  <p>{{ detail.author }} 지음</p>
  <p>{{ detail.price | number }}원</p>
</div>

8 테스트[ | ]

9 같이 보기[ | ]

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