728x90
반응형
AngularJS 추가함.
angular.js 호출부 추가
AngularJS앱은 하나 이상의 모듈로 구성되는데, angular.module 메서드를 호출해 생성함.
파라미터는
1. 생성할 모듈명
2. 필요한 추가 모듈 배열. 필요없으면 [] 만 넣는다.
ng-app 어트리뷰트는 html 엘리먼트 중 AngularJS가 컴파일하고 처리해야 할 모듈이 들어 있음을 알려주는 역할을 한다.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>TO DO LIST</title>
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
<!-- angular 사용하기 위해서 추가. -->
<script src="./js/angular-1.3.7/angular.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
</script>
</head>
<body>
<div class="page-header">
<h1>골든크랩의 할일 들</h1>
</div>
<div class="panel">
<div class=""input-group">
<input class="form-control" />
<span class=""input-group-btn">
<button class="btn btn-dark">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>강의자료를 만든다.</td><td>No</td></tr>
<tr><td>해외주식을 산다.</td><td>No</td></tr>
<tr><td>친구에게 술을 산다.</td><td>Yes</td></tr>
<tr><td>여행준비를 한다.</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<html ng-app="todoApp">
<head>
<title>TO DO LIST</title>
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
<!-- angular 사용하기 위해서 추가. -->
<script src="./js/angular-1.3.7/angular.js"></script>
<script>
var todoApp = angular.module("todoApp", []);
</script>
</head>
<body>
<div class="page-header">
<h1>골든크랩의 할일 들</h1>
</div>
<div class="panel">
<div class=""input-group">
<input class="form-control" />
<span class=""input-group-btn">
<button class="btn btn-dark">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>강의자료를 만든다.</td><td>No</td></tr>
<tr><td>해외주식을 산다.</td><td>No</td></tr>
<tr><td>친구에게 술을 산다.</td><td>Yes</td></tr>
<tr><td>여행준비를 한다.</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>
728x90
반응형
'IT > JavaScript와 Framework' 카테고리의 다른 글
| AngularJS ver.1.3.7 - 02-04 (0) | 2022.02.21 |
|---|---|
| AngularJS ver.1.3.7 - 02-03 (0) | 2022.02.21 |
| AngularJS Directives 정리 (0) | 2022.02.16 |
| AngularJS ver.1.3.7 - 02-01 - 첫번째앱 (0) | 2022.02.16 |
| Node.js 노드 설치하기 (0) | 2022.02.16 |
댓글