Single Page Applications

李濬志 Jeremy Lee @junzhli

“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

Web Apps not Web Sites

• 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)

Web Apps

Characteristics• 如同應⽤用程式操作特性

• URL hash

• 更豐富的互動界⾯面

• 資料動態載⼊入

• 允許離線使⽤用

• 先載⼊入必要檔案即可

• …

具備離線能⼒力的 SPA

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

SPA Benefit• 效能提升

• 更少的資料傳輸

• 更多回應放到 Client 處理

• 分散式載⼊入 (Load distribution)

• 快取 (Cache)

• 跨平台

• 程式碼更易維護

• 響應式網⾴頁設計 (Responsive Web Design)

技術層⾯面• XML, JSON and AJAX

• HTML DOM

• CSS

• JavaScript Frameworks

• HTML5 WebSockets

• HTML5 Web Storage

Client-side Javascript MV* (MVVM, MVC)

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

• Backbone

• Ember

• Angular

Learning curve and documentation

Size

Angular Backbone Ember80k 18k 141k

Size with dependenciesBackbone needs at least Underscore and Zepto

Ember needs jQuery and Handlebars

61K

269K

http://todomvc.com/

• Open-source web application framework

• model–view–controller (MVC) capability

• Two-way Data Binding

Single Page Application with AngularJS

Controller• 負責將 ViewModel 與 View 結合產⽣生 UI

• ⼀一個網⾴頁裡可以有多個 Controller 負責不同元素的 Binding

Scope • 資料繫結的對象

Templete• 在 HTML 中預先定義好的 Angular 特殊元素

• Directive, Markup, Filter, Form controls

Directive• 賦予 Attribute 或 Element 的相關 DOM 元素額外功能

• like ngBind, ngModel, and ngView

• 可⾃自定義 Directive

Filter• 應⽤用於 Directive，對繫結的資料進⾏行後置處理

• {{ expression | filter1 | filter2 | ... }}

• {{ 1234 | number:2 }}

Service• 跨 Controller 的功能邏輯

• 內部服務 (Internal Service)

$resource service

Router• $route service : $routeProvider

• 瀏覽器導覽按鈕解決⽅方案

• Bookmarkable

Hello World !• Angular module 存取範圍宣告 : ng-app

• Markup : {{sometext}}

• ng-bind=“sometext”

• Directive : ng-init, ng-show, ng-hide

• Filter : {{ sometext | uppercase }}

Demo 1

Todo List part1

• angular.module('Todo', [])

• angular.module(‘Todo’, []).controller(‘todoController’, …)

• View 與 model 橋樑 : $scope

• 與外部 View 直接存取 : $scope.todos

• $scope.addTodo = function(){ … }

Demo 2

Two-way data binding

Todo List part2

• $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}"

Demo 2

Routing

• <a href=“#One">

• <div ng-view></div>

• sampleApp.config([‘$routeProvider’, …])

• sampleApp.controller(‘OneController' …)

Demo 3

RoutingDemo 3

Photo Gallery

• angular.module(‘photoApp’).factory('photoSearchService', …)

• var service = {};

• service.findPhotos = function(keyword, callback) { … }

Demo 4

Dependency Injection

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

“Thanks”