angular의 기본 동작원리를 이해하고 todoApp 예제를 분석하여 실무에 도움이 되도록 하는 것이 목표입니다.

1. AngularJS Quick Start
NHNENT.
협업시스템개발팀 김정기
2015.10.19

2. 개요
목표
● AngularJS의 기본 개념을 익힌다.
● TodoApp 코드 분석을 통해 동작원리 및 실습 과정을 소개한다.

3. 개요
대상
● jQuery의 기본 사용법을 아시는 분
● AngularJS를 들어 봤거나 기본 기능만 테스트 해보신 분
● 실무에 적용해보고 싶으신 분

4. 기본 개념

5. Angluar JS를 선택하는 이유
● 자바스크립트 코드량 감소
● 단순 자바스크립트 객체 데이터 모델을 이용한 view model 양방향 바인딩
● 재사용할 수 있는 UI 컴포넌트 개발 및 다양한 오픈소스 활용

6. Angluar JS를 선택하는 이유
● DI를 이용한 모듈 분리와 테스트의 용이성
● HTML&CSS 마크업과 JS 개발의 분리
● 세계적으로 가장 많이 사용하는 프레임워크

7. Angluar JS의 특징
● MVW 개발방식
● 양방향 데이터 바인딩
● 지시자를 이용한 컴포넌트화

8. Angluar JS의 특징
● AngularJS 템플릿
● 의존성 주입
● 테스트 프레임워크

9. Angluar JS의 특징
● SPA를 위한 라우터
● $q, $timeout 서비스를 이용한 비동기 프로그래밍 지원

10. Angluar JS의 특징

11. Angluar JS의 특징
● MVW 개발방식
○ Model View Whatever

12. Angluar JS의 특징
● MVW 개발방식
○ 구성요소

13. Angluar JS의 특징
● MVW 개발방식
○ 구성요소 흐름도

14. Angluar JS의 특징
● 양방향 데이터 바인딩
http://todomvc.com/examples/angularjs/#/

15. Angluar JS의 특징
● 양방향 데이터 바인딩
angular.module('todomvc')
.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, store) {
$scope.todos = store.todos;
$scope.newTodo = '';
$scope.editedTodo = null;
…
$scope.addTodo = function () { … };
$scope.editTodo = function (todo) { … };
$scope.saveEdits = function (todo, event) { … };
$scope.revertEdits = function (todo) { … };
$scope.removeTodo = function (todo) { … };
$scope.saveTodo = function (todo) { … };
...
});

16. Angluar JS의 특징
● 양방향 데이터 바인딩
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll
(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed" ng-
change="toggleCompleted(todo)">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="saveEdits(todo, 'submit')">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="
revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>

17. Angluar JS의 특징
● 양방향 데이터 바인딩

18. Angluar JS의 특징
● 의존성 주입

19. Angluar JS의 특징
● 의존성 주입
○ 모듈 의존성
angular.module('todomvc', [
‘ngCookies’,
‘ngRoute’,
‘ui.sortable’
])
.config(function($routeProvider){
…
});

20. Angluar JS의 특징
● 의존성 주입
angular.module('todomvc')
.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, filter,
store) {
$scope.todos = store.todos;
$scope.newTodo = '';
$scope.editedTodo = null;
…
$scope.addTodo = function () { … };
$scope.editTodo = function (todo) { … };
$scope.saveEdits = function (todo, event) { … };
$scope.revertEdits = function (todo) { … };
$scope.removeTodo = function (todo) { … };
$scope.saveTodo = function (todo) { … };
...
});

21. Angluar JS의 특징
● AngularJS 템플릿

22. Angluar JS의 특징
● 지시자 (Directive)
○ 재활용가능한 웹 컴포넌트

23. Angluar JS의 특징
● 지시자 (Directive)

