지금까지 내용만으로도 충분히 간단한 할일 프로그램을 만들어볼 수 있다.
물론 아직 서버단이 완료되지 않았기 때문에 저장하는 것까지는 어려울 수 있지만,
간단하게 미리 만들어져 있는 json 파일을 가져와서 기존의 할일 목록을 뿌려주고, 임의로 할일을 추가할 수 있는 간단한 예제를 만들어 보자.
todo.json 파일
todo.html 파일
$http 을 사용해서 json 파일을 가져온 후 출력해주고,
할일 입력 시 해당 할일을 todos 모델에 추가해주는 간단한 소스이다.
물론 아직 서버단이 완료되지 않았기 때문에 저장하는 것까지는 어려울 수 있지만,
간단하게 미리 만들어져 있는 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 모델에 추가해주는 간단한 소스이다.