A dive into Ionic Framework. What is it, why should you use it, how can it work for you and we build a basic application to show how easy and fast it is to use.
2. WHAT IS IONIC FRAMEWORK
“Free and open source, Ionic offers a library of mobile-
optimized HTML, CSS and JS components, gestures, and tools
for building highly interactive apps. Built with Sass and
optimized for AngularJS.”
19. 6. IONIC.IO PLATFORM
Full-stack backend services and tools for your Ionic app.
Finally, a service that embraces mobile web dev!
Push
Analytics
Deploy
Users
Creator
Lab
Market
20. 7. IONIC LAB
Lab harnesses the power of the Ionic CLI through an intuitive
desktop app for both Windows and Mac.
21.
22. 8. IONIC CREATOR
Creator is a drag-&-drop prototyping tool for creating great
apps using Ionic, with just a click of the mouse.
23.
24. HOW TO SETUP IONIC FRAMEWORK
1. Install Ionic
2. Start a project
3. Run it
25. 1. INSTALL IONIC
Make sure you have NodeJS installed
Install Cordova and Ionic
Install Android Studio
Install XCode for Mac
On Mac, install ios-sim
Follow the Android and iOS platform guides to install
required platform dependencies.
$ npm -g install cordova ionic
$ npm -g install ios-sim
26. 2. START A PROJECT
You have three options here:
$ ionic start todoApp blank
$ ionic start todoApp tabs
$ ionic start todoApp sidemenu
This will create a folder with all your application data in it.
27. 3. RUN IT
Using emulation
$ cd todoApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
Using a real device
$ cd todoApp
$ ionic platform add android
$ ionic build android
$ ionic run android
Using a browser
$ cd todoApp
$ ionic serve --lab
30. COMMAND-LINE FLAGS/OPTIONS
[--consolelogs|-c] ...... Print app console logs to Ionic CLI
[--serverlogs|-s] ....... Print dev server logs to Ionic CLI
[--port|-p] ............. Dev server HTTP port (8100 default)
[--livereload-port|-i] .. Live Reload port (35729 default)
[--nobrowser|-b] ........ Disable launching a browser
[--nolivereload|-r] ..... Do not start live reload
[--noproxy|-x] .......... Do not add proxies
31. ICON AND SPLASH SCREEN
Auto generate icons and splash screens for your application
Place artwork in resources folder in the root of the project
$ ionic resources
$ ionic resources --splash
$ ionic resources --icon
32. IONIC VIEW APP
Upload your application and preview/share it
$ ionic upload
Before upload you need an account on and the
app on your Android or iOS device. More info
apps.ionic.io
view.ionic.io
33. USING SASS
To enable Sass in your project, use the following command
$ ionic setup sass
This will enable you to customise different variables used in
theming and layouting the different components. These can
be found in the _variables.scss file.
See for more
information
ionicframework.com/docs/cli/sass.html
35. INSTALL DEPENDENCIES
$ npm install karma --save-dev
$ npm install karma-jasmine --save-dev
$ bower install angular-mocks#1.4.3 --save-dev
$ npm install -g karma-cli
$ npm install -g phantomjs
Attention: the version of angular-mocks needs to be the same
of the version of AngularJS used in your Ionic setup
36. CONFIGURATION
$ mkdir -p tests/unit-tests
$ cd tests
$ karma init unit-tests.conf.js
Hit enter for all questions except:
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next
> PhantomJS
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> ../www/lib/ionic/js/ionic.bundle.js
> ../www/app.js
> ../www/lib/angular-mocks/angular-mocks.js
> ../www/projects/*.js
> unit-tests/**/*.js