toggle menu

[AngularJS] 간단한 할일(todo) 예제

2012. 10. 31. 10:12 AngularJS
지금까지 내용만으로도 충분히 간단한 할일 프로그램을 만들어볼 수 있다.
물론 아직 서버단이 완료되지 않았기 때문에 저장하는 것까지는 어려울 수 있지만,
간단하게 미리 만들어져 있는 json 파일을 가져와서 기존의 할일 목록을 뿌려주고, 임의로 할일을 추가할 수 있는 간단한 예제를 만들어 보자.




todo.json 파일
[
	{
		"checked": "checked",
		"work": "angularJS 튜토리얼 다 보기"
	},
	{
		"checked": "",
		"work": "angularJS 이해하기"
	}
]




todo.html 파일
<html ng-app>

	<head>
		<meta charset="utf-8">
		<title>간단한 할일</title>

		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
		</script>
		<!--
		이 태그는 당연하게도 앵귤러js를 로드하고, 더불어 HTML페이지가 모두 로드된 후에
		브라우저에 의해 실행되는 콜백을 등록한다.
		-->

		<script type="text/javascript" charset="utf-8">
		
			function todoController($scope, $http)
			{
				$http.get('todo.json').success(function(data)
				{
					$scope.todos = data;
				});

				$scope.addTodo = function()
				{
					if ($scope.newTodo)
					{
						$scope.todos.push(
						{
							"checked" : "",
							"work" : $scope.newTodo
						});
						
						$scope.newTodo = null;
					}
					else
					{
						alert('할일을 입력해주세요!');
					}
				};
			}

		</script>

	</head>
	<body ng-controller="todoController">

		<ul>
			<li ng-repeat="todo in todos">
				<input type="checkbox" checked="{{todo.checked}}">
				{{todo.work}}
			</li>
		</ul>

		<input type="text" ng-model="newTodo">
		<input type="button" value="할일 추가" ng-click="addTodo()">
	</body>
</html>


$http 을 사용해서 json 파일을 가져온 후 출력해주고,
할일 입력 시 해당 할일을 todos 모델에 추가해주는 간단한 소스이다. 

AngularJS 관련 포스팅 더보기