Skip to content

Commit babde23

Browse files
luensysluensys
committed
AngularJS Chapter10업로
1 parent 13094eb commit babde23

File tree

16 files changed

+468
-3
lines changed

16 files changed

+468
-3
lines changed

‎document/AngularJS/source/lks/Chapter10/example10.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
$scope.todos = [
12+
{ action: "Get groceries", complete: false },
13+
{ action: "Call plumber", complete: false },
14+
{ action: "Buy running shoes", complete: true },
15+
{ action: "Buy flowers", complete: false },
16+
{ action: "Call family", complete: false }];
17+
});
18+
</script>
19+
<style>
20+
.odd { background-color: lightcoral}
21+
.even { background-color: lavenderblush}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
26+
<h3 class="panel-header">To Do List</h3>
27+
28+
<table class="table">
29+
<tbody>
30+
<!-- ng-repeat만으로는 최상의 객체만 반복할 수 있게 된다.
31+
아래의 경우는 이런 최상의 객체가 여러개일 경우 구현하는 방법을 나타낸다.
32+
ng-repeat-start에서 시작해서 -->
33+
<tr ng-repeat-start="item in todos">
34+
<td>This is item {{$index}}</td>
35+
</tr>
36+
<tr>
37+
<td>The action is: {{item.action}}</td>
38+
</tr>
39+
<tr ng-repeat-end>
40+
<td>Item {{$index}} is {{$item.complete? '' : "not "}} complete</td>
41+
</tr>
42+
<!-- ng-repeat-end에서 끝나게 된다. -->
43+
</tbody>
44+
</table>
45+
46+
47+
</div>
48+
</body>
49+
</html>

‎document/AngularJS/source/lks/Chapter10/example12.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
$scope.todos = [
12+
{ action: "Get groceries", complete: false },
13+
{ action: "Call plumber", complete: false },
14+
{ action: "Buy running shoes", complete: true },
15+
{ action: "Buy flowers", complete: false },
16+
{ action: "Call family", complete: false }];
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
22+
<h3 class="panel-header">To Do List</h3>
23+
<!-- 아래는 부분 뷰를 다른 파일로 정리해 첨부하는 것을 구현한 것이다.
24+
ng-include는 해당 파일을 현재의 위치에 넣어주게 된다.
25+
이 경우 메인 문서에 정의된 것처럼 처리가 되므로
26+
컨트롤러에서 정의한 데이터 모델 및 동작에도 접근할 수 있고,
27+
$index, $first같은 특수 변수에도 똑같이 접근이 가능하게 된다. -->
28+
<ng-include src="'table.html'"></ng-include>
29+
</div>
30+
</body>
31+
</html>

‎document/AngularJS/source/lks/Chapter10/example14.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
$scope.todos = [
12+
{ action: "Get groceries", complete: false },
13+
{ action: "Call plumber", complete: false },
14+
{ action: "Buy running shoes", complete: true },
15+
{ action: "Buy flowers", complete: false },
16+
{ action: "Call family", complete: false }];
17+
18+
// 2. 아래는 showList의 값에 따라 list.html, table.html을 되돌려주도록 설계되었다.
19+
$scope.viewFile = function () {
20+
return $scope.showList ? "list.html" : "table.html";
21+
};
22+
});
23+
</script>
24+
</head>
25+
<body>
26+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
27+
<h3 class="panel-header">To Do List</h3>
28+
29+
<div class="well">
30+
<div class="checkbox">
31+
<label>
32+
<!-- 1. 아래는 ng-model로서 showList를 사용하게 되고
33+
showList 값이 바꿀 때마다 viewFile 함수의 return값이 바뀌게 된다. -->
34+
<input type="checkbox" ng-model="showList">
35+
Use the list view
36+
</label>
37+
</div>
38+
</div>
39+
40+
<ng-include src="viewFile()"></ng-include>
41+
<!-- 3. 결국 viewFile()함수는 위의 결과들로 return된 list.html 또는 table.html을 표시하게 된다. -->
42+
43+
</div>
44+
</body>
45+
</html>

