Download as PDF, PPTX
Uploaded byHamdi Hmidi
Hybrid Mobile Apps | Ionic & AngularJS
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 Appswith AngularJS and Ionic Framework
- 2. Hmidi Hamdi Web &Mobile Devlopper Software Engeneering @ ISSATSo Founder & Member @ IGC JSA @ JCertif Tunisia
- 3. Do you needMobile Apps ?
- 4. More Plateforms !More Problems
- 5. Native Apps ● Plateformspecific ● Respective Devloppment Tools ● Best Performance ● Time Consuming ● Expensive Devloppement
- 6. want to supportall major plateforms even mobile web
- 7. You need coolweb technologies
- 8. Hybrid Apps ● AllPlateforms(iOS, Android, Windows Phone) ● HTML5, CSS3 and JS ● Limited Performance ● Quick devlopment ● Direct Access to Native APIs with Cordova.
- 9. Apache Cordova isa platform for building native mobile applications using HTML, CSS and JavaScript
- 10. Plateforms Android Blackberry FirefoxOS iOS Tizen WebOS Windows Phone 7 WindowsPhone 8 Plugins Battery Status Camera Contacts Device Orientation Dialogs File Transfer Geolocation Media Capture Network Information Splashscreen Statusbar Vibration
- 11.
- 12. JavaScript MVW Framework Features: Directives, Filters, Two-way data binding, Services, DI and Testability
- 13.
- 14. An Open sourceframework for developing hybrid mobile apps with Angular, Sass and cordova
- 15. Best Friend withAngular ● UI Components are Angular Directives ● Ready to work with your App
- 16.
- 17.
- 18. Complex Lits ● NgDirective ● Show by swiping
- 19.
- 20.
- 21.
- 22.
- 23.
- 25. Start, Build, Runand emulate
- 26. Android Building ● InstallJDK . ● 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 $ ionicstart 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.
- 32.
- 33.