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);
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();
});
}());
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 모듈 사
용
모듈 주
입
모듈 주
입