Scribd
Upload
251 views

Ionic Framework PDF

Ionic Framework is an open source front-end framework for developing hybrid mobile apps with HTML5. It uses Apache Cordova to access native device functionality from JavaScript and AngularJS for developing the app structure and behavior. Ionic provides pre-built UI components and directives that make it easy to build apps with a native look and feel. Some key components include lists, side menus, pull to refresh, and slide boxes. Ionic apps can be developed in Netbeans and other IDEs.

Uploaded by

Jk Karma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
251 views

Ionic Framework PDF

Ionic Framework is an open source front-end framework for developing hybrid mobile apps with HTML5. It uses Apache Cordova to access native device functionality from JavaScript and AngularJS for developing the app structure and behavior. Ionic provides pre-built UI components and directives that make it easy to build apps with a native look and feel. Some key components include lists, side menus, pull to refresh, and slide boxes. Ionic apps can be developed in Netbeans and other IDEs.

Uploaded by

Jk Karma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Ionic Framework

Front-end framework for developing hybrid


mobile apps with HTML5
Mobile development

source: Native mobile apps:The wrong choice for business?


Why Hybrid

source: Hybrid - Applications for Mobile


Open Source Frameworks
Appcelerator titanium http://www.appcelerator.com/titanium/

BridgeIt http://bridgeit.mobi/index.html

ChocolateChip Ui http://chocolatechip-ui.com/

Ionic http://ionicframework.com/

LigerMobile http://reachlocal.github.io/liger/

...
Why Ionic

http://coenraets.org/blog/2014/06/qcon-new-york-slides-creating-native-like-mobile-apps-with-cordova-angularjs-and-
ionic/
Apache Cordova

Set of device APIs that allow a mobile app


developer to access native device function such as
the camera or accelerometer from JavaScript.
Apache Cordova

Camera
cordova plugin add org.apache.cordova.camera
navigator.camera.getPicture( cameraSuccess, cameraError,
cameraOptions );

source: Cordova Camera Plugin


Apache Cordova

Vibration
cordova plugin add org.apache.cordova.vibration
navigator.vibrate(time)

source: Cordova Vibration Plugin


Angular js

A structural MVC framework for dynamic web


apps. It lets you use HTML as your template
language and lets you extend HTML's syntax to
express your application's components clearly and
succinctly
Angular js

source: AngularJS with TypeScript and Windows Azure Mobile Services


Angular js
Expressions
AngularJS let you execute expressions directly within your HTML pages

source: Everything you need to understand to start with AngularJS


Angular js
Model - Controller View

Result

source: http://mattiash.github.io/angular-presentation/presentation.html
Angular js
Directives
Directives are markers on a DOM element that tell AngularJS's HTML
compiler to attach a specified behavior to that DOM element
ng-app: responsible for bootstrapping your app defining its scope. In
AngularJS, you can have multiple apps within the same page
ng-controller: directive defines which controller will be in charge of
your view
ng-repeat: define your template scope when looping through
collections

source: Everything you need to understand to start with AngularJS


Angular js

source: A Step-by-Step Guide to Your First AngularJS App


Angular js
controller.js

app.js

The $scope variable is supposed to link your controller and


views. In particular, it holds all the data that will be used
within your template.
source: A Step-by-Step Guide to Your First AngularJS App
Angular js

source: A Step-by-Step Guide to Your First AngularJS App


Angular js
Filters
AngularJS let you change the way your data are displayed in your page

source: Everything you need to understand to start with AngularJS


Ionic
Ionic is a bunch of UI elements made in HTML5 &
CSS3 that covers a lot of the mobile interactions
The big advantage of Ionic is all the UI components
are AngularJS Directives
Ionic (Lists)

source: Ionic presentation


Ionic (Complex Lists)

source: Ionic presentation


Ionic (Side menu)

source: Ionic presentation


Ionic (Slide Box)

source: Ionic presentation


Ionic (Pull to refresh)

source: Ionic presentation


Ionic (Pull to refresh)

source: Ionic presentation


Ionic (Pull to refresh)

source: Ionic presentation


Ionic (Installation)
Ionic (Netbeans)
Ionic (Netbeans)
Ionic (Netbeans)

You might also like