Mastering Hybrid apps with Ionic and Angular js







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.


Happy Coding!






Alll the world is a laboratory to the inquiring mind! Join Us

Comments

Popular posts from this blog

Android Navigation Drawer sliding menu with fragments

Design a Beautiful Login Screen for your Android App

Android Actionbar Navigating with Swipeable Tabs