Single page application
1 like662 views
The document discusses single page applications (SPAs) and the AngularJS framework. It defines SPAs as web apps that load on a single page to provide a more fluid user experience. It then explains key characteristics of SPAs and benefits like improved performance. The bulk of the document focuses on introducing concepts in AngularJS like controllers, scopes, templates, directives, filters, services and routing. It provides code examples to demonstrate basic usage and building a todo list app with AngularJS.
![Todo List part1
Demo 2
• angular.module('Todo', [])
• angular.module(‘Todo’, []).controller(‘todoController’, …)
• View 與 model 橋樑 : $scope
• 與外部 View 直接存取 : $scope.todos
• $scope.addTodo = function(){ … }](https://image.slidesharecdn.com/single-pageapplication-140903050440-phpapp02/85/Single-page-application-27-320.jpg)
![Routing
Demo 3
• <a href=“#One">
• <div ng-view></div>
• sampleApp.config([‘$routeProvider’, …])
• sampleApp.controller(‘OneController' …)](https://image.slidesharecdn.com/single-pageapplication-140903050440-phpapp02/85/Single-page-application-30-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Single page application (20)
Ad
Recently uploaded (20)
Single page application
- 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
- 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
- 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(){ … }
- 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) { … }
- 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”