728x90
반응형
AngularJS 는 동적인 웹 응용프로그램을 개발하기 위해 사용되는 프레임웍으로, 구글에서 MVC(Model-View-Controller) 라는 디자인 패턴을 기반으로 개발됨.
샘플예제)
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TO DO List</title>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
var model = {
user: "Adam",
items: [{action: "Buy Flowers", done: false},
{action: "Get Shoes", done: false},
{action: "Collect Tickets", done: true},
{action: "Call Joe", done: false}]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function ($scope) {
$scode.todo = model;
});
</script>
<style>
html{border:5px solid red;}
body{border:5px solid blue;}
ol,ul{border: 5px solid green;text-align: center;}
/* ol, ul 줄로서 여백 - 문단태그임(정렬 적용 가능) */
li{border: 3px solid cyan;}
/* 왼쪽에 기본 여백이 있음, 줄로서 여백(정렬 속성 적용 가능) */
</style>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>To Do List</h1>
</div>
<div class="panel">
<div class = "input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Addr</button>
</span>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
728x90
반응형
'IT > JavaScript와 Framework' 카테고리의 다른 글
| 윈도우10에 Angualr 설치하기(AngularJS아님. Node.js설치포함) (0) | 2022.02.16 |
|---|---|
| ECMAScript (Java Script) History (0) | 2022.02.08 |
| path variable, path parameter (0) | 2021.06.17 |
| json 응답 주는 예제 (0) | 2021.06.17 |
| restFull 이란..리소스 중심 설계 (0) | 2021.06.17 |
댓글