8. Building Blocks
• Plain HTML / CSS
• Customizable like any HTML element
• Cross platform (also iOS,Android)
9. Data binding with AngularJS
• AngularJS is a modern javascript framework
made by Google
• Does proper MVC in the browser
• Amazing data binding: no dealing with DOM
13. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
14. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
15. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
16. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
17. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
18. Controller boilerplate
1. Get reference to our app
2. Say we want to add
controller with name
3. Dependency injection
4. Controller constructor
5. Logic
js/controllers/list.js
19. Add some magic
• Consume $timeout
service
• Tell DI framework
• Use the service
js/controllers/list.js
20. Add some magic
• Consume $timeout
service
• Tell DI framework
• Use the service
js/controllers/list.js
21. Add some magic
• Consume $timeout
service
• Tell DI framework
• Use the service
js/controllers/list.js
33. So what do we have?
• An app with a list / detail view
• Running on a phone
• Data comes from a static list
(js/services/database.js)
34. Third party data
• Data comes from a server
• Example: CNN NewsFlash
• Here’s an API that spits out JSON
http://scrapey2.herokuapp.com/c/jan/
?url=http://api.cnn.com
64. Two types of resources
• Application resources
• HTML / CSS / javascript / assets
• Data
• E.g. List of news items
65. Application assets
• Packaged application
• ZIP app and submit to marketplace
• Pro: super easy
• Con: Hard to update, higher barrier to
try app
66. Application assets
• Hosted application with appcache
• Pro: just a website, updating works like
any site, simple development cycle
• Con: discoverability, user has to load the
app once from internet connection to
cache assets
69. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache
70. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache
71. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache
72. Combine JS / CSS
• Faster (less HTTP requests)
• Appcache is way easier (no manual work)
73. Manifest file
• Specify release version to be used
• Not necessary with built in node.js server
• Change launch_path > index.release.html
manifest.webapp
75. Third party requests
• http.get has idbCache
option
• Specify cache key,
expiration time
• No internet connection?
Always from cache!
js/controllers/list.js
76. Also use to precache
• Load all stories on index
• Way faster navigation
• Offline also available!
• Make sure to also use
the same cache key in
detail.js !
js/controllers/list.js
77. Caching resources
• Browser does caching
• Have to have proper
expiration headers
• No additional work
js/controllers/list.js
