Backbone 으로 todo 목록을 처음 만들어 보았을 때 이해와 타입핑을 하는데 많은 시간을 소비하였다. Angular를 접하면서 Todo 목록 만들기가 얼마나 쉽고 빠르게 몇분만에 개발되는지 감상해 보자. 직접 해보았는데 20분정도 소요된것 같다. 그간 배운 빅데이터는 이와 같은 쉬운 웹앱기술로 통합되어 스마트 기기에 표현될 수 있겠다.
1) 할일 목록 만들기
- 사전준비
+ 소스복제 : git clone https://github.com/ysyun/prototyping
+ 투두소스 : cd prototyping/angularjs/todo
- 할일 목록을 등록하고 완료체크를 하고 완료된 것은 삭제하는 기능을 갖는다
- Bootstrap, Underscore를 이용하고, Angular Controller를 별도 .js로 분리한다
- todo.html
+ <html ng-app> 추가
+ <script> : angular.js, underscore.js, todo.js, bootstrap.css 파일을 연결한다
+ <div ng-controller> 추가 : controller function은 todo.js안에 구현
+ getTotalTodos() : controller function 안에 구현 - 목록이 변경되면 자동 호출되어 바인딩됨
+ <li ng-repeat> 추가 : todos 목록 배열을 열거한다
+ <form> 의 <input ng-model="formTodoText"> 속성을 정의하고 controller function에서 사용토록 한다
+ <button ng-click="clearCompleted()" 추가 : controller function에서 구현한다
<!doctype html><html lang="en" ng-app><head><meta charset="UTF-8"><title>AngularJS Hello World using Directives</title><script src="http://code.angularjs.org/1.1.4/angular.min.js"></script><script src="../../underscore/underscore-min.js"></script><script src="todo.js"></script><link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="todo.css"></head><body><div ng-controller="TodoCtrl"><h2>Total count : {{getTotalTodos()}}</h2><ul class="unstyled"><li ng-repeat="todo in todos"><input type="checkbox" ng-model="todo.done"><span class="done-{{todo.done}}">{{todo.text}}</span></li></ul><form class="form-horizontal"><input type="text" ng-model="formTodoText" ng-model-instant><button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button></form><button class="btn-large" ng-click="clearCompleted()"><i class="icon-trash"></i>Clear Completed</button></div></body></html>
+ 브라우져에 출력되는 DOM Element 소스
- todo.css
.done-true{text-decoration: line-through;color: grey;}
- todo.js
+ todos : 목록 배열
+ function들 정의
function TodoCtrl($scope) {
$scope.totalTodos = 4;// 가상 데이터를 만든다$scope.todos = [{text:'Learn you', done:false},{text:'build SPA', done:false}];// html에서 전체 건수를 return 해 준다$scope.getTotalTodos = function() {return $scope.todos.length;}// Underscore.js 를 이용하여 done=false 인 것만 배열로 뽑아낸다$scope.clearCompleted = function() {$scope.todos = _.filter($scope.todos, function(todo){return !todo.done;});}// todos 배열에 html에서 입력한 값을 넣어준다$scope.addTodo = function() {$scope.todos.push({text:$scope.formTodoText, done:false});$scope.formTodoText = '';}}
2) TodoList 만들기 동영상
- 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/todo
'AngularJS > Prototyping' 카테고리의 다른 글
| [AngularJS] iCheck JQuery Plugin 을 AngularJS와 통합하기 (0) | 2013.08.20 |
|---|---|
| [AngularJS] Twitter Search 만들기 (0) | 2013.04.05 |
| [AngularJS] Hello World 만들기 (0) | 2013.04.04 |