Hybrid Mobile Apps | Ionic & AngularJS

1. <Hmidi Hamdi>
+
Hybrid Apps with AngularJS and Ionic
Framework

2. Hmidi Hamdi
Web & Mobile Devlopper
Software Engeneering @ ISSATSo
Founder & Member @ IGC
JSA @ JCertif Tunisia

3. Do you need Mobile Apps ?

4. More Plateforms ! More Problems

5. Native Apps
● Plateform specific
● Respective Devloppment Tools
● Best Performance
● Time Consuming
● Expensive Devloppement

6. want to support all major plateforms
even mobile web

7. You need cool web technologies

8. Hybrid Apps
● All Plateforms(iOS, Android, Windows Phone)
● HTML5, CSS3 and JS
● Limited Performance
● Quick devlopment
● Direct Access to Native APIs with Cordova.

9. Apache Cordova is a platform for building native
mobile applications using HTML, CSS and
JavaScript

10. Plateforms
Android
Blackberry
FirefoxOS
iOS
Tizen
WebOS
Windows Phone 7
Windows Phone 8
Plugins
Battery Status
Camera
Contacts
Device Orientation
Dialogs
File Transfer
Geolocation
Media Capture
Network Information
Splashscreen
Statusbar
Vibration

11. What is Angular JS

12. JavaScript MVW Framework
Features : Directives, Filters, Two-way data
binding, Services, DI and Testability

13. What is Ionic

14. An Open source framework for developing
hybrid mobile apps with Angular, Sass and
cordova

15. Best Friend with Angular
● UI Components are Angular Directives
● Ready to work with your App

16. Ionicons

17. Lists

18. Complex Lits
● Ng Directive
● Show by swiping

19. Tabs

20. Side Menu

21. Slide Box

22. Action Sheet

23. Ionic Routing

25. Start, Build, Run and emulate

26. Android Building
● Install JDK .
● Install Android SDK.
● Add Android SDK tools and plateform-tool to
Path variables.
● Install Node JS.
● Install Git.
● Install Appache Ant.

27. Install Ionic & Cordova Globally
$ npm install -g cordova ionic

28. Ionic Templates
$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

29. Clone Demo Project
$ ionic start AppName TemplateName

30. Add Platform, Build & Emulate
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ ionic serve --lab

31. Let’s Build

32. Q/A

33. Thank You !!!