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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ionic Basic Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body>
</body>
</html>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.
- First create login.html file in templates folder.
- Now go to js > app.js. In this file add following code snippet:
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html'
}
}
})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.
$urlRouterProvider.otherwise('/app/login');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.
<ion-modal-view>
<ion-content>
<div class="text-center login-block">
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<input type="email" placeholder="Email address"/>
</label>
<label class="item item-input">
<input type="password" placeholder="Password"/>
</label>
<a ui-sref="app.change-password">Forgot Password ?</a>
<a>Don’t have an account ?</a>
<label class="item">
<button class="button button-block button-positive" type="submit">Login</button>
</label>
</div>
</form>
</div>
</ion-content>
</ion-modal-view>Every time when we create new template we are suppose to write our code within
<ion-modal-view> <ion-content> </ion-content> </ion-modal-view>
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.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<div class="header-inner">
<a menu-close href="#/app/login" class="logout-btn">Logout</a>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="register" menu-close href="#/app/register">
Register
</ion-item>
<ion-item class="change-password" menu-close href="#/app/change-password">
Change Password
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>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
