지금까지 내용만으로도 충분히 간단한 할일 프로그램을 만들어볼 수 있다.
물론 아직 서버단이 완료되지 않았기 때문에 저장하는 것까지는 어려울 수 있지만,
간단하게 미리 만들어져 있는 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 모델에 추가해주는 간단한 소스이다.