Ionic is open source framework used for developing mobile applications. It provides tools and services for building mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices.

 

Ionic is open source framework used for developing mobile applications. It provides tools and services for building mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices.

Since Ionic is built on top of AngularJS and Apache Cordova you will need to have basic knowledge about these technologies. You also need to be familiar with HTML, CSS and JavaScript if you want to completely understand all the information provided.

Defination:

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 Features

  • AngularJS

Ionic is using AngularJS MVC architecture for building rich single page applications optimized for mobile devices.

  • CSS components

With native look and feel, these components offer almost all elements that mobile application needs. Components default styling can be easily overridden to accommodate your own design.

  • JavaScript components

These components are extending CSS components with JavaScript functionalities to cover all mobile elements that can't be done only with HTML and CSS.

  • Cordova Plugins

Apache Cordova plugins offer API needed for using native device functions with JavaScript code.

  • Ionic CLI

This is NodeJS utility powered with commands for starting, building, running and emulating Ionic applications.

Ionic Framework Advantages:

Ionic is used for hybrid app development. This means that you can package your applications for IOS, Android, Windows Phone and Firefox OS which can save you a lot of working time.

There are following components needed to start with Ionic:

1. Nodejs

2. Android SDK

3. Coradova and Ionic

We are using window command prompt for installing the above component.

1. First install node.js  : Download the latest package as per your system configuration and install it.Make sure while installing node.js ,NPM package should be installed.check the command for testing node is installed or not.

Command : node –v -> it will give you the node version number

2. Install cordova : $ npm install -g cordova ionic

Run the above command for installing the cordova component.

3. Start A project :After installing nodejs and cordova .You need to run the below command for creating new project. 
$ ionic start MYProject tabs
$ ionic start myApp blank
$ ionic start myApp sidemenu

You can run any one of command to create a project.

First one will create project with tabs default templates.

Second one will create project with blank screen.

Third one will create project witg side menu templates.

After Run this command.Project will be created under MyProject folder.

4. Run Project:

Use the Ionic tool to build, test, and run your apps (or use Cordova directly).

$cd MYProject
$ionic platform add android
$ionic build android
Folder Structure Of Ionic:

Hooks: Hooks are scripts that can be triggered during build process.

Platforms : This is the folder where Android and IOS projects are created

Plugins : This folder contains Cordova plugins. When you initially create Ionic app some of the plugins will be installed

Resources: This folder is used for adding resources like icon and splash screen to your project.

Scss  Since Ionic core is built with Sass this is the folder where your Sass file is located.

www : www is main working folder for Ionic developers. You will spend most of your time here. Ionic gives us their default folder structure inside 'www' but you can always change it to accommodate your own needs

Css : for css styling

Js: Contains apps main configuration file (app.js) and AngularJS components (controllers, services, directives). All of your Javascript code will be inside these folders.

Libs : All library files.

Templates: For html files.

index.html: starting point to your app.

bowerrc is bower configuration file.

editorconfig is editor configuration file.

gitignore is used to instruct what part of the app should be ignored when you want to push your app to Git repository.

bower.json will contain bower components and dependencies if you choose to use bower package manager.

gulpfile.js is used for creating automated tasks using gulp task manager.

config.xml is Cordova configuration file.

package.json contains information about the app, dependencies and plugins that are installed using NPM package manager.