Rocking the Ionic Framework

38 %
63 %
Information about Rocking the Ionic Framework

Published on September 24, 2014

Author: rockncoder



A quick introduction to the Ionic Framework. Ionic combines AngularJS with Cordova/PhoneGap and CSS3 to create mobile apps with the web technologies you already know.

Rocking the Ionic Framework Troy Miles 23 September 2014

What is the Ionic Framework? Combines Google's AngularJS with Apache Cordova along with sizzling CSS3 and their own magic

Cordova PhoneGap started at 2008 iPhoneDevCamp by Nitobi 2011 Nitobi acquired by Adobe Donated to Apache Foundation in 2011 Known as Apache Cordova

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

AngularJS Key Features Two Way Data-binding Model View Controller Dependency Injection Deep Linking HTML Templates Directives Testability

AngularJS <!DOCTYPE html> <html ng-app="moduleName"> <head lang="en"> <meta charset="UTF-8"> <title>NG-Skeleton</title> </head> <body> <div ng-controller="aController"> </div> <div ng-controller="anotherController"> </div> <!-- if using jQuery it goes here --> <script src="../libs/angular.min.js"></script> <!-- other libs and script files --> </body> </html>

Other JavaScript MVC Frameworks Backbone.js Knockout EmberJS Other frameworks & ToDoMVC

How popular is AngularJS?

Text How popular is AngularJS?

What should you know? Web development JavaScript Comfortable with command line tools AngularJS Sass

Prerequisites Node / NPM Xcode Android SDK + Eclipse/Android Studio Gulp

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

Supported Devices iOS 6+ Android 4+ Windows Phone 8+ (soon?) FireFox OS (soon?)

Vagrant Installation is a pain Android only Especially great for Windows user Must install Vagrant + Virtualbox

My environment Mac Book Pro 8 GB + 512 SSD Xcode + Android SDK installed Node + NPM Chrome Canary + Allow-Control-Allow-Origin App

Install Ionic npm install -g cordova ionic gulp the -g is for globally

Create ionic app ionic start myApp <template> blank tabs sideMenu

Workflow ionic serve Google Chrome mobile emulator iOS Simulator / Android Emulator / Genymotion iOS / Android device

Demo Time

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

Ionicons Can search from website Can easily change size free & open source

What about tablets? Side menu has been recently enhanced to support split view Ionic always has supported responsive design

Summary Ionic make mobile development easier but not easy Allows use of web skills Installation is still a challenge Not yet 1.0 release, but close

Add a comment

Related presentations

Related pages

Ionic Framework – Mobile Hybrid Application Development ...

Subscribe to our newsletter to start Rocking right now! To get you started we give you our best selling eBooks for FREE! 1. Building web apps with Node.js
Read more

Implementing page anchors in Ionic framework

Random thoughts & observations. From the mundane to the profound and everything in between here’s what’s rocking our world Scrolling to a page anchor ...
Read more

IT world rocks || Rocking tricks and tips of IT world and ...

Ionic Material Ionic Material Design is mobile application.Ionic Material developed by Ionic Framework.Ionic Material harmoniously sits a top of Ionic and ...
Read more

IDE for creating cordova Apps - Ionic

Forum for the Ionic Framework. ... IDE for creating cordova Apps. ... I'm all in for Zend Studio but when I'm rocking the client-side like in Cordova ...
Read more

Successfully using the Android Emulator with Ionic Framework

Resolving Mac OS X error when running Android Emulator through the Ionic framework command line
Read more

Newest 'ionic-framework' Questions - Page 112 - Stack Overflow

Q&A for professional and enthusiast programmers ... Tour Start here for a quick overview of the site
Read more

How To Handle User Authentication With AngularJS

How To Handle User Authentication With AngularJS Inside Your ... Keep on rocking with Ionic ... i m bigginner in the use of the ionic framework , ...
Read more

What are you building with Ionic? We want to know! - ionic ...

I've created demo-app for Kyiv DrupalCamp 2015 (Ukrainian drupallers event), where I'll talk about Drupal and Ionic. What are you building with Ionic?
Read more

Ionic Datepicker - Ionic Marketplace

##Introduction: This is an ionic-datepicker bower component, which can be used in any Ionic framework's application. No additional plugins required for ...
Read more