728x90
반응형
모델 : 데이터, 데이터의 저장 및 조회와 관련된 로직을 포함.
뷰 : 데이터를 포맷팅하고
<!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", []);
todoApp.controller("ToDoCtrl", function ($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller=""ToDoCtrl">
<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-06 (0) | 2022.02.23 |
|---|---|
| AngularJS ver.1.3.7 - 02-05 (0) | 2022.02.23 |
| AngularJS ver.1.3.7 - 02-03 (0) | 2022.02.21 |
| AngularJS ver.1.3.7 - 02-02 (0) | 2022.02.21 |
| AngularJS Directives 정리 (0) | 2022.02.16 |
댓글