‎document/AngularJS/source/lks/Chapter10/example15.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
$scope.todos = [
12+
{ action: "Get groceries", complete: false },
13+
{ action: "Call plumber", complete: false },
14+
{ action: "Buy running shoes", complete: true },
15+
{ action: "Buy flowers", complete: false },
16+
{ action: "Call family", complete: false }];
17+
18+
$scope.viewFile = function () {
19+
console.log("View function");
20+
return $scope.showList ? "list.html" : "table.html";
21+
};
22+
23+
// reportChange()가 발생되면 아래의 log를 뿌려준다.
24+
$scope.reportChange = function () {
25+
console.log("Displayed content: " + $scope.viewFile());
26+
}
27+
28+
});
29+
</script>
30+
</head>
31+
<body>
32+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
33+
<h3 class="panel-header">To Do List</h3>
34+
35+
<div class="well">
36+
<div class="checkbox">
37+
<label>
38+
<input type="checkbox" ng-model="showList">
39+
Use the list view
40+
</label>
41+
</div>
42+
</div>
43+
44+
<ng-include src="viewFile()" onload="reportChange()"></ng-include>
45+
<!-- onload 어트리뷰트에 대한 예제이다.
46+
ng-include가 로드될 때 reportChange()를 실행하게 된다. -->
47+
</div>
48+
</body>
49+
</html>

‎document/AngularJS/source/lks/Chapter10/example17.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
12+
$scope.data = {};
13+
// data라는 값을 선언해 빈 값으로 만들어 두었다.
14+
15+
$scope.todos = [
16+
{ action: "Get groceries", complete: false },
17+
{ action: "Call plumber", complete: false },
18+
{ action: "Buy running shoes", complete: true },
19+
{ action: "Buy flowers", complete: false },
20+
{ action: "Call family", complete: false }];
21+
});
22+
</script>
23+
</head>
24+
<body>
25+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
26+
27+
<h3 class="panel-header">To Do List</h3>
28+
29+
<div class="well">
30+
<div class="radio" ng-repeat="button in ['None', 'Table', 'List']">
31+
<label>
32+
<input type="radio" ng-model="data.mode"
33+
value="{{button}}" ng-checked="$first" />
34+
{{button}}
35+
</label>
36+
<!-- radio버튼을 ng-repeat를 이용해 만들어내고
37+
그 값을 data.mode에 저장하게 된다. -->
38+
</div>
39+
</div>
40+
41+
<!-- 아래의 예제는 ng-switch를 이용해 on에 들어가는 값에 따라
42+
div를 선택할 수 있도록 하는 예제이다. -->
43+
<div ng-switch on="data.mode">
44+
<div ng-switch-when="Table">
45+
<table class="table">
46+
<thead>
47+
<tr><th>#</th><th>Action</th><th>Done</th></tr>
48+
</thead>
49+
<tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
50+
<td>{{$index + 1}}</td>
51+
<td ng-repeat="prop in item">{{prop}}</td>
52+
</tr>
53+
</table>
54+
</div>
55+
<div ng-switch-when="List">
56+
<ol>
57+
<li ng-repeat="item in todos">
58+
{{item.action}}<span ng-if="item.complete"> (Done)</span>
59+
</li>
60+
</ol>
61+
</div>
62+
<div ng-switch-default>
63+
Select another option to display a layout
64+
</div>
65+
</div>
66+
67+
</div>
68+
</body>
69+
</html>

