728x90
반응형
데이터 모델 생성
- html 엘리먼트와 데이터를 분리해 모델을 만드는 과정이다.
- AngularJS 애플리케이션은 브라우저상에 존재하므로 데이터 모델은 script 엘리먼트 내에 자바스크립트를 사용해 정의해야 한다.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>TO DO LIST</title>
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
<!-- angular 사용하기 위해서 추가. -->
<script src="./angular-1.3.7/angular.js"></script>
<script>
var model = {
user : "골든크랩",
items: [{ action : "강의자료를 만든다.", done: false},
{ action : "해외주식을 산다.", done: false},
{ action : "친구에게 술을 산다.", done: false},
{ action : "여행준비를 한다.", done: false}]
};
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>할 일 목록</th>
<th>완료 여부</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
728x90
반응형
'IT > JavaScript와 Framework' 카테고리의 다른 글
| AngularJS ver.1.3.7 - 02-05 (0) | 2022.02.23 |
|---|---|
| AngularJS ver.1.3.7 - 02-04 (0) | 2022.02.21 |
| AngularJS ver.1.3.7 - 02-02 (0) | 2022.02.21 |
| AngularJS Directives 정리 (0) | 2022.02.16 |
| AngularJS ver.1.3.7 - 02-01 - 첫번째앱 (0) | 2022.02.16 |
댓글