Skip to content

Commit f9939d2

Browse files
luensysluensys
committed
Chapter9 내용 정리
1 parent 4ce6057 commit f9939d2

9 files changed

Lines changed: 383 additions & 4 deletions

File tree

‎document/AngularJS/source/lks/Chapter09/controllers.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var controllersModule = angular.module("exampleApp.Controllers", [])
2+
// 이 예제에서는 exampleApp.Controllers라는 새로운 모듈을 생성하고,
3+
// 이 모듈을 이전 예제의 두 컨트롤러를 정의하는데 사용했다.
4+
// 코드를 조직화 할 때는 애플리케이션을 공통 컴포넌트 타입의 모듈로 정리하고,
5+
// 메인 모듈의 이름에 컴포넌트 타입을 결함해
6+
// 각 모듈에 들어있는 컴포넌트의 내용이 무엇인지 명확히 알 수 있게 하는 방식을 많이 사용한다.
7+
//
8+
// angular.module을 contollersModule로 정의하고 아래에서 사용함
9+
10+
controllersModule.controller("dayCtrl", function ($scope, days) {
11+
$scope.day = days.today;
12+
});
13+
14+
controllersModule.controller("tomorrowCtrl", function ($scope, days) {
15+
$scope.day = days.tomorrow;
16+
});

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
var myApp = angular.module("exampleApp", []);
1111

1212
myApp.controller("dayCtrl", function ($scope) {
13-
$scope.day = new Date().getDay();
13+
$scope.day = new Date().getDay() + 1;
14+
// 본래 코드에서 수정함
15+
// 이 숫자가 0일 경우 아래 비교 구문에 문제가 생겨버림
1416
});
1517

1618
myApp.controller("tomorrowCtrl", function ($scope) {
17-
$scope.day = new Date().getDay() + 1;
19+
$scope.day = (new Date().getDay() + 1) % 7 + 1;
1820
});
1921

2022
myApp.directive("highlight", function () {
@@ -26,10 +28,11 @@
2628
});
2729

2830
myApp.filter("dayName", function () {
29-
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday",
31+
var dayNames = ["", "Sunday", "Monday", "Tuesday", "Wednesday",
3032
"Thursday", "Friday", "Saturday"];
3133
return function (input) {
3234
return angular.isNumber(input) ? dayNames[input] : input;
35+
// dayName 입력 값(input)을 통해 원하는 결과를 만들어냄
3336
};
3437
});
3538

@@ -42,6 +45,8 @@ <h3>AngularJS App</h3>
4245
</div>
4346
<h4 ng-controller="dayCtrl" highlight="Monday">
4447
Today is {{day || "(unknown)" | dayName}}
48+
<!-- 필터 적용
49+
| 앞의 값을 dayName이라는 필터에 넣어 결과를 만들어 내게 함 -->
4550
</h4>
4651
<h4 ng-controller="tomorrowCtrl">
4752
Tomorrow is {{day || "(unknown)" | dayName}}

‎document/AngularJS/source/lks/Chapter09/example11.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>AngularJS Demo</title>
5+
<link href="bootstrap.css" rel="stylesheet" />
6+
<link href="bootstrap-theme.css" rel="stylesheet" />
7+
<script src="angular.js"></script>
8+
<script>
9+
10+
var myApp = angular.module("exampleApp", []);
11+
12+
myApp.controller("dayCtrl", function ($scope) {
13+
$scope.day = new Date().getDay() + 1;
14+
});
15+
16+
myApp.controller("tomorrowCtrl", function ($scope) {
17+
$scope.day = (new Date().getDay() + 1) % 7 + 1;
18+
});
19+
20+
myApp.directive("highlight", function ($filter) {
21+
// $filter라는 것을 넣게되면
22+
// 이를 통해 필터 서비스 객체를 가져올 수 있고
23+
// 그것을 통해 모든 필터에 접근이 가능하도록 해줌
24+
var dayFilter = $filter("dayName");
25+
// dayName이라는 필터에 접근할 수 있도록 함
26+
// 접근하는 값은 dayFilter가 됨
27+
28+
return function (scope, element, attrs) {
29+
if (dayFilter(scope.day) == attrs["highlight"]) {
30+
element.css("color", "red");
31+
}
32+
}
33+
});
34+
35+
myApp.filter("dayName", function () {
36+
var dayNames = ["", "Sunday", "Monday", "Tuesday", "Wednesday",
37+
"Thursday", "Friday", "Saturday"];
38+
return function (input) {
39+
return angular.isNumber(input) ? dayNames[input] : input;
40+
};
41+
});
42+
43+
</script>
44+
</head>
45+
<body>
46+
<div class="panel">
47+
<div class="page-header">
48+
<h3>AngularJS App</h3>
49+
</div>
50+
<h4 ng-controller="dayCtrl" highlight="Saturday">
51+
Today is {{day || "(unknown)" | dayName}}
52+
</h4>
53+
<h4 ng-controller="tomorrowCtrl">
54+
Tomorrow is {{day || "(unknown)" | dayName}}
55+
</h4>
56+
</div>
57+
</body>
58+
</html>

