Download as PDF, PPTX
![고려사항: 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](https://image.slidesharecdn.com/angularjs150116-150116034150-conversion-gate02/85/AngularJS-18-320.jpg)
More Related Content
![[D2 오픈세미나]3.web view hybridapp](https://cdn.slidesharecdn.com/ss_thumbnails/3-140804011233-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문](https://cdn.slidesharecdn.com/ss_thumbnails/mean-re-151003142901-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Angular Seminar [한빛미디어 리얼타임 세미나]](https://cdn.slidesharecdn.com/ss_thumbnails/angularseminarhanbitpublic-170725053734-thumbnail.jpg?width=640&height=640&fit=bounds)
![[115] clean fe development_윤지수](https://cdn.slidesharecdn.com/ss_thumbnails/115cleanfedevelopment-161023163916-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...](https://cdn.slidesharecdn.com/ss_thumbnails/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기](https://cdn.slidesharecdn.com/ss_thumbnails/backbone-131027105006-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기](https://cdn.slidesharecdn.com/ss_thumbnails/xeconphpfest2014-angularjs-141110181025-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기](https://cdn.slidesharecdn.com/ss_thumbnails/deview2017-billboard-171018033912-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs](https://cdn.slidesharecdn.com/ss_thumbnails/egjs-161115043853-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기](https://cdn.slidesharecdn.com/ss_thumbnails/js-battleground-181012081900-thumbnail.jpg?width=640&height=640&fit=bounds)
![[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지](https://cdn.slidesharecdn.com/ss_thumbnails/fe-jindobillboard-171026134645-thumbnail.jpg?width=640&height=640&fit=bounds)
![[SOSCON 2018] 오픈소스 개발: Behind the scenes](https://cdn.slidesharecdn.com/ss_thumbnails/behindthescenes181016-181018072858-thumbnail.jpg?width=640&height=640&fit=bounds)
가볍게 살펴보는 AngularJS
- 1.
- 2.
- 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-WAYDATA BINDING)
- 7.
- 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.
- 10.
- 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주 컨텐츠와 목록 포함하는 엔드 페이지
- 13.
- 14. 고려사항: 성능 #1TODOMVC 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. 고려사항: 이벤트 바인딩 양방향 데이터 바인딩을 위해 모델로 지정된 요소에 여래 개의 이벤트가 바인딩 된다. Eventlog DOMContentLoaded: 1 load: 1
- 20.
- 21.
- 22.