Tutorial: Develop Mobile Applications with AngularJS
4 likes4,140 views
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.
![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](https://image.slidesharecdn.com/developmobileapplicationswithangularjs-140717080059-phpapp01/85/Tutorial-Develop-Mobile-Applications-with-AngularJS-6-320.jpg)
![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](https://image.slidesharecdn.com/developmobileapplicationswithangularjs-140717080059-phpapp01/85/Tutorial-Develop-Mobile-Applications-with-AngularJS-8-320.jpg)
Tutorial: Develop Mobile Applications with AngularJS
- 1. Tutorial Develop Mobile Applications with AngularJS
- 2. Philipp Burgmer Software Engineer / Consultant / Trainer Focus: Frontend, Web Technologies WeigleWilczek GmbH [email protected] 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
- 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
- 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 [email protected] www.w11k.com (http://www.w11k.com) www.thecodecampus.de (http://www.thecodecampus.de)