Getting Started with the Ionic framework
Overview
Welcome! Ionic is a powerful open source HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML5, Sass, CSS, and Javascript.
Ionic framework mainly built for the UI – interaction of the app ionic frameworks pre defined UI sets helps to create stunning app in quick time.
Ionic framework built with AngularJS and Apache Cordova, Ionic apps can be distributed through native app stores like (apple store and google play store) .
Ionic was founded by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.
Install Ionic
Ionic frameworks includes compiled Javascript AngularJS and CSS styles , JS framework extension and large pack of ion icons that will make the app development process a lot easier.
Ionic framework needs NodeJs and Apache Cordova and npm
Install NodeJS and npm then use the following commands to install Cordova
$ sudo npm install -g cordova
Then
Install Ionic framework as global in your system
$ sudo npm install -g ionic
Create new project
Now, all related software programs are installed, and we need to create new Ionic Cordova project, use the following command for that.
$ ionic start sampleapp blank
That will create a folder called sampleapp in the directory where the command was run. Next, we will go into that directory and list the contents. The folder structure of Ionic app will look like the following.
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application – JS code and libs, CSS, images, etc.
Configure Platforms
And we need to configure the application platform (IOS or Android) use the following commands for that:
$ ionic platform add ios
or
$ ionic platform add android
Starting your app
Now, every related softwares installed and app configured let’s start the real app
The sampleapp is just outline blank page with side bar, we can start with Ionic with this.
Ionic app is basically a web page, every app must have an index.html file in our app folder which defines the first page that loads in the app. Let’s create www/index.html and initialize it with this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample App</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> <script src="js/app.js"></script> </head> <body> </body> </html>
Initializing the app
For starting ionic app we need to create AngularJS module and initialize it. Let’s create a new file located at www/js/app.js. Put this code into the file:
angular.module(‘sampleapp’ , [‘ionic’])
We have already included the app.js file in the index.html after the loading of Cordova file . Because Angular module uses ng-cordova functions for certain modules.
For run our app, we need to add the ng-app attribute to the body tag:
<body ng-app="‘sampleapp’">
And we need to add some sidebar content of mobile app in the first page, for that, we can use the following HTML codes.
<body ng-app="‘sampleapp’"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body>
Test your app
They are several methods to test our ionic app first one is Browser test, second one is simulator test, third one is build then test with respected platform, fourth one is test with phone’s browser.
Desktop browser testing
For testing the Ionic app in your browser, you need to run the following commands in command line
$ ionic serve
Simulator testing
For simulator testing, we need to build first and then simulate you can use the following to test with simulator
For ios
$ ionic build ios $ ionic emulate ios
For Android
$ ionic build android $ ionic emulate android
You can build as native app for that you can use the following command:
$ ionic run android
This post is just an introduction to the Ionic framework. I intend to create a sample app with this framework with my next post, kindly leave your valuable comments. Have a great day, happy coding !
- Share this
