Getting Started with Ionic

Ionic is front end HTML framework built on top of AngularJS and Apache Cordova. Officially following is the definition of the Ionic Framework:

Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Think of Ionic as the front-end UI framework that handles all the look and feel and UI interactions your app needs in order to be compelling. Kind of like “Bootstrap for Native,” but with support for a broad range of common native mobile components, slick animations, and beautiful design.


Ionic Framework Components:
1. AngularJS
Ionic is based on AngularJS. It is using AngularJS MVC architecture for building optimized applications for mobile devices.

2. CSS components
This Section of Ionic covers native look and feel, and almost all elements that mobile application needs. Ionic components default styling can be easily overridden to get our own design.

3. JavaScript components
These components are extending CSS components with JavaScript functionalities to cover all mobile elements things that can’t be done alone with HTML and CSS.

4. Cordova Plugins
Apache Cordova plugins offer API needed for native device functions with JavaScript code that can easyly be use Ionic Applications.

5. Ionic CLI
Ionic CLI is a NodeJS based command line utility powered with commands for initializing, building, running and emulating Ionic applications.

6. Ionic View
Its a very useful platform for uploading, sharing and testing your application on native devices.


Prerequisite:

  • You must have NodeJS Install
  • You must have Native SDK install (Like Android SDK)
  • You must have basic understanding with HTML
  • You must have basic understanding with CSS
  • You must have basic understanding with JavaScript
  • You must have basic understanding with AngularJS

Start App building with Ionic
1. Install Ionic
First Install Node.js, Then, install the latest Apache Cordova and Ionic command-line tools.

$ npm install -g cordova ionic

2. Start(Initialize) Ionic App
Create an Ionic App using one of ionic ready-made app templates (Tabs, Sidemenu etc.), or a blank one to start fresh.

$ ionic start myApp tabs

Ionic Templates
$ ionic start myApp blank
$ ionic start myApp tabs
$ ionic start myApp sidemenu

2. Run Ionic App
Use the Ionic command line utility tool to build, test, and run ionic apps (or use Cordova directly). Make sure to substitute android with ios to build for iOS.

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

psbhanu

Bhanu PS (psbhanu) is professionally a software engineer and loves helping people plan, develop, and launch applications.

He has spent the majority of his career in the application development industry, gaining experiences in areas such as web, network, mobile and game application development.

While managing and developing applications is his primary job function by day, psbhanu also love to write poems, blogs, tutorials, research and articles.

He also enjoys spending time with his family and loved ones.

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.