Over the last two years, millions of developers from nearly every industry around world have built over millions of mobile apps with Ionic. But with Ionic is just not completely well handled hybrid application. So they have made so many changes day by day and here it comes Ionic 2
With Ionic 2, they’ve gone back to square one and completely rethought how a mobile toolkit should work. Ionic 2 dramatically improved performance, reduced the complexity of the code you need to write, and made it possible to build completely bespoke apps that compete with the best apps in the world.
Some Simple Tips of Ionic 2 for beginners.
Install Ionic 2 :
To create Ionic projects, you’ll need to install the latest version of the CLI and Cordova. Before you do that, you’ll need a recent version of Node.js. Download the installer for Node.js 6 or greater and then proceed to install the Ionic CLI and Cordova for native app development:
$ npm install -g ionic cordova
It will take some time, Once it is done you can start create your own application by adding this Command in your cmd:
$ ionic start MyApp
This will create your project and you can start your project run by adding:
$ ionic serve
Even you can get specific UI component Interface when you create a project, like if you need an application with tab interface you can add:
$ ionic start MyApp tabs
Three types of ready made app interfaces:
Even you can create it for all type of devices including web(But it’s little bit complex) Now you have got the app running in any browser which you can test it locally, when you made changes it would automatically changes in browser too.
If you want hamburger instead of back button do this :
For back button :
<ion-header> <ion-toolbar> <ion-navbar> <button ion-button menuToggle left> <ion-icon name=”menu”></ion-icon> </button> <ion-title> <ion-icon name=”date”></ion-icon> Logo </ion-title> </ion-navbar> <ion-buttons end> <button ion-button><ion-icon ios=”ios-home” md=”md-home”></ion-icon> </button> </ion-buttons> </ion-toolbar> </ion-header>
<ion-header> <ion-toolbar> <ion-buttons end> <button ion-button> <ion-icon name=”contact”></ion-icon> </button> </ion-buttons> <button ion-button menuToggle left> <ion-icon name=”menu”></ion-icon> </button> <ion-title >Union Yoga</ion-title> </ion-toolbar> </ion-header>
Menu toggle will help you to access the side bar menu and you can customize like you design. Here is my sidebar design:
For native component access you have to add platform first in your project(Platform is IOS, Android). For that you have to check whether your java is updated, you need to install android studio and have add path in system variables.
Then for adding platform in your project, just add:
$ ionic cordova platform add ios $ ionic cordova platform add android
Test it out
Just to make sure the default project worked, try building and running the project (substitute ios for android to build for Android instead):
$ ionic cordova build ios $ ionic cordova emulate ios
By the way you need a mac to test IOS There are lot of other templating, components, tricks are there, will come with another detailed blog about another work.
Please go through the Ionic website for more information:
Ion Native : http://ionicframework.com/docs/native/
Ionic Components : http://ionicframework.com/docs/components/
Ionic Theming : http://ionicframework.com/docs/theming/