Tutorial: Develop Mobile Applications with AngularJS
Post on 09-May-2015
2874 Views
Preview:
DESCRIPTION
Transcript
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)
top related