Tutorial
Develop Mobile Applications with AngularJS WHAT IT'S ALL ABOUT Developing Mobile Applications Training in Bangalore Native Look & Feel Web-Technologies (HTML, JavaScript, CSS) Setup
Architecture Development APIs
SETUP Installed and in Path: Node.JS - node brew node
install
Node
Package Manager - npm Git - git - brew install git Ruby - ruby Compass - compass - [sudo] gem install compass
Optional:
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
ARCHITECTUE THE BIG PICTURE Application Ionic Angular JS C ordov a
WebView Mobile OS
Better Known as PhoneGap (http://phonegap.com/)
Nitobi AdobeApache 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
CORDOVA PLUGINS 229 Plugins NativeJavaScript org.apache.cordova Camera Battery Status Console Contacts Device Information Orientation Dialogs File + File Transfer
+
Motion
+
Distributioin of Cordova Services like PhoneGap Build phonegap.com (http://phonegap.com/)
Developed by Adobe License: Apache 2.0
by
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
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
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
OUR FIRST APP HANDSON 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
PROJECT STRUCTURE Cordova hooks
Ionic ionic.project merges
platforms
Custom
pluginsscss
wwwbower.json config.xmlGulpfile.js package.json
CONFIG.XML
TOOLS CORDOVA CLI Required to Configure and Build Cordova Project Run cordova to See All Available Commands Commands to Configure Project Commands to Build Project
IONIC CLI
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
RIPPLE EMULATOR Node P ack age , Ins talled via npm install -g ripple-emulator E mulates Android Device in B rows er R equires Android as Platorm S tart S erver and O pen Brows er: ripple emulate
PLATFORM SIMULATORS Android Android SDK Required cordova platform add android or ionic
platform
android
cordova
emulate
android
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
HANDSON 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 PlatformAgain via cordova
or
Run ionic serve, OpenApp in Browser and Check Console for JS Errors Run Ripple Emulator and Check Console for JS Errors Run cordova serve, OpenApp in Browser and Check Console for JS Errors
APIS ANGULARJS 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/)
IONIC 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
OPTIMISATION
PERFORMANCE HINTS 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
HOOKS 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 FolderNo Valid Cordova Project!
FABS FABULOUS ANGULARJS BUILD SYSTEM 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
HANDSON 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
TIB Academy
Second Floor and Third Floor, 5/3 BEML Layout, Varathur Road, Thubarahalli, Kundalahalli Gate, Bangalore – 66 Landmark – Behind Kundalahalli Gate bus stop, Opposite to SKR Convention Mall, Next to AXIS Bank.