Angularjs in mobile app
20 likes3,308 views
This document discusses using AngularJS to build mobile web apps. It covers why AngularJS was chosen, including that it is developed by Google, open source, and supports single page applications with two-way data binding, templates and directives, dependency injection, and routing. It also discusses how AngularJS is suitable for mobile by allowing page changes without server requests, and supporting back/forward navigation. Templates, controllers, filters and directives are explained. Finally, it discusses performance improvements like using local storage to cache data and Gzip compression, as well as the Ionic framework.
![Why we choose angular?
● Developed by Google
● Open Source
● Single Page Applications [SPA]
● Comprehensive
○ Templates and Directives
○ Two-way Data Binding
○ Dependency Injection
○ Routing](https://image.slidesharecdn.com/angularjsinmobileapp-140414034333-phpapp01/85/Angularjs-in-mobile-app-3-320.jpg)
More Related Content
Angularjs in mobile app
- 1. AngularJS in Mobile Web App
- 2. 前期提要 ● phonegap ● AngularJS ○ m-v-whatever 架構 ● 畫面 ○ Font Icon ○ scss/sass ○ css3 - animation
- 3. Why we choose angular? ● Developed by Google ● Open Source ● Single Page Applications [SPA] ● Comprehensive ○ Templates and Directives ○ Two-way Data Binding ○ Dependency Injection ○ Routing
- 4. Single Page Applications In Mobile ● logic architecture build in client ○ 畫面改變不需要透過 server 端 ● 'Application like' 互動 ○ css3 transition, 過場動畫效果 ● Back/Forward work well ○ 採用 bookmark 的方式, url 加上 # ○ 追蹤 (Android back button, call url history) ● can be made Offline
- 8. Templates ● view 是 template 加上 model 跟 controller 結 合後所產生出來的動態畫面 ○ MVC架構 ● Angular element and attributes: ○ Markup ■ 兩個大括號 {{}} ■ angular put model in html ○ Directive ○ Filter
- 11. Async Templates AngularJS loads template asynchronously.
- 12. Template with Filter Format data to display ● date, number, orderby, etc.
- 13. Directives ● reusable DOM ● augments an existing DOM HTML
- 14. Dependency Injection reuse service ● error handler
- 15. mock data replace service easily
- 17. 效能改善 ● local storage ● gzip ● Ionic framework
- 18. local storage ● 第一次 call service 後, 就儲存在 local storage ● 資料更新方法 ○ 每次登入重新更新 ○ user reload ○ 在需要準確資料的時候更新 ■ 基本資訊畫面 ● 成果: ○ 每次在主畫面重新 reload 都要花 8s -> 1s render 畫 面的時間 ○ 重複進入 task 時, 不會花時間去撈資料
- 20. Ionic Framework “Create hybird mobile apps with the web technologies you love” ● minimal DOM manipulation, zero jQuery, and hardware accelerated ● AngularJS ● open source, code pen