O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Angularjs in mobile app

3.177 visualizações

Publicada em

why we choose AngularJS as our mobile web app framework.

Publicada em: Software

Angularjs in mobile app

  1. 1. AngularJS in Mobile Web App
  2. 2. 前期提要 ● phonegap ● AngularJS ○ m-v-whatever 架構 ● 畫面 ○ Font Icon ○ scss/sass ○ css3 - animation
  3. 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. 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
  5. 5. 2-way data binding JS HTML
  6. 6. Templates ● view 是 template 加上 model 跟 controller 結 合後所產生出來的動態畫面 ○ MVC架構 ● Angular element and attributes: ○ Markup ■ 兩個大括號 {{}} ■ angular put model in html ○ Directive ○ Filter
  7. 7. Template with Controller JS HTML
  8. 8. Async Templates AngularJS loads template asynchronously.
  9. 9. Template with Filter Format data to display ● date, number, orderby, etc.
  10. 10. Directives ● reusable DOM ● augments an existing DOM HTML
  11. 11. Dependency Injection reuse service ● error handler
  12. 12. mock data replace service easily
  13. 13. Routing HTML HTML JS
  14. 14. 效能改善 ● local storage ● gzip ● Ionic framework
  15. 15. local storage ● 第一次 call service 後, 就儲存在 local storage ● 資料更新方法 ○ 每次登入重新更新 ○ user reload ○ 在需要準確資料的時候更新 ■ 基本資訊畫面 ● 成果: ○ 每次在主畫面重新 reload 都要花 8s -> 1s render 畫 面的時間 ○ 重複進入 task 時, 不會花時間去撈資料
  16. 16. gzip Tomcat 設定 Header compress response size
  17. 17. 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
  18. 18. Thank You Any Question?

×