‎document/AngularJS/source/lks/Chapter10/example18.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
12+
$scope.data = {};
13+
14+
$scope.todos = [
15+
{ action: "Get groceries", complete: false },
16+
{ action: "Call plumber", complete: false },
17+
{ action: "Buy running shoes", complete: true },
18+
{ action: "Buy flowers", complete: false },
19+
{ action: "Call family", complete: false }];
20+
});
21+
</script>
22+
</head>
23+
<body>
24+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
25+
<h3 class="panel-header">To Do List</h3>
26+
27+
<div class="well">
28+
<!-- AngularJS의 경우는 HTML을 파싱하고 디렉티브를 처리하는 준비과정 동안은 HTML문서를 보여주게 된다.
29+
물론 현재는 그 시간이 매우 빨라 보이지 않지만 실패할 경우 그 내용이 고스란히 보이게 된다.
30+
이러한 문제를 해결하기 위해 ng-cloak 디렉티브를 사용할 수 있다. -->
31+
<div class="radio" ng-repeat="button in ['None', 'Table', 'List']">
32+
<label ng-cloak>
33+
<input type="radio" ng-model="data.mode"
34+
value="{{button}}" ng-checked="$first">
35+
{{button}}
36+
</label>
37+
</div>
38+
</div>
39+
40+
<div ng-switch on="data.mode" ng-cloak>
41+
<div ng-switch-when="Table">
42+
<table class="table">
43+
<thead>
44+
<tr><th>#</th><th>Action</th><th>Done</th></tr>
45+
</thead>
46+
<tr ng-repeat="item in todos" ng-class="$odd ? 'odd' : 'even'">
47+
<td>{{$index + 1}}</td>
48+
<td ng-repeat="prop in item">{{prop}}</td>
49+
</tr>
50+
</table>
51+
</div>
52+
<div ng-switch-when="List">
53+
<ol>
54+
<li ng-repeat="item in todos">
55+
{{item.action}}<span ng-if="item.complete"> (Done)</span>
56+
</li>
57+
</ol>
58+
</div>
59+
<div ng-switch-default>
60+
Select another option to display a layout
61+
</div>
62+
</div>
63+
</div>
64+
</body>
65+
66+
</html>

‎document/AngularJS/source/lks/Chapter10/example6.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ <h3 class="panel-header">To Do List</h3>
3535
</td>
3636
</tr>
3737
<!-- 데이터 객체 키를 활용한 예제이다.
38-
위와같이 설계하게 되면 객체의 키를 가져와 표시할 수 있게 된다. -->
38+
위와같이 설계하게 되면 객체의 키를 가져와 표시할 수 있게 된다.
39+
웹 페이지에서 소스를 보게 되면 확인이 가능하다 -->
3940
</tbody>
4041
</table>
4142
</div>

‎document/AngularJS/source/lks/Chapter10/example7.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>Directives</title>
5+
<script src="angular.js"></script>
6+
<link href="bootstrap.css" rel="stylesheet" />
7+
<link href="bootstrap-theme.css" rel="stylesheet" />
8+
<script>
9+
angular.module("exampleApp", [])
10+
.controller("defaultCtrl", function ($scope) {
11+
$scope.todos = [
12+
{ action: "Get groceries", complete: false },
13+
{ action: "Call plumber", complete: false },
14+
{ action: "Buy running shoes", complete: true },
15+
{ action: "Buy flowers", complete: false },
16+
{ action: "Call family", complete: false }];
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
22+
<h3 class="panel-header">To Do List</h3>
23+
24+
<table class="table">
25+
<thead>
26+
<tr>
27+
<th>#</th>
28+
<th>Action</th>
29+
<th>Done</th>
30+
</tr>
31+
</thead>
32+
<!-- 아래는 $index라는 내장 변수를 이용한 것이다.
33+
$index 외에도 first, middle, last, even, odd가 있다 -->
34+
<tr ng-repeat="item in todos">
35+
<td>{{$index + 1}}</td>
36+
<td ng-repeat="prop in item">
37+
{{prop}}
38+
</td>
39+
</tr>
40+
</table>
41+
42+
</div>
43+
</body>
44+
45+
</html>

0 commit comments

Comments
 (0)