Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to 가볍게 살펴보는 AngularJS
Similar to 가볍게 살펴보는 AngularJS (20)
More from Jae Sung Park
More from Jae Sung Park (20)
가볍게 살펴보는 AngularJS
- 3. PHILOSOPHY 1. 데이터 중심적 기존 방식은 먼저 대상 DOM 요소를 선택 한 후, 필요한 작업을 수행하는 형태 → AngularJS는 데이터 자체에 초점을 맞추어 작업, 데이터의 출력은 자동으로 수행 2. 테스트 주도적 Dependency Injection을 통해 손쉽게 mock-up 객체로 전환 뷰와 분리된 컨트롤러내의 비즈니스 로직은 테스트 친화적 3. 선언적 HTML 커스텀 태그, 태그 속성 등을 통한 선언적 형태의 사용
- 4. 간단 ANGULARJS 예제 #1 HTML Result Edit on <html ng-app> <!-- (1) 하위 영역은 AnguarJS 어플리케이션으로 인식됨 --> <head> <title>AngularJS</title> <!-- AngularJS 로딩 --> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> </head> <body> <div> <!-- (2) 데이터 바인딩을 위해 사용되는 지시자로, 값으로 지정한 'name'은 모델의 이름으로 사용 --> <input type='text' ng-model='name' /> <!-- (3) 데이터의 출력을 위한 템플릿 표현 식으로, 이중 중괄호로 묶어 사용한다. 이곳에 사용된 모델명인 'name'은 ng-model='name'과 바인딩 되어 처리된다. --> <h2>{{name}}</h2> </div> </body> </html>
- 5. 간단 ANGULARJS 예제 #2 HTML JS Result Edit on <html ng-app="myApp"> <head> <title>AngularJS</title> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> </head> <body> <!-- 컨트롤러는 모듈 내에 정의되며, HTML 요소와 묶이도록 구성된다. 컨트롤러에는 비즈니스 로직이 구현되며, 데이터와 이벤트 핸들러 함수 등이 포함된다. --> <div ng-controller="myControllerList"> <ul> <li ng-repeat="fruit in fruits"> <span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span> </li> </ul> <button ng-click="setValue()">변경</button> </div>
- 6. 양방향 데이터 바인딩 (TWO-WAY DATA BINDING)
- 8. 개발방법 비교: DOM 제어 VS ANGULARJS jQuery Example Source jQuery is a fast, small, and featurerich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easytouse API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. “ ” todos 2 items left All Active Completed What needs to be done?» sddd✔ ddd✔
- 9. 개발방법 비교: DOM 제어
- 11. 개발방법 비교: DOM 제어 VS ANGULARJS 구분 종류 크기(byte) Total(byte) DOM 제어(Jindo) HTML 1,164 4,951 (100%) JavaScript 3,787 AngularJS HTML 2,059 3,161 (63.84%) JavaScript 1,102
- 12. 적용사례로 살펴본 학습 비용 구분 학습 시간/예측 개발 서비스 종류 사례1 6주 서비스 어드민 사례2 7일(2일 학습 + 5일 개발) 2개의 탭을 갖는 목록 사례3 JS 초급: 쉽게접근 JS 중/상급: 기존 방식의 익숙함으로 인한 시간필요 APM, 저작도구, 프로모션 페이지, etc. 사례4 2주 컨텐츠와 목록 포함하는 엔드 페이지
- 14. 고려사항: 성능 #1 TODOMVC BENCHMARK Step Tests Run All Backbone 1.1.2 Backbone/Adding100Items Backbone/CompletingAllItems Backbone/DeletingAllItems Ember 1.8.1 + Handlebars 1.3.0 Ember/Adding100Items Ember/CompletingAllItems Ember/DeletingItems Angular 1.2.27 Angular/Adding100Items Angular/CompletingAllItems Angular/DeletingAllItems React 0.12.1 React/Adding100Items React/CompletingAllItems React/DeletingAllItems Om 0.5.0 + React 0.9.0 Om/Adding100Items Om/CompletingAllItems Om/DeletingAllItems http://dsuket.github.io/todomvc-perf-comparison/
- 15. 고려사항: 성능 #2 초기 로딩&렌더링 http://www.filamentgroup.com/lab/mv-initial-load-times.html
- 16. 고려사항: 성능 #3 데이터 처리 100개 목록 데이터가 HTML에 포함되어 처리되는 경우 리스트 0디지털타임스 오후 1:15 리스트 1디지털타임스 오후 1:15 리스트 2디지털타임스 오후 1:15 리스트 3디지털타임스 오후 1:15 리스트 4디지털타임스 오후 1:15 리스트 5디지털타임스 오후 1:15 리스트 6디지털타임스 오후 1:15 리스트 7디지털타임스 오후 1:15 리스트 8디지털타임스 오후 1:15 리스트 9디지털타임스 오후 1:15 금융 증권 부동산 홈 정치 경제 연예 사회 IT 생활 세계 포토 TV 언론사별 로딩 속도 : 750ms 리스트 0 디지털타임스 오후 1:15 리스트 1 디지털타임스 오후 1:15 리스트 2 디지털타임스 오후 1:15 리스트 3 디지털타임스 오후 1:15 리스트 4 디지털타임스 오후 1:15 리스트 5 디지털타임스 오후 1:15 리스트 6 디지털타임스 오후 1:15 리스트 7 디지털타임스 오후 1:15 리스트 8 디지털타임스 오후 1:15 리스트 9 디지털타임스 오후 1:15 금융 증권 부동산 홈 정치 경제 연예 사회 IT 생활 세계 포토 TV 언론사별 로딩 속도 : 942ms 일반적 방식 ← click to refresh → AngularJS
- 17. 고려사항: 성능 #4 데이터 바인딩 데이터 편차에 따른 처리 속도 리스트 0디지털타임스 오후 1:15 리스트 1디지털타임스 오후 1:15 리스트 2디지털타임스 오후 1:15 리스트 3디지털타임스 오후 1:15 리스트 4디지털타임스 오후 1:15 리스트 5디지털타임스 오후 1:15 리스트 6디지털타임스 오후 1:15 금융 증권 부동산 100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400 1500 1600 1700 1800 1900 2000 로딩 속도 : 리스트 0 디지털타임스 오후 1:15 리스트 1 디지털타임스 오후 1:15 리스트 2 디지털타임스 오후 1:15 리스트 3 디지털타임스 오후 1:15 리스트 4 디지털타임스 오후 1:15 리스트 5 디지털타임스 오후 1:15 리스트 6 디지털타임스 오후 1:15 금융 증권 부동산 100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400 1500 1600 1700 1800 1900 2000 로딩 속도 : One-Way Data Binding vs. Two-Way Data Binding
- 18. 고려사항: FOUC* <body ng-app="myApp"> <div ng-controller="myControllerList"> <ul> <li ng-repeat="fruit in fruits"> <span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span> </li> </ul> <button onclick="location.reload()">reload</button> </div> <script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp",[]) .controller("myControllerList", function($scope) { $scope.fruits = [ { name: '메론', qty: 9 }, { name: '망고', qty: 3 }, { name: '바나나', qty: 1 } ]; }); </script> </body> 메론 / 9 망고 / 3 바나나 / 1 reload *FOUC(Flash Of Unstyled Content) - http://en.wikipedia.org/wiki/Flash_of_unstyled_content
- 19. 고려사항: 이벤트 바인딩 양방향 데이터 바인딩을 위해 모델로 지정된 요소에 여래 개의 이벤트가 바인딩 된다. Event log DOMContentLoaded: 1 load: 1
- 21. 도입 할까?,말까?