Post on 15-Jan-2017
AngularJS Quick StartNHNENT.
협업시스템개발팀 김정기2015.10.19
개요
목표
● AngularJS의 기본 개념을 익힌다.
● TodoApp 코드 분석을 통해 동작원리 및 실습 과정을 소개한다.
개요
대상
● jQuery의 기본 사용법을 아시는 분
● AngularJS를 들어 봤거나 기본 기능만 테스트 해보신 분
● 실무에 적용해보고 싶으신 분
기본 개념
Angluar JS를 선택하는 이유
● 자바스크립트 코드량 감소
● 단순 자바스크립트 객체 데이터 모델을 이용한 view model 양방향 바인딩
● 재사용할 수 있는 UI 컴포넌트 개발 및 다양한 오픈소스 활용
Angluar JS를 선택하는 이유
● DI를 이용한 모듈 분리와 테스트의 용이성
● HTML&CSS 마크업과 JS 개발의 분리
● 세계적으로 가장 많이 사용하는 프레임워크
Angluar JS의 특징
● MVW 개발방식
● 양방향 데이터 바인딩
● 지시자를 이용한 컴포넌트화
Angluar JS의 특징
● AngularJS 템플릿
● 의존성 주입
● 테스트 프레임워크
Angluar JS의 특징
● SPA를 위한 라우터
● $q, $timeout 서비스를 이용한 비동기 프로그래밍 지원
Angluar JS의 특징
Angluar JS의 특징
● MVW 개발방식
○ Model View Whatever
Angluar JS의 특징
● MVW 개발방식
○ 구성요소
Angluar JS의 특징
● MVW 개발방식
○ 구성요소 흐름도
Angluar JS의 특징
● 양방향 데이터 바인딩
http://todomvc.com/examples/angularjs/#/
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) { … };...});
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>
Angluar JS의 특징
● 양방향 데이터 바인딩
Angluar JS의 특징
● 의존성 주입
Angluar JS의 특징
● 의존성 주입
○ 모듈 의존성
angular.module('todomvc', [ ‘ngCookies’, ‘ngRoute’, ‘ui.sortable’]).config(function($routeProvider){…});
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) { … };...});
Angluar JS의 특징
● AngularJS 템플릿
Angluar JS의 특징
● 지시자 (Directive)
○ 재활용가능한 웹 컴포넌트
Angluar JS의 특징
● 지시자 (Directive)
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 CNRKparent.appendChild(element);
Angluar JS의 특징
● 테스트 프레임워크
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(); });
}());
코드 분석
TODO Angluar JS
● 참고 예제
http://todomvc.com/examples/angularjs/#/
https://github.com/tastejs/todomvc/tree/gh-pages/examples/angularjs
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
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
TODO Angluar JS
● plnkr.co 로 UI 테스트
○ angular template 전체
http://plnkr.co/edit/8DmBdPz90gCK3dxdyTqV?p=preview
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
모듈 정의
TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Service
■ todoStorage
● todo list
● todo item 읽기/저장/수정/삭제
http://plnkr.co/edit/8DmBdPz90gCK3dxdyTqV?p=preview
todoCtrl.jstodoStorage.js 모듈 사용
TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Service
■ todoStorage
● todo list
● todo item 읽기/저장/수정/삭제
http://plnkr.co/edit/8DmBdPz90gCK3dxdyTqV?p=preview
todoCtrl.jstodoStorage.js 모듈 사용
모듈 주입
모듈 주입
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>
TODO Angluar JS
● plnkr.co 로 UI 테스트
○ Directive
■ todoEscape
■ todoFocus
http://plnkr.co/edit/8DmBdPz90gCK3dxdyTqV?p=preview
todoFocus.js todoEscape.js
Contact
NHNENT협업시스템 김정기kim.jeongki@example.com