Download as PDF, PPTX
![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/75/Cross-Platform-Mobile-Apps-with-the-Ionic-Framework-14-2048.jpg)
Uploaded byTroy Miles
Cross Platform Mobile Apps with the Ionic Framework
The document discusses the Ionic framework, which combines Apache Cordova and AngularJS for building cross-platform mobile applications that perform like native apps. It provides insights into the framework's development, key features, and the prerequisites for getting started. The document also highlights examples of successful apps built using Ionic and the benefits of using modern web skills in mobile app development.
More Related Content
Similar to Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
- 1. Cross Platform MobileApps with the Ionic Framework SoCal Code Camp - 15 November 2014 Troy Miles
- 3. Troy Miles Over 30years of programming experience Blog: http://therockncoder.blogspot.com/ Twitter: @therockncoder Email: rockncoder@gmail.com GitHub: https://github.com/Rockncoder
- 4. Questions What is theIonic 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 theIonic Framework?
- 6. The Ionic Framework? CombinesApache 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+ Android4+ Windows Phone 8+ (coming) FireFox OS (coming)
- 8. Drifty Co. Founded in2012 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 at2008 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 technologiesto 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škoHevery 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 TwoWay Data-binding Model View Controller Dependency Injection Deep Linking HTML Templates Directives Testability
- 13. AngularJS HTML 1 <!DOCTYPEhtml> 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 "usestrict"; 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 otherJS MVC Backbone.js Ember.js Knockout AngularJS
- 16. Text Google Trends ofJS MVC BackboneJS, EmberJS, and KnockoutJS
- 17. Text How popular isAngularJS?
- 18. Are people actuallyusing it?
- 19. Mallzee Replaced their hand builtPhoneGap app with Ionic in May Excellent UI
- 20. Songhop The fastest wayto find new music 5 star rated iPhone only
- 21. Keychain Like Uber fortrucks iOS and Android version Scrapped prior version built with PhoneGap
- 22. Sworkit Created by RyanHanna 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 Iknow?
- 24. Modern Web Skills HTML5 / CSS 3 / JavaScript Comfortable with command line tools AngularJS Sass (optional)
- 25. The US Market Androidhas 61.9% iOS has 32.5% That leaves less than 6% for everyone else
- 26. Prerequisites Java SDK 6or 7 Android SDK + Eclipse/Android Studio Node / NPM Cordova Gulp Ionic
- 27. Why do Ineed 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 aneasier way?
- 29. The Ionic Box InstallVirtualBox, its free and available for most platforms Install Vagrant, its free too Install the Ionic Box
- 30. What’s building anapp like?
- 31. Create ionic app ionicstart myApp <template> blank tabs sideMenu
- 32. Workflow ionic serve Google Chromemobile emulator iOS Simulator / Android Emulator / Genymotion iOS / Android device
- 33. Ionicons http://ionicons.com/ Can search from website Caneasily change size free & open source
- 34. ngCordova Cordova has alot 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? Ionicsupports responsive design Side menu supports split view Components like Cards also work well in both formats
- 36.
- 37. Summary Ionic makes mobiledevelopment easier but not easy Allows use of web skills Installation is still a challenge Not yet 1.0 release, but close
- 38.
- 39.