This document provides an overview of developing mobile applications using AngularJS and Cordova. It discusses the setup, architecture, and tools needed including Node.js, Cordova, Ionic and AngularJS. It also covers creating a basic app, the project structure, available APIs, performance optimization techniques, and using hooks and build systems like FABS.

1. Tutorial
Develop Mobile Applications with AngularJS

2. Philipp Burgmer
Software Engineer / Consultant / Trainer
Focus: Frontend, Web Technologies
WeigleWilczek GmbH
burgmer@w11k.com
ABOUT ME

3. WeigleWilczek / W11k
Software Design, Development & Maintenance
Consulting, Trainings & Project Kickoff
Web Applications with AngularJS
Native Rich Clients with Eclipse RCP
ABOUT US

4. Developing Mobile Applications
Native Look & Feel
Web-Technologies (HTML, JavaScript, CSS)
Setup
Architecture
Development
APIs
WHAT IT'S ALL ABOUT

5. SETUP

6. Installed and in Path:
Node.JS - node - brew install node
Node Package Manager - npm
Git - git - brew install git
Ruby - ruby
Compass - compass - [sudo] gem install compass

7. Optional:
Android SDK
developer.android.com/sdk (http://developer.android.com/sdk/index.html) or brew install android
Launch Android SDK Manager ( android or Help (http://developer.android.com/tools/help/sdk-manager.html))
Install Following Packages:
Xcode and iOS 7 Simulator on MacOS

8. Apache Cordova - [sudo] npm install -g cordova
Ionic - [sudo] npm install -g ionic
Optional:
Ripple Emulator - [sudo] npm install -g ripple-emulator
iOS Sim - [sudo] npm install -g ios-sim

9. ARCHITECTURE

10. Mobile OS
WebView
Ionic
AngularJS
Cordova
Application
THE BIG PICTURE

11. Better Known as PhoneGap (http://phonegap.com/)
Nitobi  Adobe  Apache
Native Wrapper for Web-App
Mixing Native- and Web-Code
Plugins for Feature Access
cordova.apache.org (http://cordova.apache.org/)
Current Version: 3.4.1
License: Apache 2.0

12. 229 Plugins
Native  JavaScript
org.apache.cordova
Camera
Battery Status
Console
Contacts
Device Information + Motion + Orientation
Dialogs
File + File Transfer
CORDOVA PLUGINS

13. Distributioin of Cordova
Services like PhoneGap Build
phonegap.com (http://phonegap.com/)
Developed by Adobe
License: Apache 2.0

14. HTML enhanced for web apps!
angularjs.org
JavaScript-Framework for Rich Browser Applications
Brings Core UI Concepts like MVC to Browser
Extends HTML instead of abstract it
Lets You Extend HTML to Your Needs (Directives)
angularjs.org (https://angularjs.org/)
Current Version: 1.2.16
License: MIT
by

15. Frontend-Framework
CSS Optimized for Mobile App
AngularJS Directives and Services
Touch Support
Navigation
Menus & Dialogs
Cordova Plugin(s)
ionicframework.com (http://ionicframework.com/)
Current Version: 1.0.0-beta.6
License: MIT

16. Similar to Ionic
Frontend-Framework
Cordova and AngularJS based
Directives and Services
onsenui.io (http://onsenui.io/)
Current Version 1.0.4
License: Apache 2.0

17. OUR FIRST APP

18. Create and Navigate to an Empty Folder
Run ionic start myFirstApp tabs to Create a New Ionic Application
Navigate to Project Folder cd myFirstApp
Run ionic serve (Ignore Error on Console)
Browser to http://localhost:8100 (http://localhost:8100)
Play around with the App!
Kill Dev-Server in Console with CTRL+C
Do the Same Again with ionic start mySecondApp sidemenu
HANDSON

19. PROJECT STRUCTURE
Cordova
hooks
merges
platforms
plugins
www
config.xml
Ionic
ionic.project
Custom
scss
bower.json
Gulpfile.js
package.json

20. <?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/w
idgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html" />
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable s
torage
to be sent to iCloud. Note: enabling this could result in Apple rejecting yo
ur app.
-->
<preference name="BackupWebStorage" value="none" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
</widget>
CONFIG.XML

21. TOOLS

22. Required to Configure and Build Cordova Project
Run cordova to See All Available Commands
Commands to Configure Project
Commands to Build Project
CORDOVA CLI

23. Ionic Consists of Two Things:
Framework (also Available via Bower)
Command Line Interface (via NPM)
CLI Not Required to Develop Ionic App
Different Versioning
Run ionic to See All Available Commands
Shortcuts to Cordova CLI
create and serve
login and upload
IONIC CLI

24. Node Package, Installed via npm install -g ripple-emulator
Emulates Android Device in Browser
Requires Android as Platform
Start Server and Open Browser: ripple emulate
RIPPLE EMULATOR

25. Android
Android SDK Required
cordova platform add android or ionic platform android
cordova emulate android or ionic emulate android
Take a Nap or Drink Some Coffee ...
iOS
Xcode, iOS Simulator and ios-sim Required
cordova platform add ios or ionic platform ios
cordova emulate ios or ionic emulate ios
PLATFORM SIMULATORS

26. Create a New Cordova Project (not Ionic)
Compare Project Structure to Ionic Project (config.xml)
Delete Cordova Project
Add Android Platform to Ionic Project via ionic
Remove Android Platform via cordova
Add Android Platform Again via cordova
Run ionic serve , Open App in Browser and Check Console for JS Errors
Run Ripple Emulator and Check Console for JS Errors
Run cordova serve , Open App in Browser and Check Console for JS Errors
HANDSON

27. APIS

28. API Documentation: docs.angularjs.org/api (https://docs.angularjs.org/api)
Pay Attention: Documentation for latest Build (Select Box at The Top Left Corner)
Basic Tutorial: docs.angularjs.org/tutorial (https://docs.angularjs.org/tutorial)
Great Tutorial Videos: egghead.io (https://egghead.io/)
ANGULARJS

29. API Doc and Guides at ionicframework.com/docs (http://ionicframework.com/docs/)
Lot of Live Demos and Code Examples
All Directive Starts with Prefix ion (Nice!)
All Services Uses $ionic Prefix (Bad Practice?)
Uses Angular-UI Router
IONIC

30. OPTIMISATION

31. Avoid Overlapping Elements (Popups, Overlays)
Try to Keep the DOM Small, Create Multiple Small States
HTML Tables Are Sluggish
Transport Really Needed Data Only
Use Caching
Minimize Code
Test Performance on Real and Old Devices
PERFORMANCE HINTS

32. Subfolders in hooks
Something Executable (with Hash-Bang)
See README (https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md) for a List Of Available Hooks
Can Be Used to Build Frontend (Modify www Content)
Pay Attention: No www Folder  No Valid Cordova Project!
HOOKS

33. Helps to Structure Code
Dev-Mode with Server, Proxy and LiveReload
SASS 3.2 and LESS 1.5 support
Spec and End-2-End Test
Mock Data for Tests and Dev-Mode
Running Bower to Install and Update Frontend Dependencies
Project- and Per-Developer Configuration as well as Command Line Arguments
Building Distribution with
Annotating AngularJS Dependencies (Transform to Array-Notation)
Code Minimization
Running End-2-End Tests Against Build Application
FABS
FABULOUS ANGULARJS BUILD SYSTEM

34. Clone GitHub Repo pburgmer/et-ka-2014-ionic-tutorial-app (https://github.com/pburgmer/et-ka-2014-ionic-tutorial-app)
to Get an Ionic App with fabs as Build-System
Run npm install in Project Folder
Create before_prepare Hook
Run Grunt Build: grunt clean prepare compile
Create a Symlink (if not exists) from build-output/compiled to www
or Clean www and Copy Content from build-output/compiled to It
Add Android as Platform
Run cordova prepare
Take a Look at platform/android/www to Ensure Minified Version Is Used
HANDSON

35. Philipp Burgmer
burgmer@w11k.com
www.w11k.com (http://www.w11k.com)
www.thecodecampus.de (http://www.thecodecampus.de)