Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js quick start

947 views

Published on

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

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular js quick start

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

×