Cross Platform Mobile Apps with the Ionic Framework
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions. In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device. Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
![AngularJS JavaScript
1 "use strict";
2
3 var app = angular.module('myApp', ['myApp.directives']);
4
5 app.controller('MainCtrl', ["$scope", function ($scope) {
6 $scope.myText = 'Not Selected';
7 $scope.currentDate = '';
8 $scope.updateMyText = function () {
9 $scope.myText = 'Selected';
10 };
11 $scope.start= 5;
12 $scope.stop = 95;
13 $scope.current = 5;
14 }]);
15
16 app.directive('timePicker', [function () {
17 var today = new Date(new Date().toDateString());](https://image.slidesharecdn.com/rockingtheionicframework-141020201920-conversion-gate01/85/Cross-Platform-Mobile-Apps-with-the-Ionic-Framework-14-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (17)
Similar to Cross Platform Mobile Apps with the Ionic Framework (20)
More from Troy Miles (20)
Recently uploaded (20)
![Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Version](https://cdn.slidesharecdn.com/ss_thumbnails/fashionevolution2-250322112409-f76abaa7-250428124909-b51264ff-250504160528-fc2bb1c5-thumbnail.jpg?width=560&fit=bounds)
![Download Wondershare Filmora Crack [2025] With Latest](https://cdn.slidesharecdn.com/ss_thumbnails/neo4j-howkgsareshapingthefutureofgenerativeaiatawssummitlondonapril2024-240426125209-2d9db05d-250419-250428115407-a04afffa-thumbnail.jpg?width=560&fit=bounds)
Cross Platform Mobile Apps with the Ionic Framework
- 1. Cross Platform Mobile Apps with the Ionic Framework SoCal Code Camp - 15 November 2014 Troy Miles
- 3. Troy Miles Over 30 years of programming experience Blog: http://therockncoder.blogspot.com/ Twitter: @therockncoder Email: [email protected] GitHub: https://github.com/Rockncoder
- 4. Questions What is the Ionic Framework? Are people actually using it? What should I know? What is the easiest way to get started? What’s building an app like?
- 5. What is the Ionic Framework?
- 6. The Ionic Framework? Combines Apache Cordova with Google's AngularJS along with lots custom JavaScript, HTML, and CSS3 to create purpose built mobile apps which perform like native ones and look beautiful
- 7. Supported Devices iOS 6+ Android 4+ Windows Phone 8+ (coming) FireFox OS (coming)
- 8. Drifty Co. Founded in 2012 by Ben Sperry (CEO) and Max Lynch (CTO) Based in Madison, WI Creators of Codiqa, JetStrap, and Ionic Raised $1 million from Arthur Ventures earlier this year
- 9. Cordova PhoneGap started at 2008 iPhoneDevCamp by Nitobi 2011 Nitobi acquired by Adobe Donated to Apache Foundation in 2011 Known as Apache Cordova But pronounced “PhoneGap”
- 10. Cordova Uses web technologies to build mobile apps The apps have access to device hardware from JavaScript The web files are hosted in the app Apps are portable to other systems with little to no changes Apps are packaged using platform SDKs Cordova does not include a UI framework
- 11. AngularJS Created by Miško Hevery and Adam Abrons in 2009 JavaScript MVC 106 kb production version (minimized, not gzipped) Declarative programming for UI Imperative programming for business logic
- 12. AngularJS Key Features Two Way Data-binding Model View Controller Dependency Injection Deep Linking HTML Templates Directives Testability
- 13. AngularJS HTML 1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="utf-8"> 5 <title>AngularJS Datepicker</title> 6 <link rel="stylesheet" href="../css/jquery-ui.css"> 7 <link rel="stylesheet" href="../css/jquery.timepicker.css"> 8 <script src="../libs/jquery-1.10.2.min.js"></script> 9 <script src="../libs/jquery-ui.js"></script> 10 <script src="../libs/angular.js"></script> 11 <script src="../libs/jquery.timepicker.min.js"></script> 12 <script src="../solutions/datePicker.js"></script> 13 <script src="../solutions/dateApp.js"></script> 14 </head> 15 <body ng-controller="MainCtrl"> 16 <input id="dateField" datepicker ng-model="$parent.currentDate" select="updateMyText(date)"> 17 <br/> 18 {{myText}} - {{currentDate}}
- 14. AngularJS JavaScript 1 "use strict"; 2 3 var app = angular.module('myApp', ['myApp.directives']); 4 5 app.controller('MainCtrl', ["$scope", function ($scope) { 6 $scope.myText = 'Not Selected'; 7 $scope.currentDate = ''; 8 $scope.updateMyText = function () { 9 $scope.myText = 'Selected'; 10 }; 11 $scope.start= 5; 12 $scope.stop = 95; 13 $scope.current = 5; 14 }]); 15 16 app.directive('timePicker', [function () { 17 var today = new Date(new Date().toDateString());
- 15. AngularJS vs other JS MVC Backbone.js Ember.js Knockout AngularJS
- 16. Text Google Trends of JS MVC BackboneJS, EmberJS, and KnockoutJS
- 17. Text How popular is AngularJS?
- 18. Are people actually using it?
- 19. Mallzee Replaced their hand built PhoneGap app with Ionic in May Excellent UI
- 20. Songhop The fastest way to find new music 5 star rated iPhone only
- 21. Keychain Like Uber for trucks iOS and Android version Scrapped prior version built with PhoneGap
- 22. Sworkit Created by Ryan Hanna alone Featured in the Health and Fitness section of the App Store Downloaded over 3 million times in the App Store, Google Play and Amazon Store
- 23. What should I know?
- 24. Modern Web Skills HTML 5 / CSS 3 / JavaScript Comfortable with command line tools AngularJS Sass (optional)
- 25. The US Market Android has 61.9% iOS has 32.5% That leaves less than 6% for everyone else
- 26. Prerequisites Java SDK 6 or 7 Android SDK + Eclipse/Android Studio Node / NPM Cordova Gulp Ionic
- 27. Why do I need Node? Node apps are built in JavaScript JavaScript runs on all platforms Node comes bundled with NPM, Node Package Manager It makes installing, running, and updating tools easy Hence Node is a popular way to ship tools
- 28. Is there an easier way?
- 29. The Ionic Box Install VirtualBox, its free and available for most platforms Install Vagrant, its free too Install the Ionic Box
- 30. What’s building an app like?
- 31. Create ionic app ionic start myApp <template> blank tabs sideMenu
- 32. Workflow ionic serve Google Chrome mobile emulator iOS Simulator / Android Emulator / Genymotion iOS / Android device
- 33. Ionicons http://ionicons.com/ Can search from website Can easily change size free & open source
- 34. ngCordova Cordova has a lot of available plugins Plugins give access to the machine functions ngCordova "Angularizes" plugins for ready use You are always free to write your own wrapper code
- 35. What about tablets? Ionic supports responsive design Side menu supports split view Components like Cards also work well in both formats
- 36. Demo Time
- 37. Summary Ionic makes mobile development easier but not easy Allows use of web skills Installation is still a challenge Not yet 1.0 release, but close