‎document/AngularJS/source/lks/Chapter09/example12.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>AngularJS Demo</title>
5+
<link href="bootstrap.css" rel="stylesheet" />
6+
<link href="bootstrap-theme.css" rel="stylesheet" />
7+
<script src="angular.js"></script>
8+
<script>
9+
10+
var myApp = angular.module("exampleApp", []);
11+
12+
myApp.controller("dayCtrl", function ($scope, days) {
13+
// 3. 이렇게 서비스에 접근하기위해선 function에 서비스 명을 넣어
14+
// days 서비스에 대한 의존성을 선언해 접근할 수 있다.
15+
$scope.day = days.today;
16+
// 2. days라는 매소드에서 today가 갖는 값을 받아온다.
17+
});
18+
19+
myApp.controller("tomorrowCtrl", function ($scope, days) {
20+
$scope.day = days.tomorrow;
21+
});
22+
23+
myApp.directive("highlight", function ($filter) {
24+
25+
var dayFilter = $filter("dayName");
26+
27+
return function (scope, element, attrs) {
28+
if (dayFilter(scope.day) == attrs["highlight"]) {
29+
element.css("color", "red");
30+
}
31+
}
32+
});
33+
34+
myApp.filter("dayName", function () {
35+
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday",
36+
"Thursday", "Friday", "Saturday"];
37+
return function (input) {
38+
return angular.isNumber(input) ? dayNames[input] : input;
39+
};
40+
});
41+
42+
// 1. 서비스는 애플리케이션 전역에서 사용할 만한 기능을 제공하는 싱글턴 객체다.
43+
// AngularJS에는 여러 내장 서비스가 있으며 실제로 커스텀 해서 사용이 가능하다
44+
// 아래는 service 매소드 이다.
45+
myApp.service("days", function () {
46+
// day를 이용해 아래의 것을 수행할 수 있다.
47+
this.today = new Date().getDay();
48+
this.tomorrow = this.today + 1;
49+
});
50+
51+
</script>
52+
</head>
53+
<body>
54+
<div class="panel">
55+
<div class="page-header">
56+
<h3>AngularJS App</h3>
57+
</div>
58+
<h4 ng-controller="dayCtrl" highlight="Saturday">
59+
Today is {{day || "(unknown)" | dayName}}
60+
</h4>
61+
<h4 ng-controller="tomorrowCtrl">
62+
Tomorrow is {{day || "(unknown)" | dayName}}
63+
</h4>
64+
</div>
65+
</body>
66+
</html>

