Download to read offline
![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/angularjs-171206143102/75/Angularjs-Tutorial-for-Beginners-4-2048.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/angularjs-171206143102/75/Angularjs-Tutorial-for-Beginners-6-2048.jpg)
Angularjs Tutorial for Beginners
- 1. Tutorial Develop Mobile Applicationswith AngularJS
- 2. Developing Mobile Applications Trainingin Bangalore Native Look & Feel Web-Technologies (HTML, JavaScript, CSS) Setup Architecture Development APIs WHAT IT'S ALL ABOUT
- 3.
- 4. Installed and inPath: Node.JS - node - brew install node Node Package Manager - npm Git - git - brew install git Ruby - ruby Compass - compass - [sudo] gem install compass
- 5. 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
- 6. 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
- 7.
- 8. WebView Mobile OS AngularJS THE BIGPICTURE Application Ionic Cordova
- 9. Better Known asPhoneGap (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
- 10. 229 Plugins Native JavaScript org.apache.cordova Camera BatteryStatus Console Contacts Device Information + Motion + Orientation Dialogs File + File Transfer CORDOVA PLUGINS
- 11. Distributioin of Cordova Serviceslike PhoneGap Build phonegap.com (http://phonegap.com/) Developed by Adobe License: Apache 2.0
- 12. HTML enhanced forweb 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
- 13. Frontend-Framework CSS Optimized forMobile 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
- 14. Similar to Ionic Frontend-Framework Cordovaand AngularJS based Directives and Services onsenui.io (http://onsenui.io/) Current Version 1.0.4 License: Apache 2.0
- 15.
- 16. Create and Navigateto 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
- 17.
- 18. <?xml version='1.0' encoding='utf-8'?> <widgetid="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
- 19.
- 20. Required to Configureand Build Cordova Project Run cordova to See All Available Commands Commands to Configure Project Commands to Build Project CORDOVA CLI
- 21. Ionic Consists ofTwo 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
- 22. Node Package, Installedvia npm install -g ripple-emulator Emulates Android Device in Browser Requires Android as Platform Start Server and Open Browser: ripple emulate RIPPLE EMULATOR
- 23. Android Android SDK Required cordovaplatform 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
- 24. Create a NewCordova 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
- 25.
- 26. 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
- 27. API Doc andGuides 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
- 28.
- 29. 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
- 30. Subfolders in hooks SomethingExecutable (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
- 31. FABULOUS ANGULARJS BUILDSYSTEM 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
- 32. Clone GitHub Repopburgmer/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
- 33. TIB Academy Second Floorand 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.