Hybrid Mobile Apps | Ionic & AngularJS
2 likes799 views
This document discusses hybrid mobile app development using AngularJS and the Ionic framework. It notes that hybrid apps allow building apps for multiple platforms using web technologies like HTML5, CSS, and JavaScript, while still having access to native device APIs through Cordova. Ionic builds on AngularJS by providing UI components and a CLI for building, running, and testing hybrid mobile apps across platforms like Android, iOS, and Windows Phone. The document provides an overview of Ionic's features and the basic steps for starting an Ionic project, adding platforms, and building/emulating the app.
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 !!!