프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS

63,487 views

Published on

K모바일 주관 WebMobileDevCon 2013 발표자료.
http://www.kmobile.co.kr/k_conedu/Conference/Con_gProgram.asp?id=1140

Published in: Technology
5 Comments
318 Likes
Statistics
Notes
No Downloads
Views
Total views
63,487
On SlideShare
0
From Embeds
0
Number of Embeds
23,188
Actions
Shares
0
Downloads
1,144
Comments
5
Likes
318
Embeds 0
No embeds

No notes for slide

프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS

  1. 1. 프론트엔드 웹앱 프레임웍Dongsu, Jang <iolothebard at gmail dot com>
  2. 2. 차례•Prologue•Bootstrap•Backbone.js•AngularJS•Demo•Epilogue
  3. 3. Prologue이미지 출처: http://www.hd-desk.com/spider_web_wallpapers/spider_web_wallpapers_1280_960.html
  4. 4. 홈페이지? 웹 사이트? 웹 서비스? 웹 애플리케이션? 웹앱?이미지 출처: http://funnypictures00.blogspot.com/2012/02/beautiful-road-pictures-and-wallpapers.html
  5. 5. 웹의 역사 텍스트 출처: http://www.evolutionoftheweb.com
  6. 6. 웹 프레임웍의 역사 CakePHP 1.0 ASP 3.0 GWT 2.0 Express Servlet 2.3 GWT 1.0 Rails 2.0 Flex 3.0 Tapestry 2.1 JSF 1.0 1.0 Tomcat 3.0.x Struts 2.0 Django 1.0 Spring 3.0 Flask 0.9 Flex 1.0 Tapestry (initial release) ASP.NET 1.0 Zope 3 4.0 JSF 2.0 Sinatra 1.0 Play 2.01999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Backbone jQuery AngularJS Struts 1.0 Play 1.0 Servlet 2.2 Grails 1.0 .js 0.1 Mobile 1.0 1.0 Spring 1.0 Dojo 1.0Becomes part CometD 1.0 of J2EE 1.2 Servlet 2.4 Emberjs (JDK 1.2) AJAX term TurboGears 1.0 1.0 RC coined jQuery 1.0 Closure Tools EXT 4.0 IE 6.0 Sproute Sencha jQuery Lift 1.0 Core 1.0 Touch 1.0 WebWork 1.0 Wicket 1.0 2.0?? Opera 4.0 Stripes 1.0 Symfony 1.0 출처: http://www.flickr.com/photos/mraible/4378559350/
  7. 7. 웹 개발의 역사홈페이지 웹 사이트 웹 서비스 웹앱정적 콘텐츠 동적 콘텐츠 기능성 실시간 읽기 쓰기 개발 생산성 상호작용 MVC 서버 경량 서버 프레임웍 프레임웍HTML CGI & + +저작도구 서버 페이지 AJAX 프론트엔드 툴킷 프레임웍
  8. 8. 프론트엔드 중심 웹앱 시스템 아키텍쳐 웹앱 정적 백엔드프론트엔드 웹
  9. 9.  서버프레임웍 HTTP 정적 백오피스Javascript 캐시 컨텐츠클라이언트모바일
  10. 10.  앱 JSON RESTful API
  11. 11.  서버 애플리케 Java /HTTP 데이터클라이언트 이션 경량
  12. 12.  서버 베이스 서버Objective-C 프레임웍클라이언트
  13. 13. 프론트엔드 웹앱 요소 기술 스택 런타임(플랫폼) 웹브라우져 DOM, BOM, HTML5 JS API, W3C Web Apps런타임 라이브러리 WG API, ...GUI 서브시스템 HTML5, CSS3, Canvas, WebGL, SVG, ... HTTP, AJAX, 웹스토리지, IndexDB, 웹소켓, I/O 서브시스템 WebRTC, ... JavaScript, CoffeeScript, TypeScript, ... 프로그래밍언어 Objective-J, ...
  14. 14. Bootstrap 이미지 출처: http://www.inc.com/laura-smoliar/should-you-bootstrap.html
  15. 15. Bootstrap 개요
  16. 16. Bootstrap 개요•CSS 초기화 기본 스타일•12열 격자 시스템 : 고정 / 유동 레이아웃•반응형 디자인•코딩이 필요없는 UI 컴포넌트•코딩이 필요한 UI 컴포넌트•웹 기반 커스터마이징 도구•Super-powered by Twitter
  17. 17. 부트스트랩 적용하기!DOCTYPE htmlmeta name=”viewport” content=” width=device-width,initial-scale=1.0” /link rel=”stylesheet” href=”bootstrap.css” /link rel=”styleheet” href=”bootstrap-responsive.min.ss” /!--[if lt IE 9]script src=”html5shiv.js”/script![endif]--script src=”jquery.min.js”/scriptscript src=”bootstrap.min.js”/script
  18. 18. CSS Reset 기본 스타일•브라우저의 기본 스타일 차이 최소화 •Nomalize.css by Nicolas Gallagher •http://necolas.github.com/ normalize.css/•(더 나쁘지 않은) 기본 스타일•HTML5 필수: ?DOCTYPE html•IE8 이전 버전: html5shiv 등의 polyfill 필요
  19. 19. 12열 격자 시스템 고정 레이아웃•전체 너비: 940px 고정•.container •.row •.span1 ~ 12 / .offset1 ~ 12•열의 너비 + 간격 •60px + 20px 고정 •@gridColumnWidth, @gridGutterWidth•중첩된 열의 span 합계 = 부모 열의 span
  20. 20. 고정 레이아웃 3 예제 12 9 9 9http://tomato.iolo.kr:3000/bootstrap/layout-fixed.html
  21. 21. 12열 격자 시스템 유동 레이아웃•전체 너비: 724px ~ 1140px 유동•.container-fluid •.row-fluid •.span1 ~ 12 / .offset1 ~ 12•열의 너비 + 간격 •6.382978723% + 2.127659574% 유동 •@fluidGridColumnWidth, @fluidGridGutterWidth•중첩된 열의 span 합계 = 12
  22. 22. 유동 레이아웃 3 예제 12 9 12 4http://tomato.iolo.kr:3000/bootstrap/layout-fluid.html
  23. 23. 반응형 디자인• 폰: .visible-phone, .hidden-phone • 폰(세로): ~ 480px • 폰(가로) ~ 태블릿(세로): ~780px • 열의 너비 + 간격: 유동• 태블릿: .visible-tablet, .hidden-tablet • 태블릿(세로) ~ 태블릿(가로): ~768~980px • 열의 너비 + 간격: 40px + 20px 고정• 데스크탑: .visible-desktop, .hidden-desktop • 태블릿(가로) ~ 데스크탑(기본): 980px~1200px • 열의 너비 + 간격: 60px + 20px 고정 • 고해상도: 1200px~ • 열의 너비 + 간격: 70px + 30px 고정
  24. 24. 반응형 디자인 태블릿 (세로) 데스크탑 고해상도 폰 태블릿(세로) 폰 (가로) (가로) 480 768 980 1200 % % 42+20 60+20 70+30 .visible-phone .visible-tablet .visible-desktop
  25. 25. 반응형 디자인 예제http://tomato.iolo.kr:3000/bootstrap/layout-fixed- responsive.htmlhttp://tomato.iolo.kr:3000/bootstrap/layout-fluid- responsive.html
  26. 26. 반응형 디자인 - 데모 출처: http://www.gotfocussolutions.com/
  27. 27. 기본 스타일• (거의 모든) 태그의 기본 스타일 재정의• 특정 태그용 CSS 클래스 • .table, .form, .btn, .dl-horizontal, .unstyled, ...• 태그와 무관한 CSS 클래스: • .info, .success, .warn, .error, .muted, ... • .disabled, .active, ...• 유틸리티 CSS 클래스 • .text-left, .text-center, .text-right • .pull-left, .pull-right, .clearfix, ...• 태그의 구성과 CSS 클래스의 조합: UI 컴포넌트
  28. 28. 기본 스타일 예제http://tomato.iolo.kr:3000/bootstrap/base-table.htmlhttp://tomato.iolo.kr:3000/bootstrap/base-form.htmlhttp://tomato.iolo.kr:3000/bootstrap/base-misc.html
  29. 29. 기본 스타일 - Glyphicons•Powered by•i class=icon-glass/i•i class=icon-glass icon-white/i
  30. 30. Glyphicons Font-Awesom 예제http://tomato.iolo.kr:3000/bootstrap/base-icon.html
  31. 31. 코딩이 필요없는 UI 컴포넌트•Dropdowns •Label Badges•Button Groups •Typhography•Button Dropdowns •Thumbnails•Navs •Alerts•Navbar •Progress bars•Breadcrumbs •Media object•Pagination •...
  32. 32. 코딩이 필요한 UI 컴포넌트•Transition •Alert•Modal •Button•Dropdown •Collapse•Scrollspy •Carousel•Tab •Typeahead•Tooltip •Affix•Popover •...
  33. 33. UI 컴포넌트 예제 http://tomato.iolo.kr:3000/bootstrap/comp- dropdowns.htmlhttp://tomato.iolo.kr:3000/bootstrap/comp-navs.htmlhttp://tomato.iolo.kr:3000/bootstrap/comp-alert.html http://twitter.github.com/bootstrap/components.html http://twitter.github.com/bootstrap/javascript.html
  34. 34. 커스터마이징• 웹 기반 커스터마이징 도구 • http://twitter.github.com/bootstrap/customize.html • 사용할 컴포넌트 jQuery 플러그인 선택 • 글꼴, 색, 메트릭 설정 • 최적화된 빌드 다운로드• 더 복잡한 커스터마이징을 하려면: • 소스 코드: https://github.com/twitter/bootstrap • LESS: http://lesscss.org • jQuery jQuery UI
  35. 35. 커스텀 테마 데모 http://bootswatch.com/https://wrapbootstrap.com
  36. 36. 추천 사이트• 한글 번역: http://webdesigncss3.com/bootstrap/• 적용 사례: http://builtwithbootstrap.com• 테마(무료): http://bootswatch.com• 테마(유료): https://wrapbootstrap.com• 테마(유료): http://themeforest.net/search?term=bootstrap• 테마(유료): http://www.templatemonster.com/properties/features/bootstrap- templates/• 테마 제작 도구: http://stylebootstrap.info• 실용 예제 및 폼 제작 도구: http://bootsnipp.com• jQuery UI 컴포넌트: http://addyosmani.github.com/jquery-ui-bootstrap/• AngularJS 지원: http://angular-ui.github.com• 아이콘 웹폰트: http://fortawesome.github.com/Font-Awesome/• CDN: http://www.bootstrapcdn.com/
  37. 37. 부트스트랩의 대체품들•Foundation: http://foundation.zurb.com•Skeleton: http://www.getskeleton.com•HTML KickStart: http://www.99lime.com•HTML5 Boilerplate: http://html5boilerplate.com•Initializr: http://www.initializr.com•Blueprint: http://blueprintcss.org•참고: http://www.smashingapps.com/ 2012/12/26/16-useful-responsive-css- frameworks-and-boilerplates.html
  38. 38. Twitter Bootstrap 요약• 예쁘다!• 쉽다!• 유연하다!• 남들도 많이 쓴다!!!• Super-Powered by Twitter• Super-Powered by Designer / Developer Communities
  39. 39. Backbone.js 이미지 출처: http://www.rareresource.com/Blogs/labels/Dinosaur%20unit.html
  40. 40. Backbone.js 개요
  41. 41. Backbone.js 개요•Events•Model Collection•View•Router•History•Underscore.js
  42. 42. Backbone.Events• on(event, callback, context) == bind• off(event, callback, context) == unbind• once(event, callback, context)• trigger(event, args...)• listenTo(target, event, callback) == target.on(event, callback, this)• stopListening(target, event, callback) == target.off(event, callback, this)
  43. 43. Backbone.js 이벤트• 공통 • Collection • all • add(model, collection,• Model options) • change(model, options) • remove(model, • change:attribute(model, collection, options) value, options) • reset(collection, • invalid(model, error, options) options) • sort(collection, options) • sync(model, response, • destroy(model, options) collection, options) • request(model, xhr, • Router options) • route:name(params) • error(model, xhr, • route(router, route, options) params)
  44. 44. Backbone.Model•엔티티 모델 + DAO•엔티티 속성은 해시 객체•모델 변경에 따른 이벤트 발생•저장소와 동기화 with Backbone.sync•기본 동기화 방식은 RESTful HTTP(with jQuery.ajax)
  45. 45. Backbone.Model API•extend •cid •url•constructor / •attributes •urlRoot initialize •changed •parse•get •defaults •clone•set •toJSON •isNew•escape •sync •hasChanged•has •fetch •changed•unset •save Attributes•clear •destroy • previous•id •validate •previous•idAttribute •validationError Attributes
  46. 46. Backbone.Model 예제var Item = Backbone.Model.extend({ urlRoot: /todos});var item = new Item({ title: Backbone 예제 만들기});// HTTP POST 요청 -- sync 이벤트 발생item.save();// cf. 동기 처리item.save(null, {wait:true});// cf. 콜백 처리item.save(null, { success: function (model) { }, error: function (model) { ... }});
  47. 47. Backbone.Model 예제var item = new Item({ id: 1 });// HTTP GET 요청 -- sync 이벤트 발생item.fetch();// change change:title 이벤트 발생item.set({title:Backbone 발표자료/예제 만들기});// HTTP PUT 요청 -- sync 이벤트 발생item.save();// HTTP DELETE 요청 -- sync 이벤트 발생item.destroy();// cf. 이벤트 처리item.on(change, function(model) { ... });item.on(sync, function (model) { ... });
  48. 48. Backbone.Collection•Model의 집합 + DAO•목록 변경에 따른 이벤트 발생•풍부한 순회 함수 with Underscore.js•저장소와 동기화 with Backbone.sync•기본 동기화 방식은 RESTful HTTP(with jQuery.ajax)
  49. 49. Backbone.Collection API•extend •update •sort•model •get •pluck•constructor / •at •where initialize •push •url•models •pop •parse•toJSON •unshift •clone•sync •shift •fetch•add •slice •create•remove •length •28 Underscore•reset •comparator Methods...
  50. 50. Backbone.Collection 예제var Items = Backbone.Collection.extend({ model: Item, url: /todos});var items = new Items();// HTTP 요청없이 초기화 -- reset 이벤트 발생// 서버 사이드 템플릿에서 사용:// ex. items.reset(%= @items.to_json %);items.reset([ {id:123, title: first}, {id:456, title: second}, {id:789, title: third}]);// HTTP GET 요청 -- reset 이벤트 발생items.fetch();var item = items.get(123); // by idvar item = items.at(9); // by index
  51. 51. Backbone.Collection 예제// HTTP POST 요청 -- add 이벤트 발생var item = items.create({title: Bootstrap 예제 만들기});// HTTP POST 요청 -- add 이벤트 발생items.add({title: AngulaJS 예제 만들기});// HTTP POST, PUT, DELETE 요청// -- add, remove, change등의 해당하는 이벤트 발생items.update(item);items.update([ item1, model2, model3 ]);// HTT DELETE 요청 -- remove 이벤트 발생items.remove(item); // by modelitems.remove(123); // by iditems.remove([123, 456, 789]); // by iditems.remove([item1, item2, item3]); // by model
  52. 52. Backbone.View•Presenter in MVP•모델 / 컬렉션 조작 이벤트 처리•DOM 조작 이벤트 처리•템플릿 처리(선택 사항)•완전 수동! MANUAL!!
  53. 53. Backbone.View API• extend• constructor / initialize• el• $el• setElement• attributes• render• remove• delegateEvents• undelegateEvents•$
  54. 54. Backbone.View 예제var ItemView = Backbone.View.extend({ tagName: li, events: { click button.update: doUpdate, click button.delete: destroy, }, initialize: function () { this.listenTo(this.model, change, this.render); }, render: function () { this.$el.html(this.model.get(title)); return this; }, doUpdate: function (event) { this.model.set({title: this.$(input.title).val()}); }});
  55. 55. Backbone.View 예제var ListView = Backbone.View.extend({ el: $(#items), initialize: function () { this.listenTo(this.items, reset, this.render); this.items.fetch(); }, render: function () { this.items.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({model:item}); this.$el.append(itemView.render().el); }});new ListView({items: new Items()});
  56. 56. Template• 기본 템플릿 엔진: Underscore.js 템플릿 • ejs와 유사한 초경량 템플릿 엔진 • 컴파일된탬플릿함수 = _.template(템플릿소스문자열) • 템플릿처리된문자열 = 컴파일된탬플릿함수(뷰모델) • %= unescaped % • %- escaped % • % script % • 참고: http://underscorejs.org/#template• 권장 템플릿 엔진 • Mustache: http://mustache.github.com • HAML-JS: https://github.com/creationix/haml-js • Eco(Embedded CoffeeScript): https://github.com/sstephenson/eco
  57. 57. Template 예제script type=text/template id=item-template li input type=text class=title value=%= title % button class=saveSave/button button class=deleteDelete/button /li/scriptvar ItemView = Backbone.View.extend({ ... template: _.template($(#item-template), //템플릿 초기화(컴파일) render: function () { var s = this.template(this.model.toJSON()); //템플릿 처리(렌더링) this.$el.html(s); return this; } ...});
  58. 58. Backbone.Router API•extend•routes•constructor / initialize•route•navigate
  59. 59. Backbone.history API•Backbone.history.start([options]) •options •hashChange: location.hash / onhashchange 이벤트 사용(기본값: true) •pushState: HTML5 history.pushState / popState 사용(기본값: false) •root: 웹앱의 기본 URL(기본값: /) •slient: 최초 시작시 기본 라우팅 안함(기본값: false)
  60. 60. Backbone.Router History 예제var AppRouter = Backbone.Router.extend({ routes: { : loadItems /add: addItem, /show/:id: showItem, /edit/:id: editItem }, loadItems: function () { ... }, addItem: function () { ... }, showItem: function (id) { ... }, editItem: function (id) { ... }});var appRouter = new AppRouter();Backbone.history.start();appRouter.navigate(/add, true);
  61. 61. Backbone.sync() API• Backbone.sync(method, model, [options]) • method • create: POST /collection • read: GET /collection[/id] • update: PUT /collection/id • delete: DELETE /collection/id • options • success, error 콜백을 포함한 jQuery.ajax의 모든 요청 options • 요청 시작시 request, 요청 성공시 sync : 요청 실패시 error 이벤트 발생• 저장소 플러그인 • 브라우저 로컬 스토리지: https://github.com/jeromegn/ Backbone.localStorage • CouchDB: https://github.com/pyronicide/backbone.couchdb.js • Socket.io: https://github.com/logicalparadox/backbone.iobind • ...
  62. 62. Backbone.js MVC(?) 시작 모델 변경 Model / 저장소 Collection 이벤트 처리 저장소와 동기화Router View UI 갱신 UI 선택 DOM 템플릿 사용자 입력 이벤트 처리
  63. 63. 기타• Backbone.emulateHTTP = true • PUT / DELETE 요청 메소드 대신, POST 요청 메소드 X- HTTP-Method-Override 요청 헤더 _method 쿼리 파라메 터 사용• Backbone.emulateJSON = true • application/json 요청 컨텐츠 타입 대신, application/x- www-form-urlencoded 사용.• Backbone.noConflict• Backbone.ajax == jQuery.ajax• Backbone.$ == jQuery
  64. 64. 추천 사이트• Backbone의 Backbone, Underscore.js: http://underscorejs.org• 튜토리얼 모음: http://backbonetutorials.com• 웹 스토리지 저장소 플러그인: https://github.com/jeromegn/ Backbone.localStorage• 관계형 모델 지원 플러그인: http://backbonerelational.org• 페이지 지원 콜렉션 플러그인 https://github.com/wyuenho/backbone-pageable• 폼 생성 / 바인딩 플러그인: https://github.com/powmedia/backbone-forms• Mustache 템플릿 엔진: http://mustache.github.com• Bootstrap 기반 그리드 컴포넌트: http://direct-fuel-injection.github.com/ bbGrid/• Backbone.js 기반 프로젝트 시드: https://github.com/tbranyen/backbone- boilerplate• Backbone.js 기반 Full-Featured MVC 프레임웍: http://chaplinjs.org
  65. 65. Backbone.js 요약•MVC, MVP, MVVM•작다!•가볍다!•해주는 게 없다!! 손발이 고생~•그래서, 어디에 끼워 넣어도 어울린다!!!•Powered by DocumentCloud•Super-Powered by Developer Communities
  66. 66. AngularJS이미지 출처: http://www.wallpaper-for-desktop.net/wallpapers/modern-cubism-wallpaper-gallery-desktop-265751.html
  67. 67. AngularJS 개요
  68. 68. AngularJS 개요•Module Dependency Injection•Scope•Model Data Binding•VIew•Controller•Expression Directives Filters•Super-Powered by Google
  69. 69. AngularJS 적용하기 자동 초기화!DOCTYPE htmlhtml ng-app...body ... script src=angular.js/script/body/html
  70. 70. AngularJS 적용하기 수동 초기화!DOCTYPE htmlhtml...body ... script src=angular.js/script script angular.element(document).ready(function () { angular.bootstrap(document); }); /script/body/html
  71. 71. AngularJS 웹앱 디렉토리 구조(권장)• AngularJS Seed 프로젝트: https://github.com/angular/angular-seed• app/ -- 웹을 통해 서비스되는 파일들 • css/ -- CSS 파일들 • img/ -- 이미지 파일들 • js/ -- 자바스크립트 파일들 • app.js -- 웹앱 메인 모듈 • controllers.js -- 컨트롤러 모듈 • directives.js -- 지시자 모듈 • filters.js -- 필터 모듈 • services.js -- 기타 서비스 모듈 • lib/ -- 써드파티 라이브러리 파일들 • angular/ -- AngulaJS 라이브러리 파일들 • partials/ -- View 템플릿 파일들 • index.html -- 레이아웃 템플릿 파일• ... -- 테스트 라이브러리, 설정 파일, 스크립트 등
  72. 72. 모듈• 모듈(module)은 컨트롤러(controller), 서비스(service), 지시 자(directive), 필터(filter) 등의 컨테이너/패키지/빌더팩토리• HTML 페이지는 하나의 모듈(앱 모듈)과 결함 • ng-app 지시자, angular.bootstrap() API, 의존성 주입• 웹앱의 모듈 구성(권장) • 서비스 모듈 • 지시자 모듈 • 필터 모듈 • 앱 모듈: 초기화 코드 등
  73. 73. 모듈 API• angular.module(name, requires[, configFn]) • .config(configFn) • .run(initializerFn)) • .constant(name, obj) • .value(name, value) • .controller(name, constructor) • .service(name, constructor) • .directive(name, directoryFactory) • .filter(name, filterFactory) • .factory(name, providerFn) • .provider(name, providerType)• config(), run()을 제외한 함수는 다른 제공자 API를 호출하는 편의 함수
  74. 74. 모듈 예제angular.module(services,[ controllers ])// 모듈 설정 -- 제공자만 주입 가능.config([$routeProvider, function ($routeProvider) { $routeProvider.when(/items, { templateUrl: partials/items.html, controller: itemListCtrl }); ...}])// 모듈 초기화.run([$rootScope, function ($rootScope) { $rootScope.on(error, function (err) { ... }); ...}]);// 서비스 정의.factory(apiService, [ $http, function ($http) { return { loadItems: function(callback) { ... callback(items); }, saveItem: function(item) { ... }, deleteItem: function(item) { ... }, };}]);
  75. 75. 의존성 주입• Dependency Injection(DI)는 코드 간의 의존성을 해결하기 위 한 소프트웨어 디자인 패턴 • http://en.wikipedia.org/wiki/Dependency_injection • http://martinfowler.com/articles/injection.html• angular.injector API • annotate(injectingFunc) • get(name) • instantiate(constructorFunc, locals) • invoke(func, self, locals)
  76. 76. 의존성 주입 예제// 의존성 자동 주입angular.module(app, [ services ]).run([ $rootScope, apiService, function (root, api) { api.loadItems(function (items) { root.items = items; }); }]);// 의존성 수동 해결(!)var injector = angular.injector([services, ng]);var $rootScope = injector.get($rootScope); // from ng 모듈var apiService = injector.get(apiService); // from services 모듈apiService.loadItems(function (items) { $rootScope.items = items;});
  77. 77. Scope• 모델 or 모델의 컨테이너• 표현식(expression)의 실행 문맥(execution context)• 계층 구조 • 자식 Scope는 부모 Scope의 속성을 상속(mixin) • 컨트롤러와 일부 지시자들은 자식 Scope를 생성 • 최상위 Scope: $rootScope • Scope 이벤트는 상위 Scope로 전파: $emit() • Scope 이벤트는 하위 Scope로 전파: $broadcast()• Scope는 DOM 노드와 결합: angular.element(aDomElement).scope()• 모델 변화를 감시: $watch()• AngularJS 외부에서 발생한 모델 변화를 내부에 전달: $apply()
  78. 78. Scope API•$apply(expr) •$evalAsync(expr)•$broadcast(name, •$new(isolate) args...) •$on(name, listener)•$destroy() •$watch(expr, listener,•$digest() equality)•$emit(name, args...) •$id 속성•$eval(expr) •$destroy 이벤트
  79. 79. Scope 예제angular.module(app, [ ]).config([$httpProvider, function ($httpProvider) { $httpProvider.responseInterceptors.push([$q, $rootScope, function ($q, $rootScope) { $rootScope.pendingHttpRequests = 0; return function (promise) { $rootScope.pendingHttpRequests += 1; return promise.then(function (res) { $rootScope.pendingHttpRequests -= 1; return res; }).fail(function (res) { $rootScope.pendingHttpRequests -= 1; $rootScope.$broadcast(httpError, res.data); return $q.reject(res); }); }; }]);}]);
  80. 80. Scope 예제// 다른 모듈에서 $rootScope에서 발생한 이벤트 감시angular.module(errorLogger, []).run([$rootScope, function ($rootScope) { $rootScope.on(httpError, function(event, error) { console.error(http error: , error); });}]);// 다른 모듈에서 상위 Scope($rootScope)에서 상속한 속성 감시angular.module(controllers, []).controller(itemEditCtrl,[$rootScope, $scope, function ($rootScope, $scope) { $rootScope.$watch(pendingHttpRequests, function(old, new)) { $scope.submitDisabled = (new 3); });}]);// 뷰 템플릿에서 상위 Scope($rootScope)에서 상속한 속성 참조div ng-show=pendingHttpRequestsloading.../div
  81. 81. 컨트롤러• 컨트롤러는 하나의 Scope와 결합 • ng-controller 지시자, $route 서비스 또는 scope.$new() API• 컨트롤러의 역할 • Scope 초기화 • Scope에 행위(behavior; 이벤트 핸들러) 추가• 컨트롤러에서 하면 안되는 것들(권장) • DOM 조작 -- 지시자 사용 • 입력 포매팅 -- Form Control 지시자 사용 • 출력 필터링 -- 필터 사용 • 다른 컨트롤러 접근 -- 서비스 사용 • 다른 컴포넌트의 생성 및 라이프 사이클 관리
  82. 82. 컨트롤러 예제// 쉬운 방법// -- 파라메터의 이름을 통해서 의존성 자동 주입function ItemListCtrl($scope, $location, apiService) { apiService.loadItems(function (items) { $scope.items = items; }); $scope.editItem = function (item) { $location.path(/items/ + item.id + /edit); }; $scope.deleteItem = function (item) { apiService.deleteItem(item); };}// 어노테이션을 이용한 명시적 의존성 주입// -- 자바스크립트 난잡화(UglyfyJS같은) 적용할 경우에는 필수ItemListCtrl.$inject = [$scope, $location, apiService];
  83. 83. 컨트롤러 예제// 좀 더 복잡하지만 뽀대나는 방법angular.module(controllers, [ ]).controller(itemListCtrl, [ $scope, $location, apiService, function($scope, $location, apiService) { apiService.loadItems(function (items) { $scope.items = items; }); $scope.editItem = function (item) { $location.path(/items/ + item.id + /edit); }; $scope.deleteItem = function (item) { apiService.deleteItem(item); }; }]);
  84. 84. 뷰 템플릿• 결합된 Scope 및 상위 Scope들의 속성을 포함한 자바스크립트와 유사한 표현식 • {{ 표현식 }} • 예) {{ title }}, {{ item.length }}, {{ 1 + 2 }}, {{ HelloWorld.substring(5) }}• 필터 • {{ 속성 | 필터 }} • 예: {{ title | uppercase }} • {{ 속성 | 필터:옵션 }} • 예: {{ created | date:yyyy-MM-dd HH:mm:ss Z }} • {{ 속성 | 필터1 | 필터2 | 필터3 }} • 예: li ng-repeat=item in items | filter:searchText | orderBy:created
  85. 85. 뷰 템플릿• 지시자 • 속성 형식 • ng-지시자, ng:지시자, ng_지시자, data-ng-지시자, x-ng-지시자 • 예: input ng-model=title/ input ng_model=title/ input ng:model=title/ input data-ng-model=title/ input x-ng- model=title/ • 클래스 속성 형식 • class=ng-지시자, class=ng-지시자:옵션 • 예: input class=ng-model:title / • 태그 형식: IE8 이전 버전에서는 htmlshiv등의 polyfill이 필요 • 예: ng-view.../ng-view
  86. 86. 뷰 템플릿 예제html ng-app=app...body ng-controller=mainCtrl header div ng-include=common-header.html/div div ng-show=currentUser pWelcome, {{currentUser.userame}}!/p button ng-click=logout()Logout/login /div div ng-hide=currentUser ng-controller=loginCtrl input type=text ng-model=username / input type=password ng-model=password / button ng-click=login()Login/login a href=#/signupSign Up!/a /div /header...
  87. 87. 뷰 템플릿 예제 div ng-controller=itemListCtrl pTherere {{items.length}} items/p ul li ng-repeat=item in items p{{title}}/p pposted at {{created | date:medium}}/p a href=#/item/{{id}}/editEdit/a button ng-click=delete(item)Delete/button /li /ul /div div ng-controller=itemAddCtrl form ng-submit=addItem() input type=text ng-model=newItem.title / button type=submitAdd/button /form /div...
  88. 88. AngularJS의 MVC $rootScope ItemListCtrl Scope ng-repeat Scope items id delete() titlehtml ng-app function ItemListCtrl($scope) { $scope.items = [div ng-controller=ItemListCtrl {id:1, title:first},ul {id:2, title:second},li ng-repeat=item in items {id:3, title:third} {{item.title}} ]; button ng-click=delete(item) Delete/button $scope.delete=function(item) { delete $scope.items[item.id];/li };/ul }/div
  89. 89. 라우팅• 앱 모듈의 설정 단계에서, $routeProvider의 API를 통해 설정• $routeProvider.when(path, route) • path: 라우팅 경로. URL 해시(#) • 경로 내에 :name 형식의 파라메터가 포함되면 $routeParams 서비스를 통해 전달. • route: 라우팅 설정 • templateUrl: 템플릿 경로. ng-view 지시자가 사용. • template: 템플릿 문자열. • controller: 컨트롤러(서비스 ID 또는 생성자). $route, $routeParams 서비스를 주입할 수 있음. • redirectTo: 리디텍트 경로(또는 경로를 리턴하는 함수)• $routeProvider.otherwise(path): 기본 라우팅 경로
  90. 90. 라우팅 예제angular.module(app, [ controllers ]).config($routeProvider, function(routes) { routes .when(/items/new, {templateUrl:form.html, controller:formCtrl}) .when(/items, {templateUrl:list.html, controller: listCtrl}) .when(/items/:id/edit, {templateUrl:form.html, controller: formCtrl}) .when(/items/:id, { templateUrl: show.html, controller: showCtrl}) .otherwise(/items);});angular.module(controllers, []).controller(itemFormCtrl,[$scope, $routeParams, $http, function(scope, params, http) { if (params.id) { http.get(/api/items/ + params.id).then(function (res) { scope.item = res.data; scope.title = Edit Item; }); } else { scope.title = New Item; scope.item = { title: Untitled }; }}]);
  91. 91. 기본 지시자• ng-app • ng-hide • ng-repeat• ng-bind • ng-href • ng-selected• ng-bind-html- • ng-include • ng-show unsafe • ng-init • ng-src• ng-bind-template • ng-list • ng-style• ng-change • ng-model • ng-submit• ng-checked • ng-mousedown • ng-switch• ng-class • ng-mouseenteer • ng-transclude• ng-class-even • ng-mouseleave • ng-view• ng-class-odd • ng-mousemove • a• ng-click • ng-mouseover • form• ng-cloak • ng-mouseup • input• ng-controller • ng-multiple • script• ng-csp • ng-non-bindable • select• ng-dblclick • ng-pluralize • textarea• ng-form • ng-readonly
  92. 92. 커스텀 지시자 예제// my-rating 지시자 정의angular.module(directives, []).directive(my-rating, function() { return function(scope, element, attrs) { var tags = ; var n = (isNaN(attrs.myRating) ? 0 : parseFloat(attrs.myRating); for (var i = 0; i 5; i++) { var suffix = ((i n) ? full : empty); tags += img src=star- + suffix + .png /; } element.html(tags); };});// 앱 모듈에서 directives 모듈 로딩angular.module(app, [ directives ])...// my-rating 지시자 사용span my-rating={{rating}}/span
  93. 93. 기본 필터• currency• date• filter• json• limitTo• lowercase• number• orderBy• uppercase
  94. 94. 커스텀 필터 예제// truncatechars 필터 정의angular.module(filters, []).filter(truncatechars, function() { return function(text, maxlen) { return (text.length - 3 maxlen) ? text : text.substring(0, maxlen-3) + ...; };});// 앱 모듈에서 filters 모듈 로딩angular.module(app, [ filters ])...// 템플릿 표현식에 truncatechars 필터 사용span{{ helloworld | truncatechars:5 }}/span
  95. 95. 기본 서비스• $anchorScroll • $httpBackend • $rootScope / $rootScopeProvid• $cacheFactory • $interpolate / er $interpolateProvid• $compile / er • $route / $compileProvider $routeProvider• $controller / • $locale $controllerProvider • $location / • $routeParams $locationProvider • $templateCache• $document kriskowals $exceptionHandler • • $timeout $log• Q• $filter / • $parse • $window $filterProvider • $q• $http • $rootElement
  96. 96. 전역 API• bind • injector jQuery • isUndefined• bootstrap • isArray (Lite) • lowercase• copy • isDate • mock• element • isDefined • module• equals • isElement • noop• extend • isFunction • toJson• forEach • isNumber • uppercase• fromJson • isObject • version• identity • isString
  97. 97. 추천 사이트• 모듈(Directive, Filter, 서비스 등) 모음: http://ngmodules.org• 예제 JSFiddle 모음: https://github.com/angular/angular.js/ wiki/JsFiddle-Examples• Bootstrap 지원: http://angular-ui.github.com• Testacular 자바스크립트 테스트 프레임웍: http:// testacular.github.com/• AngularJS Tips and Tricks: http://deansofer.com/posts/ view/14/AngularJs-Tips-and-Tricks-UPDATED• AngularJS 페이스북 그룹(한국): http://angularjs.co.kr http:// www.facebook.com/groups/Korea.AngularJS.User.Group/• ...
  98. 98. AngularJS 요약• DI?! 먹는 거임?• 복잡하다!• 어렵다!• 아무데나 끼워넣기 어렵다!!• 아무거나 끼워넣기 좋다!!• 프론트엔드 개발자를 위한 스프링?!• Super-Powered by Google• Mysterious Powered by 뽀대-Driven-Development
  99. 99. Demo이미지 출처: http://www.octopuscomms.net/who-are-we/blog/2010/1/25/welcome-to-blogtopus.aspx
  100. 100. Reinvent the wheel! 게시판•Post •has_many :Comment•Comment •belongs_to :Post https://github.com/iolo/blueberryseason
  101. 101. 클래식 웹앱 with Express•Express on Nodejs•Server-side rendering with “jade” template engine.•Nothing Specials! http://tomato.iolo.kr:3000/express
  102. 102. 단일 페이지 웹앱 with Backbone.js•Backbone.js•Client-side rendering with Underscore.js•RESTful API Sever with Express on Node.js http://tomato.iolo.kr:3000/backbone/
  103. 103. 단일 페이지 웹앱 with AngularJS•AngularJS + Twitter Bootstrap•Client-side rendering with AngularJS•RESTful API Sever with Express on Node.js http://tomato.iolo.kr:3000/angular/
  104. 104. Epilogue 이미지 출처: http://barry-overstreet.com/you-are-your-future/
  105. 105. 프론트엔드 웹앱 이슈(1) 검색 엔진 최적화(SEO)• Seach Engine Cloaking • IP 주소나 User-Agent에 따라 봇을 위한 별도의 페이지 제공 • http://en.wikipedia.org/wiki/Cloaking • http://support.google.com/webmasters/bin/ answer.py?hl=enanswer=66355• AJAX Crawling - Hashbang(#!) • https://developers.google.com/webmasters/ajax- crawling/ • #!key=value -- ?_escaped_fragment_=key=value
  106. 106. 프론트엔드 웹앱 이슈(2) 접근성(Accessibility)•동적으로 바뀌는 DOM 노드는 스크린 리더에게 넘사벽? •Accessible Rich Internet Application(ARIA) •http://en.wikipedia.org/wiki/WAI-ARIA•최신 HTML5, CSS3가 지원되지 않는 브라우져? 자바스크 립트가 지원되지 않는 브라우져? •Progressive Enhancement: http:// en.wikipedia.org/wiki/Progressive_enhancement •Unobtrusive Javascript: http://en.wikipedia.org/ wiki/Unobtrusive_JavaScript
  107. 107. 프론트엔드 웹앱 이슈(3) 히스토리•이전 / 다음 버튼 북마크•화면의 각 단계마다 고유한 URL 해시(#) 부여 •window.location.hash 속성 •window.onhashchange 이벤트•HTML5 브라우저 히스토리 API •window.history.pushState()/popState() •window.onpopstate 이벤트
  108. 108. 프론트엔드 웹앱 주요 프레임웍 비교 프레임웍 모듈-뷰 바인딩 UI 컴포넌트 HTML/CSS 친화도 확장성 Backbone.js X X O O SprouteCore O O X X Sammy.js X X O O Spine.js X X O O Cappuccino O O X X Knockout.js O X O O JavascriptMVC X O O OGoogle Web Tookit X O X X Google Closure X O X X Ember.js O O O O AngularJS O X O O Batman.js O X O O 출처: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
  109. 109. May the Source be with you...
  110. 110. Questions?
  111. 111. Thats all Folks!

×