현실적 Angular js
16 likes2,534 views
http://netil.github.io/slides/angularjs/index3.html
![적용사례 #1
8월31일오전10:00
카카오토픽
카카오토픽이2015년8월31일로종료되었습니다.
그동안이용해주셔서진심으로감사드립니다.
Good-Bye-!
카카오스토리 채널,해시태그검색
많이 본 뉴스 댓글 많은 뉴스
1
‘해피투게더3’ 구혜선, 단독주택서 거주 “200
평 규모?”
392,776
2
이병헌, '협박녀' 이씨·다희에게 선처..처벌불
원의견서 제출
374,322
3
[오미정의 연예직설] 육아 예능을 보는 보통
부모의 씁쓸함
356,148
4
[디패Go] "라둥이는 처음이지?…역대급 베이
비가 떴다" (슈)
336,440
5
'에브리바디' 한의사 왕혜문 근육질 비키니에
홈 TV 포토 랭킹 스타캐스트 영화 뮤직 NOW
KakaoTopic ←clicktorefresh→ 네이버연예랭킹](https://image.slidesharecdn.com/angularjs-150924111924-lva1-app6891/85/Angular-js-15-320.jpg)
![고려사항: FOUC*
<bodyng-app="myApp">
<divng-controller="myControllerList">
<ul>
<ling-repeat="fruitinfruits">
<span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span>
</li>
</ul>
<buttononclick="location.reload()">reload</button>
</div>
<scripttype="text/javascript"src=/slideshow/angular-js-53149027/53149027/"https:/code.angularjs.org/1.3.8/angular.min.js"></script>
<scripttype="text/javascript">
angular.module("myApp",[])
.controller("myControllerList",function($scope){
$scope.fruits=[
{name:'메론',qty:9},
{name:'망고',qty:3},
메론 / 9
망고 / 3
바나나 / 1
reload
*FOUC(FlashOfUnstyledContent)-http://en.wikipedia.org/wiki/Flash_of_unstyled_content](https://image.slidesharecdn.com/angularjs-150924111924-lva1-app6891/85/Angular-js-24-320.jpg)
현실적 Angular js
- 2. ANGULARJS 2009년MiškoHevery의개인프로젝트로시 작. 처음개발시웹개발자를대상으로하지않았고, 개발은모르지만HTML은이해하는 디자이너와같은사람들을대상으로함. ,BreakingOpen:AngularJS AngularJS:UpandRunning 첫AngularJS프로젝트:GoogleFeedback 기간 LOC GWT 3명x6개월=18MM 17,000 AngularJS 1명x3주=0.75MM 1,000
- 6. 왜 개발자들이 좋아할까? (특히BACK- END) 코드일관성(개인스타일편차적음) 구조적(MVC패턴) 코드량감소(이벤트바인딩,뷰업데이트코드 등) 코드의재사용 양방향데이터바인딩(Two-WayData Binding) 다양한Module을활용한빠른개발
- 7. 간단 ANGULARJS 예제 #1 HTML Result Edit on <html ng-app> <!-- (1) 하위 영역은 AnguarJS 어플리케이션으로 인식됨 --> <head> <title>AngularJS</title> <!-- AngularJS 로딩 --> <script type="text/javascript" src=/slideshow/angular-js-53149027/53149027/"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>
- 8. 간단 ANGULARJS 예제 #2 HTML JS Result Edit on <html ng-app="myApp"> <head> <title>AngularJS</title> <script type="text/javascript" src=/slideshow/angular-js-53149027/53149027/"https:/code.angularjs.org/1.3.8/angular.min.js"></script> </head> <body> <!-- 컨트롤러는 모듈 내에 정의되며, HTML 요소와 묶이도록 구성된다. 컨트롤러에는 비즈니스 로직이 구현되며, 데이터와 이벤트 핸들러 함수 등이 포함된다. --> <div ng-controller="myController1"> <ul> <li ng-repeat="fruit in fruits"> <span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span> </li> </ul> <button ng-click="setValue()">변경</button> </div>
- 9. 양방향 데이터 바인딩 (TWO-WAY DATA BINDING)
- 11. 개발방법 비교: DOM 젵Ӗ VS ANGULARJS Doubleclicktoeditatodo CreatedbySindreSorhus PartofTodoMVC jQuery Example Source jQueryisafast,small,andfeaturerich JavaScriptlibrary.Itmakesthingslike HTMLdocumenttraversaland manipulation,eventhandling, animation,andAjaxmuchsimplerwith aneasytouseAPIthatworksacross amultitudeofbrowsers.Witha combinationofversatilityand extensibility,jQueryhaschangedthe waythatmillionsofpeoplewrite JavaScript. “ ” todos Whatneedstobedone?
- 12. 개발방법 비교: DOM 젵Ӗ
- 14. 개발방법 비교: 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
- 15. 적용사례 #1 8월31일오전10:00 카카오토픽 카카오토픽이2015년8월31일로종료되었습니다. 그동안이용해주셔서진심으로감사드립니다. Good-Bye-! 카카오스토리 채널,해시태그검색 많이 본 뉴스 댓글 많은 뉴스 1 ‘해피투게더3’ 구혜선, 단독주택서 거주 “200 평 규모?” 392,776 2 이병헌, '협박녀' 이씨·다희에게 선처..처벌불 원의견서 제출 374,322 3 [오미정의 연예직설] 육아 예능을 보는 보통 부모의 씁쓸함 356,148 4 [디패Go] "라둥이는 처음이지?…역대급 베이 비가 떴다" (슈) 336,440 5 '에브리바디' 한의사 왕혜문 근육질 비키니에 홈 TV 포토 랭킹 스타캐스트 영화 뮤직 NOW KakaoTopic ←clicktorefresh→ 네이버연예랭킹
- 16. 적용사례 #2 공지사항 화당 전회 작품소개 작가정보 리뷰 23 '시즌2'는<가우스전자>674화이후연재분입니다.(5/27~12/31) 무료 무료 선택대여 전화대여 홈 요일웹툰 베스트도전 스토어 가우스전자(시즌2) 8.8(202명)별점주기 총410화(미완결) 410화무료 곽백수 코믹 전체이용가 196 대여 구매 1화부터 2014.03.03. 4쪽674화 무료 2014.03.03. 4쪽675화 무료 북스앱최신버전설치후이용해주세요 설치하기 네이버 웹툰스토어
- 17. 그러나 고민할 점
- 20. 고려사항: 성능 #1 TODOMVCBENCHMARK StepTests RunAll 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/
- 21. 고려사항: 성능 #2 초기로딩&렌더링 http://www.filamentgroup.com/lab/mv-initial-load-times.html
- 22. 고려사항: 성능 #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 생활 세계 포토 로딩 속도 : 72ms 리스트 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 생활 세계 포토 로딩 속도 : 138ms 일반적방식 ←clicktorefresh→ AngularJS
- 23. 고려사항: 성능 #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-WayDataBindingvs.Two-WayDataBinding
- 24. 고려사항: FOUC* <bodyng-app="myApp"> <divng-controller="myControllerList"> <ul> <ling-repeat="fruitinfruits"> <span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span> </li> </ul> <buttononclick="location.reload()">reload</button> </div> <scripttype="text/javascript"src=/slideshow/angular-js-53149027/53149027/"https:/code.angularjs.org/1.3.8/angular.min.js"></script> <scripttype="text/javascript"> angular.module("myApp",[]) .controller("myControllerList",function($scope){ $scope.fruits=[ {name:'메론',qty:9}, {name:'망고',qty:3}, 메론 / 9 망고 / 3 바나나 / 1 reload *FOUC(FlashOfUnstyledContent)-http://en.wikipedia.org/wiki/Flash_of_unstyled_content
- 25. 고려사항: 이벤트 바인딩 양방향데이터바인딩을위해모델로지정된요소에 여래개의이벤트가바인딩된다. Event log DOMContentLoaded: 1 load: 1
- 26. 호환성 AngularJS2.0DetailsEmerge AngularJS2.0은1.x와호환되지않음 1.x-->2.0마이그레이션방법없음 1.3은2.0릴리즈이후,1.5~2년간만지원예정
- 29. 도입 할까?,말까?
- 30. ANGULARJS 도입 선택 가이드 http://helloworld.naver.com/helloworld/1172239