tutorial: develop mobile applications with angularjs

Tutorial

Develop Mobile Applications with AngularJS

Philipp BurgmerSoftware Engineer / Consultant / TrainerFocus: Frontend, Web Technologies

WeigleWilczek GmbHburgmer@w11k.com

ABOUT ME

WeigleWilczek / W11kSoftware Design, Development & MaintenanceConsulting, Trainings & Project Kickoff

Web Applications with AngularJSNative Rich Clients with Eclipse RCP

ABOUT US

Developing Mobile ApplicationsNative Look & FeelWeb-Technologies (HTML, JavaScript, CSS)

SetupArchitectureDevelopmentAPIs

WHAT IT'S ALL ABOUT

SETUP

Installed and in Path:Node.JS - node - brew install nodeNode Package Manager - npmGit - git - brew install gitRuby - rubyCompass - compass - [sudo] gem install compass

Optional:Android SDK

developer.android.com/sdk (http://developer.android.com/sdk/index.html) or brew install androidLaunch 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

Apache Cordova - [sudo] npm install -g cordovaIonic - [sudo] npm install -g ionic

Optional:Ripple Emulator - [sudo] npm install -g ripple-emulatoriOS Sim - [sudo] npm install -g ios-sim

ARCHITECTURE

Mobile OS

WebView

Ionic

AngularJSCordova

Application

THE BIG PICTURE

Better Known as PhoneGap (http://phonegap.com/)

Nitobi Adobe ApacheNative Wrapper for Web-AppMixing Native- and Web-CodePlugins for Feature Access

cordova.apache.org (http://cordova.apache.org/)

Current Version: 3.4.1License: Apache 2.0

229 PluginsNative JavaScript

org.apache.cordovaCameraBattery StatusConsoleContactsDevice Information + Motion + OrientationDialogsFile + File Transfer

CORDOVA PLUGINS

Distributioin of CordovaServices like PhoneGap Build

phonegap.com (http://phonegap.com/)

Developed by AdobeLicense: Apache 2.0

HTML enhanced for web apps!angularjs.org

JavaScript-Framework for Rich Browser ApplicationsBrings Core UI Concepts like MVC to BrowserExtends HTML instead of abstract itLets You Extend HTML to Your Needs (Directives)

angularjs.org (https://angularjs.org/)

Current Version: 1.2.16License: MIT

by

Frontend-FrameworkCSS Optimized for Mobile AppAngularJS Directives and Services

Touch SupportNavigationMenus & Dialogs

Cordova Plugin(s)

ionicframework.com (http://ionicframework.com/)

Current Version: 1.0.0-beta.6License: MIT

Similar to IonicFrontend-FrameworkCordova and AngularJS basedDirectives and Services

onsenui.io (http://onsenui.io/)

Current Version 1.0.4License: Apache 2.0

OUR FIRST APP

Create and Navigate to an Empty FolderRun ionic start myFirstApp tabs to Create a New Ionic ApplicationNavigate to Project Folder cd myFirstAppRun 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

PROJECT STRUCTURE

Cordovahooksmergesplatformspluginswwwconfig.xml

Ionicionic.project

Customscssbower.jsonGulpfile.jspackage.json

<?xml version='1.0' encoding='utf-8'?><widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" 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 storage to be sent to iCloud. Note: enabling this could result in Apple rejecting your app. --> <preference name="BackupWebStorage" value="none" />

<feature name="StatusBar"> <param name="ios-package" value="CDVStatusBar" onload="true" /> </feature></widget>

CONFIG.XML

TOOLS

Required to Configure and Build Cordova Project

Run cordova to See All Available CommandsCommands to Configure ProjectCommands to Build Project

CORDOVA CLI

Ionic Consists of Two Things:Framework (also Available via Bower)Command Line Interface (via NPM)

CLI Not Required to Develop Ionic AppDifferent Versioning

Run ionic to See All Available CommandsShortcuts to Cordova CLIcreate and servelogin and upload

IONIC CLI

Node Package, Installed via npm install -g ripple-emulatorEmulates Android Device in BrowserRequires Android as PlatformStart Server and Open Browser: ripple emulate

RIPPLE EMULATOR

AndroidAndroid SDK Requiredcordova platform add android or ionic platform androidcordova emulate android or ionic emulate androidTake a Nap or Drink Some Coffee ...

iOSXcode, iOS Simulator and ios-sim Requiredcordova platform add ios or ionic platform ioscordova emulate ios or ionic emulate ios

PLATFORM SIMULATORS

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 ionicRemove Android Platform via cordovaAdd Android Platform Again via cordova

Run ionic serve , Open App in Browser and Check Console for JS ErrorsRun Ripple Emulator and Check Console for JS ErrorsRun cordova serve , Open App in Browser and Check Console for JS Errors

HANDSON

APIS

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

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

OPTIMISATION

Avoid Overlapping Elements (Popups, Overlays)Try to Keep the DOM Small, Create Multiple Small StatesHTML Tables Are SluggishTransport Really Needed Data OnlyUse CachingMinimize CodeTest Performance on Real and Old Devices

PERFORMANCE HINTS

Subfolders in hooksSomething 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 HooksCan Be Used to Build Frontend (Modify www Content)Pay Attention: No www Folder No Valid Cordova Project!

HOOKS

Helps to Structure CodeDev-Mode with Server, Proxy and LiveReloadSASS 3.2 and LESS 1.5 supportSpec and End-2-End TestMock Data for Tests and Dev-ModeRunning Bower to Install and Update Frontend DependenciesProject- and Per-Developer Configuration as well as Command Line ArgumentsBuilding Distribution with

Annotating AngularJS Dependencies (Transform to Array-Notation)Code MinimizationRunning End-2-End Tests Against Build Application

FABSFABULOUS ANGULARJS BUILD SYSTEM

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-SystemRun npm install in Project FolderCreate before_prepare Hook

Run Grunt Build: grunt clean prepare compileCreate a Symlink (if not exists) from build-output/compiled to wwwor Clean www and Copy Content from build-output/compiled to It

Add Android as PlatformRun cordova prepareTake a Look at platform/android/www to Ensure Minified Version Is Used

HANDSON

Philipp Burgmerburgmer@w11k.com

www.w11k.com (http://www.w11k.com)

www.thecodecampus.de (http://www.thecodecampus.de)