Ionic is a framework for developing mobile applications with HTML, CSS, and JavaScript. Ionic applications run as native applications and have a native "look and feel".

Ionic is built on the AngularJS framework and provides a complete solution to design, build, and package mobile applications. Design is accomplished with a collection of template tools and a custom icon library. Ionic provides custom CSS/SASS components as well as Javascript UI Extensions. Ionic apps can be built, emulated, and packaged with their Command Line Interface (CLI).

Ionic templates are dynamic and responsive and adapt to their environment to provide a native "look and feel". This adaptation includes layout, style, and icons. Ionic makes independent platform customization available as well. Because Ionic apps use front end web technology, they can also be viewed in a browser for faster development.

Ionic apps are built on top of Apache Cordova by default. They have access to all Cordova Plugins which let you use native functionality, such as push notifications, camera, accelerometer, etc. Cordova apps work on multiple platforms and devices (phones, tablets, etc.) with very little extra effort. Cordova may be switched out with other cross-platform technologies such as trigger.io.

Testing of native device features like Camera, Vibration and others, many of which are found in the documentation of Ionic Native, cannot be done in the browser. This is an inherent limitation of the fact that Cordova, the platform on which Ionic depends to be able to access native Android, iOS, and Windows Mobile APIs of a device, cannot run on the browser.

One can work around this issue by mocking the functionality of the native plugin.

Example

Here's an example on how to mock the Camera plugin:

Go ahead and create an optional folder in your project root folder.

cd src
mkdir mocks 
cd mocks 
touch camera-mock.ts 

Open camera-mock.ts and copy paste the following code:

export class CameraMock {
    getPicture(params) {
        return new Promise((resolve, reject) => {
            resolve("BASE_64_IMAGE_DATA");
        });
    }
}

Next open src/app.module.ts and import the mock class"

import { CameraMock } from "../mocks/camera-mock";

Then add it to module providers array:

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    CameraMock,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Now you can use it in any component after importing it.

Linting your ionic app before running has huge advantages. It will analyse code for potential errors and save you tremendous amount of time.

What is linting and how to install the required packages?

"Linting is the process of running a program that will analyse code for potential errors." - see What is "Linting"?

Your ionic app comes with a package.json file. Go to the root of you app in a Command Line/Terminal and install the following packages:

npm install jshint --save-dev
npm install jshint-stylish --save-dev
npm install gulp-jshint --save-dev

In the modern web development it's common practice to use fonts to display icons. Since fonts are vectors, they are resolution independent and can be easily colored through CSS, just to name a few advantages compared to bitmap images etc. Ionicons was created by the same team that Ionic Framework was created by and can be used in any project since they are 100% free and open source. MIT Licensed.

Ionicons can be used on their own or with Ionics CSS components when they have certain styles according to the parent elements.

The homepage and list of the icons can be found here: http://ionicons.com/

Introduction

Hooks are pieces of code that Cordova CLI executes at certain points in your Cordova/Ionic application build. Hooks can be used for example to manipulate files in our project, automatically add plugins into your application or as in the example above check for code errors in your files.

Note: It is highly recommended writing your hooks using Node.js so that they are cross-platform but you can write them also for example in Javascript.

Hook types

The following hook types are supported and execution order is quite self-explanatory according to the name.

after_build
after_compile
after_docs
after_emulate
after_platform_add
after_platform_rm
after_platform_ls
after_plugin_add
after_plugin_ls
after_plugin_rm
after_plugin_search
after_prepare
after_run
after_serve
before_build
before_compile
before_docs
before_emulate
before_platform_add
before_platform_rm
before_platform_ls
before_plugin_add
before_plugin_ls
before_plugin_rm
before_plugin_search
before_prepare
before_run
before_serve
pre_package/ <-- Applicable to Windows 8 and Windows Phone only. This hook is deprecated.

Ways to define hooks:

Hooks could be defined in project's config.xml using <hook> elements, for example:

<hook type="after_build" src="scripts/appAfterBuild.js" />

As a plugin developer you can define hook scripts using <hook> elements in a plugin.xml like this:

<hook type="after_build" src="scripts/afterBuild.js" />

before_plugin_install, after_plugin_install, before_plugin_uninstall plugin hooks will be fired exclusively for the plugin being installed/uninstalled.

Note: Placing hooks in the root/hooks directory is considered deprecated in favor of the hook elements in config.xml and plugin.xml. If you however use this approach remember to set execute rights to the files in the root/hooks folder.

Documentation for Cordova Hooks can be found here.

Ionic has a lot of great ready declared CSS components to make your life easier while coding your next hybrid mobile application. These components vary from a basic grid system to styling your forms. These components are in your use if you choose to install Ionic with the pre-set CSS stylesheets.

One of the basic functions that Ionic CSS brings to your hand is that it comes with a set of colors to start with, but as a general rule colors are meant to be overridden. Utility colors are added to help set a naming convention. You could call it a basic theme of the application. To customize the colors you can simply override those coming from the ionic.css CSS file. Additionally, since Ionic is built using Sass, for more power and flexibility you could also modify and extend the color variables within the _variables.scss file.

You can setup an Ionic project to use SASS very easily by running the ionic setup sass command in your terminal.

You can find the official documentation on Ionic CSS here: http://ionicframework.com/docs/components/

also refer this link