24. Angluar JS의 특징
● 지시자 (Directive)
○ 코드로 표현하자면 …
var html = ‘<div ng-bind=”express”></div>”;
//1단계 ) HTML을 DOM으로 변환
var template = angular.element(html);
//2단계) 템플릿 컴파일 하기
var linkFn = $compile(template);
//3단계) 컴파일된 템플릿과 스코프 객체를 연결
var element = linkFn(scope);
//4단계) 부모 DOMㅇP CNRK
parent.appendChild(element);

25. Angluar JS의 특징
● 테스트 프레임워크

26. Angluar JS의 특징
● 테스트 프레임워크
○ BDD
■ describe
● it
(function () {
'use strict';
describe('Todo Controller', function () {
var ctrl, scope, store;
// Load the module containing the app, only 'ng' is loaded by default.
beforeEach(module('todomvc'));
beforeEach(inject(function ($controller, $rootScope, localStorage) {
scope = $rootScope.$new();
...
ctrl = $controller('TodoCtrl', {
$scope: scope,
store: store
});
}));
it('should have all Todos completed', function () {
scope.$digest();
expect(scope.allChecked).toBeTruthy();
});
}());

27. 코드 분석

28. TODO Angluar JS
● 참고 예제
http://todomvc.com/examples/angularjs/#/
https://github.com/tastejs/todomvc/tree/gh-
pages/examples/angularjs

29. TODO Angluar JS
● 기능 분석
* 할일 등록
* INPUT 입력 후 목록 하단에표시
* TODO + DONE 수정
* 항목 더블 클릭 시 수정 모드
* 할일 목록
* 기본
* All - (TODO + DONE)
* Active - TODO(해야할일만)
* Completed - DONE(완료된일만)
* 상태 변경
* 선택 업무 상태 변경 (TODO <-> DONE)
* 전체 업무 상태 변경 (TODO <-> DONE)
* 완료 업무 삭제
* 항목 DONE 업무 삭제 [X버튼]
* 항목 DONE 업무 삭제 [Clear Completed]
* 전체 DONE 업무 삭제
* 상태 표시
* TODO 개수
* 필터 버튼 표시 [All, Active, Completed]
* Clear Completed
http://todomvc.com/examples/angularjs/#/
https://github.com/tastejs/todomvc/tree/gh-
pages/examples/angularjs

30. TODO Angluar JS
● 기능 분석
○ 파일 구조
* index.html
* HTML 페이지구성 및 angular template 정의
* app.js
* angular bootstrap 및 라우팅정의
* todoCtrl.js
* 기능별외부 scope function 정의
* todoStorage.js
* todo list 및 item 읽기/저장/수정/삭제 기능 정의 서비스
* todoEscape.js
* keyevent escape 처리 directive
* todoFocus.js
* 해당영역input focus 처리 directivehttp://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview

31. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ angular template 전체
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview

32. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ bootstrap
■ domready event 시 ng-app이
지정된 element를 대상으
로 angular 초기화 실행
■ 모듈 정의
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview
URL Path가 ‘/’ or /#/active or
/#/completed 일때 TodoCtrl과
todomvc-index.html 적용
-> URL Base SPA 기본 작동
app.js
index.html
모듈 정
의

33. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Service
■ todoStorage
● todo list
● todo item 읽기/저장/
수정/삭제
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview
todoCtrl.jstodoStorage.js 모듈 사
용

34. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Service
■ todoStorage
● todo list
● todo item 읽기/저장/
수정/삭제
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview
todoCtrl.jstodoStorage.js 모듈 사
용
모듈 주
입
모듈 주
입

35. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Angular Directive
■ ng-${DIRECITVENAME}
■ ng-repeat, ng-if, ng-show
■ ng-change, ng-click ...
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll
(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed" ng-
change="toggleCompleted(todo)">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="saveEdits(todo, 'submit')">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-
escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo
== editedTodo">
</form>
</li>
</ul>
</section>

36. TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Directive
■ todoEscape
■ todoFocus
http://plnkr.
co/edit/8DmBdPz90gCK3dxdyTqV?
p=preview
todoFocus.js todoEscape.js

37. Contact
NHNENT
협업시스템 김정기
kim.jeongki@example.com