Tutorial
Develop Mobile Applications with AngularJS
Philipp Burgmer
Software Engineer / Consultant / Trainer
Focus: Frontend, Web Technologies
WeigleWilczek GmbH
burgmer@w11k...
WeigleWilczek / W11k
Software Design, Development & Maintenance
Consulting, Trainings & Project Kickoff
Web Applications w...
Developing Mobile Applications
Native Look & Feel
Web-Technologies (HTML, JavaScript, CSS)
Setup
Architecture
Development
...
SETUP
Installed and in Path:
Node.JS - node - brew install node
Node Package Manager - npm
Git - git - brew install git
Ruby - r...
Optional:
Android SDK
developer.android.com/sdk (http://developer.android.com/sdk/index.html) or brew install android
Laun...
Apache Cordova - [sudo] npm install -g cordova
Ionic - [sudo] npm install -g ionic
Optional:
Ripple Emulator - [sudo] npm ...
ARCHITECTURE
Mobile OS
WebView
Ionic
AngularJS
Cordova
Application
THE BIG PICTURE
Better Known as PhoneGap (http://phonegap.com/)
Nitobi  Adobe  Apache
Native Wrapper for Web-App
Mixing Native- and Web-...
229 Plugins
Native  JavaScript
org.apache.cordova
Camera
Battery Status
Console
Contacts
Device Information + Motion + Or...
Distributioin of Cordova
Services like PhoneGap Build
phonegap.com (http://phonegap.com/)
Developed by Adobe
License: Apac...
HTML enhanced for web apps!
angularjs.org
JavaScript-Framework for Rich Browser Applications
Brings Core UI Concepts like ...
Frontend-Framework
CSS Optimized for Mobile App
AngularJS Directives and Services
Touch Support
Navigation
Menus & Dialogs...
Similar to Ionic
Frontend-Framework
Cordova and AngularJS based
Directives and Services
onsenui.io (http://onsenui.io/)
Cu...
OUR FIRST APP
Create and Navigate to an Empty Folder
Run ionic start myFirstApp tabs to Create a New Ionic Application
Navigate to Proje...
PROJECT STRUCTURE
Cordova
hooks
merges
platforms
plugins
www
config.xml
Ionic
ionic.project
Custom
scss
bower.json
Gulpfil...
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns...
TOOLS
Required to Configure and Build Cordova Project
Run cordova to See All Available Commands
Commands to Configure Project
Co...
Ionic Consists of Two Things:
Framework (also Available via Bower)
Command Line Interface (via NPM)
CLI Not Required to De...
Node Package, Installed via npm install -g ripple-emulator
Emulates Android Device in Browser
Requires Android as Platform...
Android
Android SDK Required
cordova platform add android or ionic platform android
cordova emulate android or ionic emula...
Create a New Cordova Project (not Ionic)
Compare Project Structure to Ionic Project (config.xml)
Delete Cordova Project
Ad...
APIS
API Documentation: docs.angularjs.org/api (https://docs.angularjs.org/api)
Pay Attention: Documentation for latest Build (...
API Doc and Guides at ionicframework.com/docs (http://ionicframework.com/docs/)
Lot of Live Demos and Code Examples
All Di...
OPTIMISATION
Avoid Overlapping Elements (Popups, Overlays)
Try to Keep the DOM Small, Create Multiple Small States
HTML Tables Are Slug...
Subfolders in hooks
Something Executable (with Hash-Bang)
See README (https://github.com/apache/cordova-lib/blob/master/co...
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
M...
Clone GitHub Repo pburgmer/et-ka-2014-ionic-tutorial-app (https://github.com/pburgmer/et-ka-2014-ionic-tutorial-app)
to Ge...
Philipp Burgmer
burgmer@w11k.com
www.w11k.com (http://www.w11k.com)
www.thecodecampus.de (http://www.thecodecampus.de)
Tutorial: Develop Mobile Applications with AngularJS
Upcoming SlideShare
Loading in …5
×

Tutorial: Develop Mobile Applications with AngularJS

3,747 views

Published on

Slides for my tutorial at Karlsruher Entwicklertag 2014.
Visit us at http://www.thecodecampus.de

Folien zu meinem Tutorial beim Karlsruher Entwicklertag 2014.

AngularJS hat sich in den letzen 2 Jahren von einem vielversprechendem zu einem viel eingesetzten JavaScript MVC Framework entwickelt, das immer mehr an Aufmerksamkeit und Zulauf gewinnen kann. Es gibt zahlreiche kleine und auch einige große Anwendungen im Netz die auf AngularJS basieren und viele davon sind "mobile ready".

Doch ist AngularJS auch eine gute Wahl um nicht nur "mobile ready" Web-Anwendungen sonder native mobile Anwendungen zu entwickeln?

In diesem Tutorial wird anhand von Beispielen gezeigt wie AngularJS z.B. zusammen mit PhoneGap eingesetzt werden kann um native Anwendungen für diverse mobile Platformen mit modernen Web-Technologien zu entwickeln.

Published in: Technology
  • Be the first to comment

Tutorial: Develop Mobile Applications with AngularJS

  1. 1. Tutorial Develop Mobile Applications with AngularJS
  2. 2. Philipp Burgmer Software Engineer / Consultant / Trainer Focus: Frontend, Web Technologies WeigleWilczek GmbH burgmer@w11k.com ABOUT ME
  3. 3. WeigleWilczek / W11k Software Design, Development & Maintenance Consulting, Trainings & Project Kickoff Web Applications with AngularJS Native Rich Clients with Eclipse RCP ABOUT US
  4. 4. Developing Mobile Applications Native Look & Feel Web-Technologies (HTML, JavaScript, CSS) Setup Architecture Development APIs WHAT IT'S ALL ABOUT
  5. 5. SETUP
  6. 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. 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. 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. 9. ARCHITECTURE
  10. 10. Mobile OS WebView Ionic AngularJS Cordova Application THE BIG PICTURE
  11. 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. 12. 229 Plugins Native  JavaScript org.apache.cordova Camera Battery Status Console Contacts Device Information + Motion + Orientation Dialogs File + File Transfer CORDOVA PLUGINS
  13. 13. Distributioin of Cordova Services like PhoneGap Build phonegap.com (http://phonegap.com/) Developed by Adobe License: Apache 2.0
  14. 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. 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. 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. 17. OUR FIRST APP
  18. 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. 19. PROJECT STRUCTURE Cordova hooks merges platforms plugins www config.xml Ionic ionic.project Custom scss bower.json Gulpfile.js package.json
  20. 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. 21. TOOLS
  22. 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. 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. 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. 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. 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. 27. APIS
  28. 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. 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. 30. OPTIMISATION
  31. 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. 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. 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. 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. 35. Philipp Burgmer burgmer@w11k.com www.w11k.com (http://www.w11k.com) www.thecodecampus.de (http://www.thecodecampus.de)

×