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.

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

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 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

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 hybird mobile 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?