ANGULARJS/template
angularJS Template Routing과 Directive를 같이 써봤어요
JDK's blog
2016. 6. 29. 11:45
안녕하세요.
이번에는 템플릿에 대해서 알아보겠습니다.
템플릿을 관리하는 소스코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 |
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- 라우팅과 angularJS기본파일입니다. -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<!-- app이름과 controller이름을 설정합니다. -->
<body ng-app="myApp" ng-controller="myCon">
<table width="100%">
<tr>
<td>
<!-- directive대상이될 태그입니다. -->
<it-menu></it-menu>
</td>
<td width="90%">
<!-- 라우팅하면 보여질 곳 입니다. -->
<div ng-view></div>
</td>
</tr>
</table>
<script>
(function(angular) {
//app과 라우팅을 연결합니다.
var app = angular.module("myApp", ["ngRoute"]);
/* my-tabs 태그에 대한 배치를 활성화 */
app.directive('itMenu', function() {
return {
restrict: 'E', //
transclude: true, //파일포함의 여부 입니다.
scope: {}, //변수선억지역 입니다.
/* scope를 넣어서 각각 select,addPane함수를 만들어줍니다. */
controller: ['$scope', function($scope) {
}],
templateUrl: 'menu.html'
}
});
//라우팅부분입니다.
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html" //처음에 main.html을 불러옵니다.
})
.when("/color", {
templateUrl : "color.html" // /color조건을 만족시키면 color.html로 이동합니다.
})
});
//이벤트를 처리하기 위한 controller를 만들었습니다.
app.controller("myCon", function($scope){
// testAlert함수입니다. alert와 변수를 넣어줍니다.
$scope.testAlert = function(scope){
alert("DDD");
$scope.add = "추가되었습니다.";
}
});
})(window.angular);
</script>
</body>
</html>
|
cs |
main.html에 해당하는 페이지입니다. 처음 content단에 나올 소스코드입니다.
|
1
2 |
<!-- 클릭함수와 add변수를 출력하고 있습니다. -->
<div ng-click="testAlert()">글내용입니다. {{add}} </div> |
cs |
color를 눌르면 나올 페이지입니다. 간단하게 main인지, color인지 구분만 할 수 있도록 해놓은 코드입니다.
|
1 |
color페이지입니다. |
cs |
이렇게 처리했습니다.
감사합니다.