How to integrate HTML with Ionic

Click To Download Full Source Code

Getting started with Ionic Framework

Ionic is an advanced HTML5 Mobile App framework which is built most probably using Angular JS and web technologies like HTML, CSS and Sass. It is also well known as Advanced HTML5 Hybrid Mobile App Framework.

Ionic framework is also useful to make Mobile App Designs. It has it’s own Grids, CSS Components, Icons Library etc kind of like “Bootstrap”.

Basic Folder structure needed for Startup

Basically the folder structure or folder hierarchy for Basic Ionic Startup is somewhat like Bootstrap’s folder hierarchy or same like any other Framework.

Please refer below screenshot for Folder Hierarchy:


Every Ionic app is a simple web page. The default index.html file has following structure:

Also, Ionic comes with compiled Javascript and CSS for mobile apps, optional Sass files and JS Framework extensions, along with a great icon pack.

More about Ionic Framework

As mentioned above Ionic has it’s own components, Icons has it’s amazing grid structure which helps developers to also create 5 Grid structure. That is somewhat impossible with Bootstrap or any other Responsive Framework that we all know. Let’s have a look to basic grid structure, CSS components, etc.

Basic Grid Structure for Ionic
Basically there are 12 Grid structure that we use. Here, for Ionic the default grid class is “col”. For example, if we want to create 2 columns side by side we have to add 2 blocks having class “col”.

Other than this there are some more classes for grids. Let’s have a look on it.

Explicit Column Percentage Class names

.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%

As shown in above table, we can assume how 5 Grid structure is possible with Ionic.

Let’s look at one example below:

If I want to create 2 columns one with 75% width and second with 25% width, how will I do this?


Getting Started with Ionic App

Following are the basic steps to follow while creating your First App in Ionic:

Step 1:

Setup your project within any editor you used like Eclipse, Netbeans, etc.


Step 2:

The default web page file i.e. index.html file already exists. Now if you want to create new page you just have to add HTML page in templates folder. The another important part is that when you create any HTML page in templates folder you have to add that file’s name as menu item in app.js file.

For example, Let’s create simple Login Page.

  1. First create login.html file in templates folder.
  2. Now go to js > app.js. In this file add following code snippet:

Which creates template url for you, also registers it as a menu item.

Step 3:

Now if you want to load login page every time when you open the link in browser then you just have to write following code.  It will load the login page as default page every time whenever you load the page in simple browser window.

Here if you have to add another page you just have to rename /login with your specific template name.

Step 4:

Now What we have to do in login.html file ? Let’s have a look.

Every time when we create new template we are suppose to write our code within

That’s it. Now you can play with HTML code within these two blocks.

Step 5:

Till now we have discussed about basic HTML structure with Ionic but what we have to do if we have to create menu with in Ionic.

Let’s have a look at following menu code.

This will create the stable sliding menu for your app.


Step 6:

From all these above steps, the basic question arrives in every mind is how to test the stuff that we have done here with the help of browser. This is as simple as we have run any file in browser window. Just run the index.html file of your app in browser. When you run your index file the Login page is first loaded. If you want to run any other page just change the template name shown in address bar.


Click To Download Full Source Code

Hitarthi Suthar

Hitarthi Suthar | Sr. Web Designer

I am a Sr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am passionate about my work as I like to explore new technologies and methods related to my profile. I am fond of craft and painting.

Hitarthi Suthar Sr. Web Designer

Hitarthi was a Sr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. She is passionate about her work as she like to explore new technologies and methods related to her profile. She is fond of craft and painting.

Comments are closed.