Slide 1

Cross-Platform Development using Angulr JS in Visual Studio - Md. Mizanur Rahman Sarker

Types of Mobile ApplicationMobile Web ApplicationNative ApplicationHybrid Application

Mobile Web Application

Written using web technologiesAll content will be loaded using browserHTML5, CSS

Mobile Web AdvantagesFamiliar web-based programmingQuick and easy development iterationEasy application update/re-branding Change web server contentEasy distributionDoes not need to be packaged or distribution via app storeInstallation is optionalPotentially the widest range of device support

Mobile App ChallengesNo native look/feel Slower than native appsApp loaded over network and run in browserApp Cache speeds upSome device have hardware acceleration for CSS, faster Javascript engine

Native Mobile ApplicationBinary executable explicitly installed on the deviceSpecific application for each deviceDistribution through app stores or marketsWrite to device-specific SDK APIiOS: Objective C/XCOdeAndroid: Java/EclipseBlackbery: Java/Eclipse

Native Mobile Applications AdvantagesHighest performanceNative UI and behavior (look/feel)Can use any capabilities that the device API supportsLaunched from icon on home screen

Native Mobile Applications: ChallengesMust write app for each device supportedWrite to device-specific SDK APIIOS: Objective C/XCOdeAndroid: Java/EclipseBlackbery: Java/EclipseMost costly development model (dev+ maintenance) 2-3X dev cost + multiple platformsSpecific skills needed for development

Mobile Hybrid Web AplicationsBest from Web and Native AppsApp written using Web technologiesHTML5+CSS3+JavascriptOpen web standardsWrapped as a native app that runs inside a web container(i.e. Web kit)Full access to native functions from JavaScriptaccelerometer, network, media, contactsWeb code is the same across multiple platforms

Multi platform Development in visual studioAndroid 4 and later (4.4 provides the best developer experience)IOS 6 and IOS 7Windows 8 (Windows Store)Windows Phone 8

InstallationTo get the Multi-Device Hybrid Apps extension, go to thehttp://msdn.microsoft.com/en-us/vstudio/dn722381.aspx.

prerequisitesWindows Management Framework 3.0Visual Studio 2013 Update 3

ComponentsThe installer first installs a patch to Visual Studio to support multi-device hybrid app development. Joyent Node.js enables Visual Studio to integrate with the Apache Cordova Command Line Interface (CLI) and Apache Ripple Emulator.Git CLI is required only if you need to manually add Git URIs for specific Cordova plug-ins.Google Chrome is required to run the Apache Ripple emulator for iOS and Android.Apache Ant 1.8.0 or later is required for the Android build process.Oracle Java JDK 7 is required for the Android build process.Android SDK is required for the Android build process and Ripple.SQLite for Windows Runtime is required to add SQL connectivity to Windows apps (for the WebSQL Polyfill plugin).Apple iTunes is required for deploying an app to an iOS device connected to your Windows PC.

Project structurecsscontains basic CSS style sheets that are included with the blank template.imagesis the suggested location for images for your app.mergesis used to add platform-specific code. For more information,By default, the Blank App template includes commonly used platform-specific code for Windows and Android devices in themergesfolder. (platformOverrides.js us used to specify the platform file.)For Android devices, a .js file is included to provide support for the JavaScriptFunction.prototype.bind()function on Android 2.3 devices.For Windows, a winstore-jscompat.js file is included to enable support for a variety of JavaScript libraries. resis used for platform-specific visual assets (icons and splash screens) and signing certificates. scriptis the default location for all JavaScript or TypeScript files.

Configure Your Multi-Device Hybrid AppA config.xml file included in each project provides most of your app configuration such as the app's display name and start page.

Visual Studio also provides two other ways to configure your app to support platform-specific content:Platform-specific visual assetsPlatform-specific content

Platform-specific visual assetsYou can use theresfolder in your project to specify visual assets such as icons and splash screens based on device resolution and platform.res\icons\platformcontains the app icons for each platform.res\screens\platformcontains splash screens for each platform.

