Create Mobile Apps Using Ionic

Mobile Apps Using Ionic Framework

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS and Javascript. Ionic is focused mainly on the look and feel of UI interaction of your app.

How to Install Ionic Framework

Ionic apps are created and developed through the Ionic Command Line Utility (CLI). It also uses Cordova to build the app.

• Node.js -The first step is to download and install NodeJS. Following are the steps to install NodeJS on windows.
  1. Go to the NodeJS website and download the version of the NodeJS

     

  2. Run the appropriate installer. Node.js setup screen will appear. Just click on next.

     

  3. Accept the License Agreement and click next

     

  4. Choose the location for NodeJS and click next.

     

  5. Custom Setup: – Select the way you want to features to be installed and click next.
     

     

  6. Click on install to begin the installation.

     • 

  7. Node.JS has been successfully installed and click on finish.
     • 

  8. To verify that you have installed node.js correctly on a Window machine, than open command prompt and run the command node -v.
• Ionic Cordova: – Open up the command prompt and use the command npm install -g cordova. This installs all the cordova dependencies that ionic needs to run.

After installing Node.js and Ionic CLI v3, you can generate a new project using your terminal or command prompt. To create Apps in ionic, you can choose from the following 3 options:-

1. Tabs Apps
2. Blank Apps
3. SideMenu Apps

Tab App :- Tabs make it easy to navigate between different pages or functional aspects of an application. Example of Tab App : –

Open command window and choose where you want to create your app.

C:\users\Admin>cd desktop

Now we have to create a Ionic App folder. Use the below command.

ionic start Tab tabs

Start will tell the CLI create a new app. Tab will be the directory name and the app name from your project. tabs is a simple 3 tab layout.

It will take some time to run. When it is done; it will have generated a new folder Tab

Open the Editor, than go in the file src/pages/home/home.html.

<ion header>
<ion navbar>
   <ion-title>Home</ion-title>
</ion navbar>
</ion header>
<ion-content padding>
   <h1> Hello World</h1>
</ion-content>

We can now test the application using the browser. In the command prompt change the directory to your app folder and use the serve command to run the app.

cd Tab

ionic serve

output: –

Blank App: – It is a bare starter with a single page. Example of Tab App : –

Open command window and choose where you want to create your app. C:\users\Admin>cd desktop

Now we have to create a Ionic App folder. Use the below command.

ionic start Blank blank

Open the Editor, than go in the file src/pages/home/home.html.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <p>
    HelloWorld
    </p>
</ion-content>

We can now test the application using the browser. In the command prompt change the directory to your app folder and use the serve command to run the app.

cd Blank

ionic serve

Output: –

SideMenu apps: – The menu component is a navigation drawer that slides in from the side of the current view. By default, its slides in from the left, but the side can be overridden. Example of SideMenu apps:-

Open command window and choose where you want to create your app. C:\users\Admin>cd desktop

Now we have to create a Ionic App folder. Use the below command.

ionic start SideMenu sidemenu

Open the Editor, than go in the file src/pages/home/home.html.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>HelloWorld</h3>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

We can now test the application using the browser. In the command prompt change the directory to your app folder and use the serve command to run the app.

cd SideMenu

ionic serve