2014 Weco 宅學營 Single Page Application Angular Javascript Framework Fu Jen University

1. Single Page
Applications
李濬志 Jeremy Lee
@junzhli

2. “A Single Page Application is a web app that fits on a single
page with a goal of providing a more fluid user experience”
from wikipedia

3. Web Apps not Web Sites

4. Web Apps
• Like desktop applications (Word, Photoshop, Skype)
• Dynamic and ever-changing
• Rely on you to interact with them
• Contributing content. (Facebook, Youtube, Twitter)
• Gathering data from other sources and presenting it to you
• Always use databases (PHP, Ruby, Python, framework Rails)

6. Characteristics
• 如同應⽤用程式操作特性
• URL hash
• 更豐富的互動界⾯面
• 資料動態載⼊入
• 允許離線使⽤用
• 先載⼊入必要檔案即可
• …

7. 具備離線能⼒力的 SPA

8. 同時具備離線與線上同步能⼒力的 SPA

9. SPA Benefit
• 效能提升
• 更少的資料傳輸
• 更多回應放到 Client 處理
• 分散式載⼊入 (Load distribution)
• 快取 (Cache)
• 跨平台
• 程式碼更易維護
• 響應式網⾴頁設計 (Responsive Web Design)

10. 技術層⾯面
• XML, JSON and AJAX
• HTML DOM
• CSS
• JavaScript Frameworks
• HTML5 WebSockets
• HTML5 Web Storage

12. Client-side Javascript MV* (MVVM, MVC)

13. Feature Angular Backbone Ember
Observables V V V
Routing V V V
View bindings V V
Two way bindings V V
Partial views V V
Filtered list views V V

14. Learning curve and documentation
• Backbone
• Ember
• Angular

15. Size
Angular Backbone Ember
80k 18k 141k
Size with dependencies
Backbone needs at least Underscore and Zepto
Ember needs jQuery and Handlebars
61K
269K

16. http://todomvc.com/

17. Single Page Application with AngularJS
• Open-source web application framework
• model–view–controller (MVC) capability
• Two-way Data Binding

19. Controller
• 負責將 ViewModel 與 View 結合產⽣生 UI
• ⼀一個網⾴頁裡可以有多個 Controller 負責不同元素
的 Binding

20. Scope
• 資料繫結的對象

21. Templete
• 在 HTML 中預先定義好的 Angular 特殊元素
• Directive, Markup, Filter, Form controls

22. Directive
• 賦予 Attribute 或 Element 的相關 DOM 元素額外功能
• like ngBind, ngModel, and ngView
• 可⾃自定義 Directive

23. Filter
• 應⽤用於 Directive，對繫結的資料進⾏行後置處理
• {{ expression | filter1 | filter2 | ... }}
• {{ 1234 | number:2 }}

24. Service
• 跨 Controller 的功能邏輯
• 內部服務 (Internal Service)
$resource service

25. Router
• $route service : $routeProvider
• 瀏覽器導覽按鈕解決⽅方案
• Bookmarkable

26. Hello World !
Demo 1
• Angular module 存取範圍宣告 : ng-app
• Markup : {{sometext}}
• ng-bind=“sometext”
• Directive : ng-init, ng-show, ng-hide
• Filter : {{ sometext | uppercase }}

27. Todo List part1
Demo 2
• angular.module('Todo', [])
• angular.module(‘Todo’, []).controller(‘todoController’, …)
• View 與 model 橋樑 : $scope
• 與外部 View 直接存取 : $scope.todos
• $scope.addTodo = function(){ … }

28. Two-way data binding

29. Todo List part2
Demo 2
• $scope.todos.push({'title':$scope.newTodo, ‘done':false})
• ng-controller=“todoController”
• ng-repeat="todo in todos”
• ng-disabled=“doWhat.$invaild"
• ng-submit=“addTodo()"
• ng-class=“{'done':todo.done}"

30. Routing
Demo 3
• <a href=“#One">
• <div ng-view></div>
• sampleApp.config([‘$routeProvider’, …])
• sampleApp.controller(‘OneController' …)

31. Routing
Demo 3

32. Photo Gallery
Demo 4
• angular.module(‘photoApp’).factory('photoSearchService', …)
• var service = {};
• service.findPhotos = function(keyword, callback) { … }

33. Dependency Injection

34. Reference
• http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
• http://blog.miniasp.com/post/2013/04/24/Front-end-Engineering-Fineart-An-Introduction-to-AngularJS.aspx
• http://www.dotnet-tricks.com/Tutorial/designpatterns/2FMM060314-Understanding-MVC,-MVP-and-MVVM-Design-
Patterns.html
• http://blogs.bluepi.in/2014/08/04/why-single-page-application/
• http://www.adobe.com/devnet/html5/articles/getting-started-with-angularjs.html
• http://plexusweb.com/2013/04/web-site-vs-web-application-whats-the-difference/
• http://en.wikipedia.org/wiki/Single-page_application
• http://codepen.io/Russbrown/pen/IgBuh
• http://blog.codeschool.com/post/85819292538/angular-backbone-or-ember-which-is-best-for-your

35. “Thanks”