Angularjs in mobile app

Angularjs in mobile app

• 1.
  AngularJS in Mobile WebApp
• 2.
  前期提要 ● phonegap ● AngularJS ○m-v-whatever 架構 ● 畫面 ○ Font Icon ○ scss/sass ○ css3 - animation
• 3.
  Why we chooseangular? ● Developed by Google ● Open Source ● Single Page Applications [SPA] ● Comprehensive ○ Templates and Directives ○ Two-way Data Binding ○ Dependency Injection ○ Routing
• 4.
  Single Page ApplicationsIn 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.
  2-way data binding JS HTML
• 8.
  Templates ● view 是template 加上 model 跟 controller 結 合後所產生出來的動態畫面 ○ MVC架構 ● Angular element and attributes: ○ Markup ■ 兩個大括號 {{}} ■ angular put model in html ○ Directive ○ Filter
• 10.
  Template with Controller JS HTML
• 11.
  Async Templates AngularJS loadstemplate asynchronously.
• 12.
  Template with Filter Formatdata 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 serviceeasily
• 16.
  Routing HTML HTML JS
• 17.
  效能改善 ● local storage ●gzip ● Ionic framework
• 18.
  local storage ● 第一次call service 後, 就儲存在 local storage ● 資料更新方法 ○ 每次登入重新更新 ○ user reload ○ 在需要準確資料的時候更新 ■ 基本資訊畫面 ● 成果: ○ 每次在主畫面重新 reload 都要花 8s -> 1s render 畫 面的時間 ○ 重複進入 task 時, 不會花時間去撈資料
• 19.
  gzip Tomcat 設定 Header compress response size
• 20.
  Ionic Framework “Create hybirdmobile apps with the web technologies you love” ● minimal DOM manipulation, zero jQuery, and hardware accelerated ● AngularJS ● open source, code pen
• 21.
  Thank You Any Question?