Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Build Cross-Platform Mobile Apps Angular Ionic ngCordova
1. Building Cross Platform Mobile Apps with
Angular, Ionic, ngCordova, Web API and
PhoneGap Build using Visual Studio
www.dotnet-tricks.com
2. About Me
Hi, I’m Shailendra Chauhan
Full-time Author, Consultant & Trainer @DotNetTricks
Founder and Author of www.dotnet-tricks.com and
www.dotnettricks.io
Author of ASP.NET MVC, LINQ and AngularJS
Interview Questions and Answers Books
@proshailendra @proshailendrachauhan
4. •Do you need a Mobile App?
•Comparing Html5, Hybrid & Native App
•Hybrid Apps Growth By 2015
•Hybrid App Stack vs Native App Stack
•Hybrid App Development Options
•Choosing Hybrid App Development Stack
•Visual Studio 2013 OR 2015
www.dotnet-tricks.com
Agenda
5. Continue...
•Visual Studio Tools for Apache Cordova
•AngularJS
•Ionic
•NgCordova
•Web API
•PhoneGap Build
•Hybrid App Directory Structure
•Demonstration
www.dotnet-tricks.com
6. Do you need a Mobile App?
www.dotnet-tricks.com
7. Do you need a Mobile App?
•World is moving towards mobility
•Reaching to more customers
•Customer engagement
•Customer service and support
•Promotion
www.dotnet-tricks.com
11. Hybrid App vs Html5 App
• Platform independent
• Runs inside web view
• Runs locally on device
• Access to mobile native features
• App store distribution
• Platform independent
• Runs in browser
• Runs through web server (IIS)
• Doesn’t support
• Doesn’t has App store distribution
www.dotnet-tricks.com
13. Native App vs Hybrid App
• Platform Dependent
• Respective development tools
• Time consuming
• Expensive development
• More platform more code
• Best Performance
• Easy access to mobile native
features
• Platform Independent
• Commonly used development tools
• Quick development
• Cheap development
• Single code for multiple platform
• Limited Performance
• Limited access to mobile native
features
www.dotnet-tricks.com
25. Visual Studio 2013 OR 2015
• Easy setup and installation
• Develop faster with nearly 100%
shared code
• Debug on any device or emulator
• Use the JavaScript framework
you love
• Publish to any App Store
www.dotnet-tricks.com
26. Visual Studio 2013 Tools for Apache Cordova
Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.120).aspx
www.dotnet-tricks.com
27. Visual Studio 2015 Tools for Apache Cordova
Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx
www.dotnet-tricks.com
29. Angular JS
• JavaScript Framework based on MV-* pattern
• Extends HTML by adding new attributes, tags and expressions
• Customize and Extensible
• Code Reusability
• Powerful Data Binding
• Dependency Injection
• Compatibility
• Support www.dotnet-tricks.com
31. Ionic
• HTML5 hybrid mobile apps development framework
• Best friend of AngularJS
• Native-styled sleek and light weight mobile UI elements
• Boilerplate app structure ready for customization
• Delivers native app like interaction & performance
• A Powerful CLI to create, build, test, and deploy apps
• Community Support
www.dotnet-tricks.com
34. ngCordova
• An AngularJS wrappers for the most popular Cordova and
PhoneGap plugins to access mobile native features
• Collection of 63+ native Cordova plugins
• Make easy to build, test, and deploy Cordova mobile apps
with AngularJS
www.dotnet-tricks.com
36. Web API
• A framework for building HTTP services
to be consumed by a broad range of
clients like browsers, mobiles and tablets
• Light weight RESTful architecture
• Good for devices which have limited
bandwidth like mobiles and tablets
• Supports ASP.NET MVC features
• Supports Self Hosting and IIS Hosting
www.dotnet-tricks.com
38. PhoneGap Build
• Cloud service by Adobe as Free and Paid
• Compile HTML, CSS and JavaScript app
into native app for the desired platform
like iOS, Android and Windows
• Provides app-store ready apps without
the headache of maintaining native SDKs
• Supports multiple platforms
• Easily share your apps
www.dotnet-tricks.com