Building Hybrid Apps with AngularJS and Ionic. 26,000+ Github Stars Top 50 most starred Github repository Installed over 200,000 times every month 3M Ionic apps have been created since 2014 Hundreds of thousands of active community members

1. ionic
Building Hybrid Apps with AngularJS and
Ionic

2. “I want a native app!”

3. The Downsides of Native
● Proficiency in each platform required
● Entirely separate code bases
● Timely & expensive development
● Diminishing returns

4. More Platforms. More Problems.
Why are we still coding for multiple platforms?

5. “Is there an alternative?”

6. ● Hybrid Apps: HTML5 that acts like native
● Phonegap renamed to Cordova
● Web wrapped in native layer
● Direct access to native APIs
● Familiar web dev environment
● Develop a single code base (web platform)

7. “Oh No! The Zuck has
spoken!”

8. Are you Building the Facebook
app?
● Have a multi-million dollar budget?
● Have a large team of experienced native developers?
● Does your billion-dollar revenue depend on this app?
● If so...do native
● ...but today it's not so black and white

9. “Hybrid apps are slow!”
“The Times They Are a-Changin'”

10. Mobile devices have rapidly improved!

11. Native SDKs Are Great
● Common UI
● Views
● Navigation and stack history
● Transitions
● Gestures

12. There's No Web SDK
● It's the wild-west for hybrid apps
● We need to bridge the gap between web
and native
● We need rich, native-style UI components
and interactions
● We need UI APIs, not just jQuery widgets

14. “ionic”

15. Web Technologies You Already
Know and Love
(You'll feel right at home)

16. Ionicons
Over 700 MIT licensed font-icons included
ionicons.com

17. Ionic's Adoption
● 26,000+ Github Stars
● Top 50 most starred Github repos
● Installed over 200,000 times every month
● 3M Ionic apps have been created since 2014
● Hundreds of thousands of active community
members

18. Standing on the Shoulders of AngularJS
● Proven for large-scale webapp development
● Extends the HTML vocabulary
● UI Components using Directives and Services

19. “Let’s Talk About
Angular”

20. What is ANGULARJs?
● It’s not a JavaScript library (As they say). There are no
functions which we can directly call and use.
● It is not a DOM manipulation library like jQuery. But it uses
subset of jQuery for DOM manipulation.
● Focus more on HTML side of web apps.
● For MVC design pattern.
● AngularJS is a Javascript MVC framework created by Google
to build properly architectured and maintenable web
applications.

22. Angular apps are modular and Angular
has its own modularity system called
NgModules.
NgModules are a big deal. This page
introduces modules; the NgModules
pages relating to NgModules covers
them in detail

24. You define a component's view with its
companion template. A template is a
form of HTML that tells Angular how
to render the component.

26. Metadata tells Angular how to process
a class.

28. Service is a broad category
encompassing any value, function, or
feature that your application needs.
Almost anything can be a service. A
service is typically a class with a
narrow, well-defined purpose. It
should do something specific and do it
well.

30. “Back To IONIC”

31. “UI Component
Overview”

32. https://ionicframework.com/present-ionic/slides/#/28

33. Ionic CLI
$ npm install -g ionic
● Quickly create a project with starter templates
● Boilerplate app structure ready for customization
● Preconfigured tools: Gulp, Sass, Bower, etc.
● Start a local dev server with LiveReload
● Update Ionic Framework library files
● Build and run native apps

34. Ionic CLI
$ npm install -g ionic cordova
$ ionic start myapp sidemenu
$ cd myapp
$ ionic serve

35. Demo Time!

36. References
https://thinkster.io/a-better-way-to-learn-angularjs
https://www.edureka.co/blog/angular-tutorial/
https://angular.io/guide/architecture
https://ionicthemes.com/tutorials/about/building-a-complete-mobile-app-with-ionic-3
https://thinkster.io/ionic-framework-tutorial
https://ionicframework.com/present-ionic/slides/#/28

37. Thank You