Tag: ionic

What is IONIC :

It is an open source platform to make hybrid application. Hybrid applications are those who takes single language to make an app and which will run on all types of mobile devices. Some clients prefer to make hybrid application because of cost. And small applications are easy to go with hybrid.

How Start with IONIC

  • First Install Node.js package into machine.

https://nodejs.org/en/download/

  • Install IONIC, Open command prompt or terminal and use below command

npm install -g ionic cordova

  • After successfully installed, Create new app. For that, from same command prompt or terminal go to folder location where you want to create project. And run below command

ionic start app_name

After this it will ask for project type like, blank, tab, tutorial etc.

Select your option using down and up arrow keys and press Enter.

It will again take some time and will create project into that location.

  • Now Check newly created app on browser by running below command.

ionic serve

It will run project on browser with full screen. And If you want to run project like mobile device interface then       

run below command

ionic serve –lab

It will open project into mobile interface screen with ios, android and windows.

  • Now you can check project structure from project location. You will get

Config.xml : Here if you need any plugin to be install then you can add. Or any  hardware setting should be go here.

Resources : We need to add all resources inside this folder.

Src       : Our all functionality will go from this folder. You can find various folders inside it. Check those you will get an idea what it does.

  • Now try to create new views.

ionic g page page_title

It will generate all necessary files into “page_title” folder like its model, view and controller

But to access it you need to import file into “app.component.ts” and “app.module.ts”. After checking  those files you will come to know where to change.

  • Now you can edit those view as per your requirement.
  • Run your app on android device

ionic cordova run android –device

But make sure you have enable USB debugging and Developer Mode on your android device

  • To make production build, you need to run below command

ionic cordova run android –prod –release
# or
ionic cordova build android –prod –release

  • In this way you can successfully create your first app in ionic

 

If you feel this blog is really helpful for you then do comment. Thank you.

 

 

Read More Beginning with IONIC 2

Mobile Development