Weitere ähnliche Inhalte Ähnlich wie Single page application (20) Kürzlich hochgeladen (20) Single page application2. “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
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)
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
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
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
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
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
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(){ … }
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' …)
32. Photo Gallery
Demo 4
• angular.module(‘photoApp’).factory('photoSearchService', …)
• var service = {};
• service.findPhotos = function(keyword, callback) { … }
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