‎document/AngularJS/source/lks/Chapter09/example13.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>AngularJS Demo</title>
5+
<link href="bootstrap.css" rel="stylesheet" />
6+
<link href="bootstrap-theme.css" rel="stylesheet" />
7+
<script src="angular.js"></script>
8+
<script>
9+
10+
var myApp = angular.module("exampleApp", []);
11+
12+
myApp.controller("dayCtrl", function ($scope, days) {
13+
$scope.day = days.today;
14+
});
15+
16+
myApp.controller("tomorrowCtrl", function ($scope, days) {
17+
$scope.day = days.tomorrow;
18+
});
19+
20+
myApp.directive("highlight", function ($filter) {
21+
22+
var dayFilter = $filter("dayName");
23+
24+
return function (scope, element, attrs) {
25+
if (dayFilter(scope.day) == attrs["highlight"]) {
26+
element.css("color", "red");
27+
}
28+
}
29+
});
30+
31+
myApp.filter("dayName", function () {
32+
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday",
33+
"Thursday", "Friday", "Saturday"];
34+
return function (input) {
35+
return angular.isNumber(input) ? dayNames[input] : input;
36+
};
37+
});
38+
39+
// 이 부분에서는 변수를 선언하고 해당 변수가 갖는 값을 지정하게 된다.
40+
// Module.value 매소드는 고정값 및 객체를 반환하는 서비스를 하게 되고,
41+
// 이를 활용해 service나 filter 같은 모듈 매소드를 통해 생성되는 객체뿐 아니라 모든 값이나 객체에 대해 의존성 주입을 활용할 수 있게 되므로 그만큼 편하다.
42+
// 한마디로 좀 더 일관적인 개발 기법을 적용하게 해주고 단위 테스트를 단순화 함
43+
var now = new Date();
44+
myApp.value("nowValue", now);
45+
// now라는 변수를 선언하고, 이 변수에 Date를 대입하고
46+
// nowValue라는 value 서비스를 생성했다.
47+
// days 서비스를 선언할 때 nowValue 서비스를 의존성으로 선언해 사용한다.
48+
49+
myApp.service("days", function (nowValue) {
50+
this.today = nowValue.getDay();
51+
this.tomorrow = this.today + 1;
52+
});
53+
54+
// myApp.service("days", function () {
55+
// this.today = now.getDay();
56+
// this.tomorrow = this.today + 1;
57+
// });
58+
// Value를 사용할 생각이 없다면,
59+
// 클로저 기능을 활용하여 구현할 수도 있다.
60+
61+
62+
</script>
63+
</head>
64+
<body>
65+
<div class="panel">
66+
<div class="page-header">
67+
<h3>AngularJS App</h3>
68+
</div>
69+
<h4 ng-controller="dayCtrl" highlight="Monday">
70+
Today is {{day || "(unknown)" | dayName}}
71+
</h4>
72+
<h4 ng-controller="tomorrowCtrl">
73+
Tomorrow is {{day || "(unknown)" | dayName}}
74+
</h4>
75+
</div>
76+
</body>
77+
</html>

‎document/AngularJS/source/lks/Chapter09/example16.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html ng-app="exampleApp">
3+
<head>
4+
<title>AngularJS Demo</title>
5+
<link href="bootstrap.css" rel="stylesheet" />
6+
<link href="bootstrap-theme.css" rel="stylesheet" />
7+
<script src="angular.js"></script>
8+
<script src="controllers.js"></script>
9+
<script src="filters.js"></script>
10+
<script>
11+
12+
var myApp = angular.module("exampleApp",
13+
["exampleApp.Controllers", "exampleApp.Filters",
14+
"exampleApp.Services", "exampleApp.Directives"]);
15+
// angular.module 매소드에서의 두 번째 인자는 모듈 의존성 배열이다.
16+
// 그래서 이를 활용하여 복잡한 코드를 조직화 하는 것이 가능하다.
17+
// controllers와 filters는 조직화해 다른 파일로 생성하고
18+
// directive와 service는 아래 정리 하였다.
19+
20+
angular.module("exampleApp.Directives", [])
21+
.directive("highlight", function ($filter) {
22+
23+
var dayFilter = $filter("dayName");
24+
25+
return function (scope, element, attrs) {
26+
if (dayFilter(scope.day) == attrs["highlight"]) {
27+
element.css("color", "red");
28+
}
29+
}
30+
});
31+
32+
33+
var now = new Date();
34+
myApp.value("nowValue", now);
35+
36+
angular.module("exampleApp.Services", [])
37+
.service("days", function (nowValue) {
38+
this.today = nowValue.getDay();
39+
this.tomorrow = this.today + 1;
40+
});
41+
42+
</script>
43+
</head>
44+
<body>
45+
<div class="panel">
46+
<div class="page-header">
47+
<h3>AngularJS App</h3>
48+
</div>
49+
<h4 ng-controller="dayCtrl" highlight="Monday">
50+
Today is {{day || "(unknown)" | dayName}}
51+
</h4>
52+
<h4 ng-controller="tomorrowCtrl">
53+
Tomorrow is {{day || "(unknown)" | dayName}}
54+
</h4>
55+
</div>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)