angular js quick start

AngularJS Quick StartNHNENT.

협업시스템개발팀 김정기2015.10.19

개요

목표

● AngularJS의 기본 개념을 익힌다.

● TodoApp 코드 분석을 통해 동작원리 및 실습 과정을 소개한다.

개요

대상

● jQuery의 기본 사용법을 아시는 분

● AngularJS를 들어 봤거나 기본 기능만 테스트 해보신 분

● 실무에 적용해보고 싶으신 분

기본 개념

Angluar JS를 선택하는 이유

● 자바스크립트 코드량 감소

● 단순 자바스크립트 객체 데이터 모델을 이용한 view model 양방향 바인딩

● 재사용할 수 있는 UI 컴포넌트 개발 및 다양한 오픈소스 활용

Angluar JS를 선택하는 이유

● DI를 이용한 모듈 분리와 테스트의 용이성

● HTML&CSS 마크업과 JS 개발의 분리

● 세계적으로 가장 많이 사용하는 프레임워크

Angluar JS의 특징

● MVW 개발방식

● 양방향 데이터 바인딩

● 지시자를 이용한 컴포넌트화


● AngularJS 템플릿

● 의존성 주입

● 테스트 프레임워크


● SPA를 위한 라우터

● $q, $timeout 서비스를 이용한 비동기 프로그래밍 지원



○ Model View Whatever



○ 구성요소



○ 구성요소 흐름도



http://todomvc.com/examples/angularjs/#/


● 양방향 데이터 바인딩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) { … };...});


● 양방향 데이터 바인딩 <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>



○ 모듈 의존성

angular.module('todomvc', [ ‘ngCookies’, ‘ngRoute’, ‘ui.sortable’]).config(function($routeProvider){…});


● 의존성 주입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) { … };...});


● AngularJS 템플릿


● 지시자 (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);



○ 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

● 참고 예제


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








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

http://plnkr.co/edit/8DmBdPz90gCK3dxdyTqV?p=preview




TODO Angluar JS

● plnkr.co 로 UI 테스트

○ angular template 전체






TODO Angluar JS


○ bootstrap

■ domready event 시 ng-app이 지정된 element를 대상으로 angular 초기화 실행

■ 모듈 정의


URL Path가 ‘/’ or /#/active or /#/completed 일때 TodoCtrl과 todomvc-index.html 적용

-> URL Base SPA 기본 작동

app.js

index.html

모듈 정의





TODO Angluar JS


○ Service

■ todoStorage

● todo list

● todo item 읽기/저장/수정/삭제


todoCtrl.jstodoStorage.js 모듈 사용





TODO Angluar JS


○ Service

■ todoStorage

● todo list

● todo item 읽기/저장/수정/삭제


todoCtrl.jstodoStorage.js 모듈 사용

모듈 주입

모듈 주입





TODO Angluar JS


○ Angular Directive

■ ng-${DIRECITVENAME}

■ ng-repeat, ng-if, ng-show

■ ng-change, ng-click ...


<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


○ Directive

■ todoEscape

■ todoFocus


todoFocus.js todoEscape.js





Contact

NHNENT협업시스템 김정기[email protected]

angular js quick start

Internet