Getting Started with Ionic Framework
1)Introduction:
A)Ionic is open source framework used for developing mobile applications. It provides tools and services for building mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices.B)This tutorial is created for JavaScript developers that are new to mobile development. It provides simple, easy to understand explanations with useful working examples. We will go through most of the Ionic framework so you can also use this as a reference for your projects.
C)The ionic Framework provide a easy to and build Hybrid apps using MVC model with angularjs and connect with real data super quick.
2)Prerequisites
Since Ionic is built on top of AngularJS and Apache Cordova you will need to have basic knowledge about these technologies. You also need to be familiar with HTML, CSS and JavaScript if you want to completely understand all the information provided.Setting Up Ionic and Cordova requires Node.js
Step 1)Setting Up Node.js
Follow the link to download the Node.js for required platform from
Note:Dont Forget to include the bin package in environment variable.
Step 2)
Installing Ionic and cordova using Node package manager (NPM)
Type the command:
npm install -g cordova ionic
Let the dependencies download gets completed and we are ready to begin developing our first app.
3)Developing a Basic Template
Ionic provides three type of basic template to start with- Tabs App:
- Blank App:
- Side menu App:
In your command window open the folder where you want to create your app and try one of the options mentioned below.
Tabs App:
If you want to use Ionic tabs template your app will be built with tab menu, header and couple of useful screens and functionalities. This is default Ionic template. Open your command window and choose where you want to create your app.
ionic start myApp tabs
Quick tip:
"How to configure cordova to android emulator :"
Now let's add Cordova project for android Platform and install basic cordova plugins. This step allows us to run the app on Android emulator or device.
ionic platform add android
Next let's build our first basic app. If you have building errors after running following command you probably didn't install android SDK and its dependencies.
ionic build android
The last step of the installation process is to run your app which will start the mobile device if connected or default emulator if there is no device connected. Android default emulator is slow so I suggest you to install Genymotion or some other popular Android emulator.
ionic run android
This will produce below result which is an Ionic Tabs App.
Full list of Ionic starter templates
Start with a blank Ionic template$ ionic start appName blank
Start with an Ionic tabs template
$ ionic start appName tabs
Start with a side menu Ionic template
$ ionic start myApp sidemenu
Start with an Ionic maps template
$ ionic start myApp maps
Start with an Ionic push notification template
$ ionic start myApp push
Start with an Ionic analytics template
$ ionic start myApp analytics
Start with an Ionic salesforce template
$ ionic start myApp salesforce
Start with an app containing ionic.io services
$ ionic start myApp io
Start with an app containing Ionic deploy
$ ionic start myApp deploy
A test of different kinds of page navigation
$ ionic start myApp tests
A complex list starter template
$ ionic start myApp complex list
Note:You can view in the browser by hitting the url http://192.168.0.119:8100/#/tab/dash
$Ionic serve
What's Next ?
Ionic 2 is an evolutionary step from Ionic 1 that reduces the amount of code and polishes the user interface. The full catalogue of Ionic components on iOS and Android feel and look even more native than Ionic 1. Angular 2 brings huge performance increases and neat things like observables to make your app more dynamic and responsive.
We will build a sample example with ionic compenents which will provide you a clear idea about feature of ionic and binding with angular.js
Happy Coding!
EmoticonEmoticon