Hybrid Mobile Development With The Ionic SDK And Angular: Part 1Presented by John R. Hampton, Senior Consultant

Why choose the Ionic SDK?

www.agilethought.com 2

• Free and open source – get up and running in minutes

• AngularJS! Ionic utilizes Angular to create a powerful and robust framework

• ngCordova wraps the proven Cordova API with its own set of AngularJS extensions

• Beautifully built and performance optimized out of the box

• Easy to learn CLI that is ready to deploy your app onto any platform

• Build your app using your favorite JavaScript IDE

Ionic + Angular = A Perfect Match

www.agilethought.com 3

• Take advantage of powerful directives to customize your app with a native feel

• Bootstrap your app quickly with native-style UI components and icons

• HTML5 that acts native

• Direct access to native device functionality using ngCordova’s extensive list of plugins

• UI APIs, with no jQuery

• Proven state driven navigation with AngularUI Router

Build Your First App!

www.agilethought.com 4

• Install Node.js - http://nodejs.org/

• To add platforms, ensure you have installed the Android and iOS platform dependencies

• Use NPM to globally install the Ionic and Cordova CLIs

• Use the Ionic CLI to create an application

• Blank App

• Tabbed App

• Side Menu App

Run Your First App!

www.agilethought.com 5

• Run your application in a browser

• Easily add a platform, build and emulate your app (substitute Android for iOS)

Say Hello To ngCordova

www.agilethought.com 6

• Use bower to install ngCordova

• Add ngCordova’s js file to your application, just make sure it’s above Cordova

• Add ngCordova as a dependency to your Angular application

• You can now add native functionality to your application by adding plugins

• For example, to access native camera functionality -

The Amazing Ionic CLI

www.agilethought.com 7

Easily compare multiple platform types

using Ionic Lab.

• Opens your app in a browser

• View your app as if running on a device

• Supports Live Reload

The Amazing Ionic CLI

www.agilethought.com 8

• Create an App portfolio to share with beta testers and product owners using

the Ionic View App

• Generate Icons and Splash screens for multiple platforms with ease

• Improve performance and reduce irregularities on Android with Crosswalk

References / Links

www.agilethought.com 9

• Ionic Framework

• ngCordova

• AngularJS

• Start Building with Ionic

• Ionic Blog

• WebStorm

Specific Needs RequireSpecific Solutions

Solutions to specific business needs are not always

provided by off-the-shelf software. Custom developed

software gives you the flexibility needed to operate in

today's complex and challenging business environment.

10www.agilethought.com

agilethought.com 877.514.9180

John Hampton is a Microsoft Certified Solutions Developer in Web Applications and Senior

Consultant at AgileThought. Having 11 years of software development experience, John is

particularly interested in architecting cross-platform mobile and web development technologies

such as Ionic, Angular, MongoDB, and Node.js.

About John

Thank you! Stay tuned for Part 2!

@johnrhampton

Looking For Software Solutions for Your Business? Email me at John.Hampton@agilethought.com 11

linkedin.com/in/johnrhampton