Intro to mobile apps with the ionic framework & angular js
- 1. Tuesday, November 12, 2014 Author: Hector Iribarne @hectoriribarne Introduction to Mobile Apps with the Ionic Framework & AngularJS
- 2. @hectoriribarne Main Topics Ionic Basics AngularJS and Cordova Ionic Code Time!
- 5. @hectoriribarne Tell me more about Ionic Ionic is an AngularJS-based framework Ionic lets you create mobile apps using JavaScript Ionic provides a CLI to create, build, test and deploy your apps
- 6. @hectoriribarne Ionic - Building Blocks
- 8. @hectoriribarne Detour: Let’s talk about AngularJS
- 10. @hectoriribarne HTML5 tags - Wouldn’t it be nice to have you own tags? <myCustomTag> <AdamTag> <BocaJSTag> <HectorTag>
- 11. @hectoriribarne Angular JS - Directives A directive is simply a function that we run on the DOM element to give it more functionality Directives give us the power to create our own HTML elements Angular uses directives everywhere. ng-tags are Angular provided directives
- 12. @hectoriribarne Angular JS - Scopes AngularJS uses scopes to communicate between components Scopes are the glue between our code and what the browser renders When we assign a variable on a $scope, Angular makes the variable accessible to our view automatically
- 13. @hectoriribarne Angular JS - Dependency Injection Dependency injection (DI) is a term for how code gets referenced to its dependencies. DI refers the process of us telling Angular what dependencies we need to use and Angular resolving dependencies when we need them. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
- 14. @hectoriribarne Apache Cordova Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Before Adobe purchased PhoneGap PhoneGap After Adobe purchased PhoneGap Apache Cordova Adobe PhoneGap
- 16. @hectoriribarne Install Ionic Install npm (Node Packet Manager): https://github. com/npm/npm or http://nodejs.org/ @hectoriribarne Setup Ionic on Windows npm install -g ionic npm install -g cordova Setup Ionic on Mac/Linux sudo npm install -g ionic sudo npm install -g cordova
- 18. @hectoriribarne Create an App with a blank template
- 20. @hectoriribarne Directory Structure Details .bower, bower.json // Ionic scripts dependencies. Loads ionic codes & makes it easier to update Ionic w/o changing your proj) .gitignore // Files git should ignore config.xml // Config file for Cordova gulpfile.js // JavaScript build tool similar to Grunt hooks/ // Cordova folder ionic.project // Settings for ionic package.json // Dependencies for node packages plugins/ // Cordova plugings scss/ // Sass folder www/ // root of application (Most important folder)
- 21. @hectoriribarne Launch Ionic: ionic serve
- 22. @hectoriribarne Ionic - Build Apps (from your project directory) iOS (iPhone emulator example) ionic platform add ios ionic build ios ionic emulate ios Android (device example) ionic platform add android ionic build android adb devices ionic run android --device
- 27. Questions? @hectoriribarne Last but not least
- 28. @hectoriribarne Follow us on Twitter https://twitter.com/BrowardDrupal