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 ● gzip● Ionic framework

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?