Manage PluginsApache Cordova usespluginsto provide access to native device capabilities that arent available to simple web apps, such as access to the file system. A plugin is a cross-platform Cordova library that accesses native code and device capabilities through a JavaScript interface. When required, the plugin also updates the platform manifest to enable device capabilities. Not all plugins are supported or needed on all device platforms.

In Solution Explorer, open the shortcut menu for the config.xml file, and then chooseOpenorView Designer.In the configuration designer, choose thePluginstab.Select the plugins that you want to enable in your app. (See theList of available plugins.)

Run Your Multi-Device Hybrid App on Android

There are many options for running your multi-device hybrid apps on Android. From Visual Studio, you can run and debug Android apps on the following emulators and devices:Apache Ripple emulator(discussed in a separate article)Android emulatorGenymotion emulatorAndroid device

Add Connected ServicesThe Visual Studio Services Manager for connected services lets you integrate Microsoft services like Azure Mobile Services, Office 365, and other services into your multi-device hybrid apps. The manager makes it easy to add services without leaving Visual Studio.In this article:Opening Service ManagerAdding Azure Mobile ServicesAdding Office 365 services

CordovaApache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.

Ionic FrameworkFree and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.

Ionic frameworkSpeed is important. So important that you only notice when it isn't there. Ionic is built to perform and behave great on the latest mobile devices. Withminimal DOMmanipulation,Zero jQuery, Hardware acceleratedtransitions, one thing is for sure: You'll be impressed.

AngularJS & Ionic

A match made in heaven. Ionic utilizesAngularJSin order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is forserious app development, and AngularJS ties in perfectly.

Native focused

Ionic is modeled on popular native mobile development SDKs, making it easy to understand for anyone that has built a native app foriOSorAndroid. Just drop it in your code to get going, and push through PhoneGap when it's ready.Develop once, deploy everywhere.

Beautifully designed

Clean, simple, and functional. Ionic has been designed to work anddisplay beautifullyon all current mobile devices. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.

CSS ComponentsReusable and customizable front-end UI elements HeaderContentFooterButtonsListCardsFormsToggleCheckboxRadio ButtonsRangeSelectTabsGridUtility

AngularJS Extensions

Ionic is both a CSS framework and a Javascript UI library. Many components need Javascript in order to produce magic, though often components can easily be used without coding through framework extensions such as our AngularIonic extensions.

34

Tabs

http://ngCordova.comngCordova gives you simple AngularJS wrappers for common Cordova plugins.Created by theIonic Frameworkteam and the community.

ngCordova: Cordova with Angulary Goodness

Plugins Supported

ngCordova currently has support for the following plugins:org.apache.cordova.camera org.apache.cordova.console org.apache.cordova.contacts org.apache.cordova.device org.apache.cordova.device-motion org.apache.cordova.device-orientation org.apache.cordova.dialogs org.apache.cordova.file org.apache.cordova.geolocation org.apache.cordova.globalization org.apache.cordova.network-information org.apache.cordova.splashscreen org.apache.cordova.statusbar org.apache.cordova.vibration org.apache.cordova.battery-status https://github.com/Paldom/PinDialog.git

https://github.com/phonegap-build/PushPlugin.git https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git https://github.com/Paldom/SpinnerDialog.git https://github.com/brodysoft/Cordova-SQLitePlugin.git https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git https://github.com/phonegap-build/GAPlugin.git https://github.com/driftyco/ionic-plugins-keyboard https://github.com/wildabeast/BarcodeScanner https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin https://github.com/apache/cordova-plugin-media-capture https://github.com/ohh2ahh/AppAvailability https://github.com/dferrell/plugins-application-preferences https://github.com/shazron/KeychainPlugin.git https://github.com/katzer/cordova-plugin-printer https://github.com/aharris88/phonegap-sms-plugin

Demo