angularjs in mobile app
DESCRIPTION
why we choose AngularJS as our mobile web app framework.TRANSCRIPT
AngularJS in Mobile Web App
前期提要
● phonegap● AngularJS
○ m-v-whatever 架構
● 畫面○ Font Icon○ scss/sass○ css3 - animation
Why we choose angular?
● Developed by Google● Open Source● Single Page Applications [SPA]● Comprehensive
○ Templates and Directives○ Two-way Data Binding○ Dependency Injection○ Routing
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
2-way data bindingJS
HTML
Templates
● view 是 template 加上 model 跟 controller 結合後所產生出來的動態畫面 ○ MVC架構
● Angular element and attributes:○ Markup
■ 兩個大括號 {{}} ■ angular put model in html
○ Directive○ Filter
Template with Controller JS
HTML
Async Templates
AngularJS loads template asynchronously.
Template with Filter
Format data to display● date, number, orderby, etc.
Directives
● reusable DOM● augments an existing DOM
HTML
Dependency Injection
reuse service ● error handler
mock data
replace service easily
RoutingHTML
HTML
JS
local storage ● 第一次 call service 後, 就儲存在 local storage ● 資料更新方法
○ 每次登入重新更新○ user reload○ 在需要準確資料的時候更新
■ 基本資訊畫面● 成果:
○ 每次在主畫面重新 reload 都要花 8s -> 1s render 畫面的時間
○ 重複進入 task 時, 不會花時間去撈資料
gzip
Tomcat 設定
Header
compress response size
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
Thank YouAny Question?