Skip to content

Instantly share code, notes, and snippets.

@woosuk288

woosuk288/app.js

Last active August 29, 2015 14:17
Show Gist options
  • Save woosuk288/788713bfda9c477ebda6 to your computer and use it in GitHub Desktop.
Save woosuk288/788713bfda9c477ebda6 to your computer and use it in GitHub Desktop.
Download ZIP
start-ng 02. AngularJS 살펴보기
Raw
app.js
var todoApp = angular.module('todoApp', []);
var todoList = [{done : true, title : "AngularJS 독서"},
{done : false, title : "AngularJS 공부하기"},
{done : false, title : "개인 프로젝트 구성"}
];
todoApp.controller('todoCtrl', function ($scope){
$scope.appName = "AngularJS TODO APP";
$scope.todoList = todoList;
});
Raw
index.html
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="UTF-8">
<title>TODO App Demo</title>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body class="well" ng-controller="todoCtrl">
<h1>{{appName}}</h1>
<p>전체 할 일 <strong>2</strong>개 / 남은 할일은 <strong>1</strong>개
[<a href="">보관하기</a> ]</p>
<ul class="list-unstyled">
<li ng-repeat="todo in todoList" class="checkbox">
<input type="checkbox" ng-model="todo.done">{{todo.title}}
</li>
</ul>
<ul class="list-unstyled">
<li class="checkbox"><input type="checkbox">AngularJS 독서</li>
<li class="checkbox"><input type="checkbox">개인 프로젝트 구성</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment