---
title: 'Ionic 2/3 CLI Reference'
date: '2017-12-19'
thumbnail: '/thumbnails/ionic.png'
slug: 'ionic-2-3-cli-reference'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/ionic-2-3-cli-reference-13f9fae3f964'
---

> [Originally Published at Hackernoon.com](https://medium.com/hackernoon/ionic-2-3-cli-reference-13f9fae3f964)

> _The Ionic CLI is your go-to tool for developing Ionic apps._

Ionic CLI is a great tool when it comes to avoid writing a lot of boilerplate code. It generates pages, services, can run or emulate your Ionic application with and generate needed resources for the mobile application such as splash screen.

This is a quick reference into Ionic CLI.

### Installing the CLI Tool

You can install it with npm:

```shell
$ npm install -g ionic
```

To check if it has installed correctly, in your terminal window, type:

```shell
$ ionic info

global packages:

    @ionic/cli-utils : 1.3.0
    Ionic CLI        : 3.3.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.1 Build version 8B62
    ios-deploy : not installed
    ios-sim    : not installed
```

### Starting a new App

To start with a new mobile application, Ionic framework provides different set of ready-to-use templates:

```shell
$ ionic start --list

tabs ............... ionic-angular A starting project with a simple tabbed interface
blank .............. ionic-angular A blank starter project
sidemenu ........... ionic-angular A starting project with
                    a side menu with navigation in the content area
super .............. ionic-angular A starting project
                    complete with pre-built pages,
                    providers and best practices
                    for Ionic development.
conference ......... ionic-angular A project that
                    demonstrates a realworld application
tutorial ........... ionic-angular A tutorial based
                      project that goes along with the
                      Ionic documentation
aws ................ ionic-angular AWS Mobile Hub Starter
```

For creating a new project:

```shell
$ ionic start my-new-app blank
```

_With update to Ionic 3, no more adding tags such as_ `_--v2_` _after the template name in the above command. By default, Ionic app generated will be of version 2/3. To generate an Ionic app of version 1 (with good ol' Angularjs):_

```shell
$ ionic start my-new-app blank --v1
```

### Serving

Once you `cd` into your project’s directory, serve your app on your local machine with `serve`:

```shell
$ ionic serve
```

To serve on a different port:

```shell
$ ionic serve --port 9100
```

Use `–-lab` tag to see your app side by side on multiple platforms (such as iOS, Android and Windows Mobile):

```shell
$ ionic serve --lab
```

To serve without live reload:

```shell
$ ionic serve --nolivereload
```

### Generating Providers and Pages

To generate a new page:

```shell
$ ionic  g page Page2
```

To generate a provider/service:

```shell
$ ionic g provider DataService
```

Know them all- List the available generators:

```shell
$ ionic g --list
```

### Generating Resources

To generate the app icon and splash screen with resources:

```shell
$ ionic cordova resources
```

To generate just the app icon:

```shell
$ ionic cordova resources --icon
```

Or, just the splash screen:

```shell
$ ionic cordova resources --splash
```

Now, generate resources for a specific platform:

```shell
$ ionic cordova resources android
```

## Add Ionic Plugins

```shell
$ ionic cordova plugin [action] [plugin]

# Example
$ ionic cordova plugin add cordova-plugin-x-socialsharing
```

### Adding Platform

To add a target mobile platform for the app to use:

```shell
$ ionic cordova add android
```

### App on an Emulator

To start an emulator:

```shell
$ ionic cordova emulate ios
```

Emulate with livereload:

```shell
$ ionic cordova emulate ios --livereload
```

### Running Ionic App on a Connected Device

Let’s say, I have an iOS device connected, so to run the app on that device:

```shell
$ ionic cordova run ios --device
```

Production check:

```shell
$ ionic cordova run android --prod --release
```

### Git Initialisation

Another advantage of using Ionic CLI tool is that it initialises a git repository when creating an Ionic project using the `ionic start` command from the terminal with an `initial commit` already. You can verify that by running:

```shell
$ git log --oneline --graph --decorate --color

# Output
* 029f86e (HEAD -> master) Initial commit
```


Ionic 2/3 CLI Reference

---
date: '2017-12-03'
title: 'Passing Data Between Pages in an Ionic Application'
thumbnail: '/thumbnails/ionic.png'
slug: 'passing-data-between-pages-in-an-ionic-application'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/passing-data-between-pages-in-an-ionic-application-129b387c93b8'
---

In the previous posts, we have seen [how to setup a basic navigation between multiple Ionic app Pages](https://hackernoon.com/https-medium-com-amanhimself-basic-navigation-in-ionic-applications-ecb199cdf15b). This post concerns what if you want to send some data from the previous page to the next page in the stack? For the Ionic provides `NavParams` class to transfer data from one page to another.

### Generate the application

In this demo application we will first setup a home page with a text box to enter data that will be transfered to the next page. First, let’s generate a new Ionic application:

```shell
$ ionic start -a 'Passing Data between Pages' -i
app.passdata.pages ionic-pass-data-pages blank
```

Create a new about page:

```shell
$ ionic g page about
```

And lastly, to complete our setup, we must add about page in the app module:

```ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';

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

### Add Input Text in Home Page

Then we will update `home.html`:

```html
<ion-header>
  <ion-navbar>
    <ion-title> Passing Data in Pages </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Enter</ion-label>
      <ion-input placeholder="Your fav color..." #color></ion-input>
    </ion-item>
  </ion-list>
  <button
    ion-button
    color="secondary"
    (click)="goTo(color.
  value)"
  >
    About Page
  </button>
</ion-content>
```

`#color` is a local variable whose value we will be referencing to pass on to the next page in our navigation stack. We will now update our `home.ts` with business logic behind the only click event in our template:

```ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from './../about/about';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  goTo(color) {
    color = color || 'No Color Entered';

    this.navCtrl.push(AboutPage, {
      data: color
    });
  }
}
```

Note the second argument in `this.navCtrl.push()` which is being used to pass the data.

### About Page

To Pass data from Home page to About page we will need to import `NavParams` class. Since, I am using Ionic CLI to generate pages, class `NavParams` will already be imported in the about page.

```ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  color: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.color = navParams.get('data');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }
}
```

### Display Fetched Data

To catch the data from the previous page in the navigation stack, we are using `get()` method of `NavParams` class. We fetch data inside the constructor function of `AboutPage` class.

Finally, to display data on about page:

```html
<ion-header>
  <ion-navbar>
    <ion-title>About</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <label>Color Entered: {{color}}</label>
</ion-content>
```

### Summary

Here are some screenshots:

Home Page:

<img src='https://cdn-images-1.medium.com/max/800/0*eftZuH7QmZQqs4-Y.png' />

User Input being entered:

<img src='https://cdn-images-1.medium.com/max/800/0*g25oMDTJV3TS7mTB.png' />

Data passed form Home Page displayed on About Page:

<img src='https://cdn-images-1.medium.com/max/800/0*ay_xx0zGGCDDuXXY.png' />

When nothing entered in the input field, a default text passed and displayed:

<img src='https://cdn-images-1.medium.com/max/800/0*5lhp42R9R5pQVjSi.png' />

_To get the full code of this demo app, you can visit_ [**this Github Repository**](https://github.com/amandeepmittal/ionic-pass-data-pages).

> [Originally Published at Hackernoon.com](https://medium.com/hackernoon/passing-data-between-pages-in-an-ionic-application-129b387c93b8)


Passing Data Between Pages in an Ionic Application

---
date: '2017-11-19'
title: 'Multi Page Navigation in an Ionic App'
thumbnail: '/thumbnails/ionic.png'
slug: 'multi-page-navigation-in-an-ionic-app'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/multi-page-navigation-in-an-ionic-app-8b008f616cdb'
---

Ionic makes it easy to create multiple pages navigation using `NavController` as the genesis of navigation stack. In this little application, I will try to make the concept clear to you.

### Generate Application and Pages

To start with, let’s create a new Ionic app for this showcase. Follow along with me. To get started, we have to scaffold a new project, my favorite one-to-go Ionic CLI command:

```shell
ionic start -a 'Multi Page Navigation'
-i app.multipage.nav ionic-multi-page-nav blank
```

`cd` in to the new project created by the above Ionic CLI command and run `ionic serve` to see the blank template with just a homepage available. We will create two new pages in this application to showcase our motive.

To read about the basic Navigation in an Ionic app, see this.

Now, with the help of Ionic CLI, let’s generate two new pages before diving into our code base.

```shell
$ ionic g page page1
$ ionic g page page2
```

I am naming the two new pages generic but you can name them anything you want. Just follow the convention when importing the modules. Inside the `app/pages` you can see, there are two new folders with the names we generated. Each have its own `.ts`, `.html` and `.scss` file, thus, completing a web component on which every Ionic and Angular apps are based on.

To proceed, we need to add both the pages in our `app.module.ts`:

```ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// new pages to be added in declarations and entryComponents
import { Page1Page } from '../pages/page1/page1';
import { Page2Page } from '../pages/page2/page2';

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

### Setup Home Page for Basic Navigation

As the `app.module.ts` is updated with our changes, the scope of the whole application can now access these two new pages. To implement the navigation between them, we have to first update our `home.html` with buttons that will navigate to a specific page and business logic behind those events in `home.ts`.

```html
<ion-header>
  <ion-navbar>
    <ion-title>Ionic Multi Page App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header> Home Page </ion-card-header>
    <ion-card-content>
      <button ion-button (click)="goTo('page1')">Page1</button>
      <button ion-button color="secondary" (click)="goTo('page2')">
        Page2
      </button>
      <button ion-button color="light" (click)="back()">Back</button>
    </ion-card-content>
  </ion-card>
</ion-content>
```

Let’s update `home.ts` as well.

```ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Page1Page } from '../page1/page1';
import { Page2Page } from '../page2/page2';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}

  goTo(page) {
    if (page === 'page1') {
      this.navCtrl.push(Page1Page);
    } else if (page === 'page2') {
      this.navCtrl.push(Page2Page);
    }
  }

  back() {
    if (this.navCtrl.length() >= 2) {
      this.navCtrl.pop();
    }
  }
}
```

The `goTo()` function will help us in navigating to the desired page and `back` button will bring us to the previous page in the navigation stack. This is important! I mentioned to the previous page, not the home page. If you are familiar with Ionic 1, this would how state will work.

### Updating Page1 and Page2

To continue to develop our demo application, we need to update our `Page1` and `Page2` components.

```html

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Multi Page App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header> Page 1 </ion-card-header>
    <ion-card-content>
      <button ion-button color="secondary" (click)="goTo('page2')">
        Page2
      </button>
      <button ion-button color="light" (click)="back()">Back</button>
    </ion-card-content>
  </ion-card>
</ion-content>
```

```ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Page2Page } from '../page2/page2';

@IonicPage()
@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1Page {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  goTo(page) {
    if (page === 'page2') {
      this.navCtrl.push(Page2Page);
    }
  }

  back() {
    if (this.navCtrl.length() >= 2) {
      this.navCtrl.pop();
    }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Page1Page');
  }
}
```

Similar for the `Page2`:

```html
<ion-header>
  <ion-navbar>
    <ion-title>Ionic Multi Page App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header> Page 2 </ion-card-header>
    <ion-card-content>
      <button ion-button (click)="goTo('page1')">Page1</button>
      <button ion-button color="light" (click)="back()">Back</button>
    </ion-card-content>
  </ion-card>
</ion-content>
```

```ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Page1Page } from '../page1/page1';

@IonicPage()
@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2Page {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  goTo(page) {
    if (page === 'page1') {
      this.navCtrl.push(Page1Page);
    }
  }

  back() {
    if (this.navCtrl.length() >= 2) {
      this.navCtrl.pop();
    }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Page2Page');
  }
}
```

### Running the App

If we save all the files and again from the terminal run:

```shell
$ ionic serve

# OR

$ ionic serve --lab
```

The output shown can be best described in these screenshots:

<img src='https://cdn-images-1.medium.com/max/800/0*sMnNW4P3ONmaUZCP.png' />

<img src='https://cdn-images-1.medium.com/max/800/0*iPNMEzroixe-Dmlj.png' />

<img src='https://cdn-images-1.medium.com/max/800/0*7oSIkMCTVC0JOaQ5.png' />

This is just a glimpse of how multi page navigation in Ionic might work that might help you to get started with development.

_To get the full code, you can visit_ [**this Github Repository**](https://github.com/amandeepmittal/ionic-multi-page-nav)

[Originally Published at Hackernoon.com](https://medium.com/hackernoon/multi-page-navigation-in-an-ionic-app-8b008f616cdb)

Multi Page Navigation in an Ionic App

---
date: '2017-11-09'
title: 'Using Google Fonts in an Ionic Application'
thumbnail: '/thumbnails/ionic.png'
slug: 'using-google-fonts-in-an-ionic-application'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/using-google-fonts-in-an-ionic-application-c3419c342f23'
---

In this post, I will be showing you to change font in any Ionic 2/3 application. To start with, I will be setting up a new ionic project such that you can refer back to on Github.

```shell
$ ionic start ionic-use-google-fonts blank
```

`cd` in to the new project created by the above Ionic CLI command and run `ionic serve` to see the blank template with just a homepage available. As of now, the Ionic application looks like this:

<img src='https://cdn-images-1.medium.com/max/800/0*WUHLVkBP7bifnV8E.png' />

The font here used in the application at global level is default. We will be changing it to [Revalia](https://fonts.google.com/specimen/Revalia). It’s just a random suggestion, you can pick whatever you want but I’d suggest, if you are doing for the first time or new to Ionic development, pick a font in which you can see the changes reflected in the app.

<img src='https://cdn-images-1.medium.com/max/2560/0*NTLwsXqYlk1SPFPD.png' />

After selecting the font, open the highlighted link in the screenshot above, in a new tab.

<img src='https://cdn-images-1.medium.com/max/2560/0*Ok2hQifn4QpJFSsM.png' />

Again, open the link provided in the `latin` section, just like in the above image and download or save the file directly in you ionic project.

The location to save the file will be `YOUR-IonicApp > src/assets/fonts`. Create a new directory `fonts` in the `assets` folder if not available. Place the file there, and rename it as per your convenience.

<img src='https://cdn-images-1.medium.com/max/800/0*KIBUq3X7G1JztbmK.png' />

Now since we want this font to be used at the global level of application, open `app.scss` in `src/app` and first include the local file of the font we want to use and then use that font at global level by using an asterisk `*` as css-selector:

```css
@font-face {
  font-family: 'Revalia';
  src: url('../assets/fonts/revalia.woff2') format('woff2');
}

* {
  font-family: Revalia;
}
```

Run the ionic application with:

```shell
$ ionic serve
```

Output:

<img src='https://cdn-images-1.medium.com/max/800/0*cAeEa-sD5b1zHVNG.png' />

To get the full code, you can visit [**this Github Repository**](https://github.com/amandeepmittal/ionic-use-google-fonts).

[Originally Published at Hackernoon.com](https://medium.com/hackernoon/using-google-fonts-in-an-ionic-application-c3419c342f23)


Using Google Fonts in an Ionic Application

---
title: 'Basic Navigation in Ionic Applications'
date: '2017-10-31'
thumbnail: '/thumbnails/ionic.png'
slug: 'basic-navigation-in-ionic-applications'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/https-medium-com-amanhimself-basic-navigation-in-ionic-applications-ecb199cdf15b'
---

> [Originally Published at Hackernoon.com](https://medium.com/hackernoon/https-medium-com-amanhimself-basic-navigation-in-ionic-applications-ecb199cdf15b)

Navigation in Ionic does not work using normal routing like you might have done in some of the client side web frameworks, especially when compared to browser based navigation. It uses the terminology of `pages` which I find is more generalised and correctly named as compared Ionic version 1's `states`. This approach is quite similar to navigation in a native mobile application.

Pages are _pushed_ and _popped_ from the navigation controller a class defined whose subclass available in Ionic is `ion-nav`. The logic here is equivalent to that of a stack. The purpose of `ion-nav` is to work with the navigation stack.

To define a nav bar in an ionic app:

```html

<ion-navbar>
  <ion-title> Ionic App </ion-title>
</ion-navbar>
```

Inside the typescript file associated to above HTML code, we will have access to Navigation Controller.

```ts
// home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
}
```

Thus, we can access `NavController` and it's properties such as `push` and `pop` to navigate to a different page or back to the previous page.

Note: _Deeplinking is available in Ionic with URLs but that is altogether a different topic._

Basic Navigation in Ionic Applications

---
date: '2017-10-18'
title: 'How to use Font Awesome in an Ionic Application'
thumbnail: '/thumbnails/ionic.png'
slug: 'how-to-use-font-awesome-in-an-ionic-application'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/how-to-use-font-awesome-in-an-ionic-application-31638ed3f77d'
---

There is an element of confusion when it comes to use FontAwesome in an Ionic Application. To include this fonts library in Ionic needs a bit of configuration and this step by step guide will provide just that.

### Bootstrap an Ionic Application

Create a new Ionic application or you can follow these steps to include FontAwesome in your Ionic application. Nothing will break down.

```shell
$ ionic start ionic-use-fontawesome
```

Now, install the FontAwesome package from `npm` and save it in the app's dependencies:

```shell
$ npm install font-awesome --save
```

Type the above in the root folder of your app. This will add the `font-awesome` folder under `node_modules`. The `--save` option will include the package inside the dependencies section of `package.json` file.

### Include the fonts

Now wander to the `src/index.html` file and add the following `link` tag just above `build/main.css`:

```html
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<link href="build/main.css" rel="stylesheet" />
```

### Add a Custom Copy Script

Ionic includes a copy script file that is called during the build process when the command `ionic serve` executes and it is responsible for moving specific and required resources from `node_modules` to the `www` folder such as ionicons.

The location of this script file is under `node_modules` folder:

<img src='https://cdn-images-1.medium.com/max/800/0*samQXT4FoWTgUXK1.png' />

Copy this file and paste in inside a new directory called `config` under the root directory of your Ionic application. Open the file and add fontawesome entries at the bottom of this file.

```js
copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  }
```

### Include Custom Copy Script in package.json

We must include this custom script inside our `package.json` file to override the one where we copied the original file from. Open the `package.json` file and add this json code:

```json
"config": {
    "ionic_copy": "./config/copy.config.js"
  }
```

That’s it in the configuration part.

### Use FontAwesome

To implement FontAwesome in this or any Ionic application after the above configuration, we try adding some fonts on our pre-generated home page.

```html
<ion-header>
  <ion-navbar color="secondary">
    <ion-title> FontAwesome Icons </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level
      Empty
    </ion-item>
    <ion-item> <i class="fa fa-battery-1"></i> Battery Level 1 </ion-item>
    <ion-item> <i class="fa fa-battery-2"></i> Battery Level 2 </ion-item>
    <ion-item> <i class="fa fa-battery-3"></i> Battery Level 3 </ion-item>
    <ion-item>
      <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
  </ion-list>
</ion-content>
```

<img src='https://cdn-images-1.medium.com/max/800/0*RnPachma2AAxR_SY.png' />

There are more than 675 icons available in FontAwesome and I think a combination of both Ionicons and FontAwesome will be enough for some the applications out there. You can even style them, change their `font-size` and color as per your needs.

[**_Full source code at this Github Repository_**](https://github.com/amandeepmittal/ionic-use-font-awesome)

[Originally Published at Hackernoon.com](https://medium.com/hackernoon/how-to-use-font-awesome-in-an-ionic-application-31638ed3f77d)


How to use Font Awesome in an Ionic Application

---
date: '2017-10-12'
title: 'What is Ionic?'
thumbnail: '/thumbnails/ionic.png'
slug: 'what-is-ionic'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/what-is-ionic-c1da6eab0d8a'
---

Ionic is an open source, front-end SDK for developing Hybrid Mobile Applications using web technologies such as HTML, CSS and JavaScript. It provides mobile optimised web technology based components as well as native APIs using Cordova and Ionic Native.

Ionic with it’s latest version, is performance efficient using minimal DOM manipulation. Angular also plays a major role in increasing the performance of an Ionic application.

It has it’s own command line interface tool that is really helpful to scaffold and develop an application and majorly in avoid writing boilerplate code, thus, saving precious time.

### Development Setup for Ionic

### Nodejs and npm

To develop and run Ionic apps, we need Nodejs, most importantly, because Ionic uses Node’s CLI to build tasks and generate resources. Navigate to [Nodejs official website](https://nodejs.org/) to download Nodejs and it’s package manager: `npm`.

To check of Nodejs is installed correctly, in your terminal window:

```shell
$ node -v
v6.11.0

$ npm -v
3.10.10
```

npm is a Package Manager that is used to download almost every dependency in an Ionic Project.

### TypeScript

Next step is to install TypeScript compiler.

```shell
$ npm install -g typescript

# After installtion, to check if installed correctly:
$ tsc -v
Version 2.3.4
```

### Install Cordova and Ionic CLI

```shell
$ npm install -g cordova ionic
```

Verify your installation by:

```shell
$ cordova -v
7.0.1

$ ionic info
global packages:

    @ionic/cli-utils : 1.3.0
    Ionic CLI        : 3.3.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.1 Build version 8B62
    ios-deploy : not installed
    ios-sim    : not installed
```

### Platfrom Guides

To install platform such as iOS and espcially android, I will want you to refer the official guidelines:

- for iOS: [Cordova iOS Platform Guide](https://cordova.apache.org/docs/en/latest/guide/platforms/ios/)
- for android: [Cordova android Platform Guide](https://cordova.apache.org/docs/en/latest/guide/platforms/android/)

[Originally Published at Hackernoon.com](https://medium.com/hackernoon/what-is-ionic-c1da6eab0d8a)


What is Ionic?

---
date: '2017-10-05'
title: 'Introduction to Hybrid Mobile Apps'
thumbnail: '/thumbnails/ionic.png'
slug: 'introduction-to-hybrid-mobile-apps'
tag: 'ionic'
canonicalUrl: 'https://medium.com/hackernoon/introduction-to-hybrid-mobile-apps-c97720b30557'
---

### What is a Hybrid Mobile App?

> _Hybrid application is a type of mobile application that uses browser window to display its interface._

A hybrid mobile application is built with HTML, CSS and JavaScript and is contained in a native wrapper so that it can be installed on a mobile device. This can be done without having to learn the native programming languages (e.g. Swift, Java).

It does mean that there is one codebase for all different platforms such iOS, and android.

This comes under the classification of types of mobile applications that consists of three types:

- Native: developed using platform specific programming language such as Objective C or Java
- Mobile Websites: developed using web technologies such as HTML, CSS & JavaScript and are accessible only through mobile web browser. They are actually web applications.
- Hybrid: cross-platform and have access to native APIs (mostly through plugins)

For example, an architecture of Hybrid Mobile application developed using Ionic Framework consists of two concepts that one must be familiar with ASAP: WebView & Apache Cordova.

### What is a WebView?

Think it of as a browser that runs inside the scope of a mobile application using a framework such as Ionic that mimics the native UI. This browser implements code written in HTML, CSS and JavaScript.

The application on a specific mobile operating system runs via tool like [Cordova](https://cordova.apache.org/). It provides APIs written in JavaScript to interact with Native features of mobile device such as access to camera or a microphone.

WebView communicates with Cordova’s APIs which then further communicates with mobile devices.

<img src='https://cdn-images-1.medium.com/max/800/1*hdwWntqxD-qOL8vf87DmAQ.png' />

WebViews are so common these days that you can build desktop applications using [Electron](http://electron.atom.io/).

### Why To Go Hybrid?

Before answering this question mysellf, I think you should read [_Myths around Hybrid Mobile Applications?_](https://devdactic.com/myth-hybrid-development/) written by Simon of [Devdatic.com](https://devdactic.com/).

This will answer the question above and along with it, my POV is that if you already know web development and or have experience with frameworks like Angular, or React, opting for Hybrid mobile development is a good way to expand your skills and take leverage of your current coding skills. After all, I love creating stuff and for me this is a great start.

### Alternatives

There are few alternates/frameworks available in the world of Hybrid Development. One of them is [Ionic Framework](https://ionicframework.com/) and with its next release earlier this year, it provides better performance for the hybrid apps. It also has a huge and helpful community to help you out whenever you get stuck.

Other options which I haven’t tried yet but think are worth mentioning include compile-to-native frameworks like [React Native](https://facebook.github.io/react-native/) and [NativeScript](https://www.nativescript.org/).

[Originally Published at Hackernoon.com](https://medium.com/hackernoon/introduction-to-hybrid-mobile-apps-c97720b30557)


Introduction to Hybrid Mobile Apps

---
title: 'Getting Started with Ionic Framework'
date: '2017-02-26'
thumbnail: '/thumbnails/ionic.png'
slug: 'getting-started-with-ionic-framework'
tag: 'ionic'
canonicalUrl: 'https://hackernoon.com/getting-started-with-ionic-framework-an-overview-6725b687779b'
---

> [Originally Published at Hackernoon.com](https://hackernoon.com/getting-started-with-ionic-framework-an-overview-6725b687779b)

I have been getting familiar with [Ionic Framework](http://ionicframework.com/) in past recent days. To start, I had a question in mind which might be similar to yours. **_Why choose Ionic Framework?_**

The reasons I chose Ionic as my next framework to elaborate my skill-set, are listed here:

- Ionic is all about **HTML**, **CSS**, **JavaScript**
- Since I have been following JavaScript closely in past months and recently worked on a freelance project using technologies and framework (I am familiar with) such as Node.js, Express.js & **AngularJS.**
- To build mobile applications using my current knowledge (that is of AngularJS)
- Learning curve is if you are familiar with AngularJS
- Ionic is cross-platform
- has its own UI components that feels _Bootstrapish_ and is easy to customize
- It’s open-source and has an active ever-growing community ([with the release of version 2, especially](http://blog.ionic.io/announcing-ionic-2-0-0-final/))

With above “list of reasoning” I am also including few more points that Ionic provides:

- has its own Command Line interface (CLI) to _scaffold, develop_ and _deploy_ applications.
- it gives access to mobile device APIs through two options: ngCordova & ionic-native
- application written in Ionic can be converted for a specific device (such as Android & iOS) using Apache’s Cordova.

With all that said, I am going to briefly discuss few things in this article that you should know of if/when you are planning to start developing applications using _Ionic Framework_.

### Hybrid Mobile Architecture

Did you think I am going to start this article by discussing some [**myths around Hybrid Mobile Applications**](https://devdactic.com/myth-hybrid-development/)? Well I am not because there’s already an awesome article written by Simon on [DevDactic.com](https://devdactic.com)

The genesis of Hybrid Mobile applications is to understand _what an Hybrid application is?_

> Hybrid application is a type of mobile application that uses browser window to display its interface.

This comes under the classification of **types of mobile applications** that consists of three types:

- Native: developed using platform specific programming language such as Objective C or Java
- Mobile Websites: developed using web technologies such as HTML, CSS & JavaScript and are accessible only through mobile web browser. They are actually web applications.
- Hybrid: cross-platform and have access to native APIs (mostly through plugins)

Architecture of Hybrid Mobile applications developed using Ionic Framework consists of two concepts that one must be familiar with ASAP: WebView & Apache Cordova.

### What is WebView?

Think it of as a browser that runs inside the scope of a mobile application using Ionic. This browser implements code written in HTML, CSS and JavaScript.

The application on a specific mobile operating system runs via tool like [Cordova](https://cordova.apache.org/). It provides APIs written in JavaScript to interact with Native features of mobile device such as access to camera or a microphone.

WebView communicates with Cordova’s APIs which then further communicates with mobile devices.

<img src='https://cdn-images-1.medium.com/max/800/1*hdwWntqxD-qOL8vf87DmAQ.png' />

WebViews are so common these days that you can build desktop applications using [Electron](http://electron.atom.io/).

_For detailed information on Hybrid Mobile Applications, I would like you to consider reading John Bristowe’s_ [_article_](http://developer.telerik.com/featured/what-is-a-hybrid-mobile-app/)_._

### Pre-requisites for developing an Ionic Application?

You will need these tools as a part of your environment setup with your Operating System.

- [Node.js](http://www.nodejs.org)

Even if you do not use Node.js as a part of your development environment, to use Ionic you have to install it to get access to command line tools such as Bower, Gulp, and Ionic’s own Command Line Interface using its Node’s package manager: [_npm_](http://www.npmjs.com).

#### Installing Ionic

Ionic is a collection of Angular.js, UI Router, Angular directives, Angular services, JS utilities, and mobile focused CSS styles. These are bundled together as ionic.bundle.js and ionic.css.

From your command line:

`$ npm install cordova ionic -g`

This will install a tool you are going make use of: Ionic CLI which is a command line utility.

For detailed information on what it can do:

`$ ionic --help` which list all the things tasks you can perform using this utility.

### Ionic App Development Process

After installing the command line utility, you can start by creating an app using Ionic’s starter templates. Ionic provides three starter templates:

- blank `ionic start myApp blank`
- tabs `ionic start myApp tabs`
- sidemenu tart `myApp sidemenu`

To get a list of all Ionic templates available type in terminal:

`$ ionic start -l`

`ionic start` is the command that is used to scaffold an Ionic application.

<img src='https://cdn-images-1.medium.com/max/800/1*zYrkeFhqj6-YCDaF0LcWMg.png' />

#### Scaffolding an Ionic Application

`$ ionic start -a "Example" -i app.example example blank`

This command can help you scaffold an Ionic Project with following options:

- `-a "Example"` human readable name of application
- `-i app.example` application ID
- `example` project folder’s name
- `blank` ionic template

This steps allows the config file to update with application name and its ID. (We will learn more about the config file later).

After this step, if you look closely at your terminal window, a script runs which installs six Cordova plugins mentioned `package.json` file.

- `cordova-plugin-device` to get device information
- `cordova-plugin-console` defines a global instance of `console.log()`
- `cordova-plugin-whitelist` implements whitelist policy for navigating the application’s WebView
- `cordova-plugin-splashscreen` it shows and hides a splash screen during the start of the application on a device
- `cordova-plugin-statusbar` provides functions to customize the iOS and Android StatusBar
- `ionic-plugin-keyboard` provides functions to interact with the keyboard

So now you have an Ionic project setup and you are familiar the basic elements of a project’s setup. It’s time to run the application from the command line using `ionic serve` command to run the app locally on a port.

$ cd example  
$ ionic serve

It will open a browser window in the default web browser and you will see similar to this:

<img src='https://cdn-images-1.medium.com/max/800/1*JNQywRjia3Z98oF1cdwByA.png' />

`ionic serve --lab` will run the app locally showing two instances of the app for iOS & Android.

<img src='https://cdn-images-1.medium.com/max/800/1*LMFf8hdbrt1zPB1EAfoNPg.png' />

To run the application deliberately on a different port number: `ionic serve -p 8080`

### Ionic Project Structure

Following is the root structure of an Ionic Project after scaffolding:

<img src='https://cdn-images-1.medium.com/max/800/1*k9wGw8Kg_lr2yjaGWIefPA.png' />

I will start describing what each folder/file in the root folder of the app contains, from top to bottom.

- `hooks` consists of scripts that are executed when a specific Cordova task is performed
- `plugins` contains all plugins that comes added to project
- `www` ionic app code that we write to build app
- `scss` consists base scss file (styles of ionic UI components)
- `.bowerrc` path to directory where Bower dependencies get installed
- `.editorconfig` default editor configuration for brevity
- `bower.json` list of Bower dependencies
- `config.xml` meta information needed by Cordova when converting Ionic application to platform specific. It consists of XML tags that describes the project
- `gulpfile.js` build tasks used while developing application
- `ionic.config.json` information regarding ionic application

#### www/ Folder

This folder is the main folder of our application and its where the code of our application is written. It consists of a app startup file `index.html` which act as first page of app, `css` to define custom styles, `images` to add images to app, `js` which further consists of `app.js` where we bootstrap AngularJS framework. In this file, `ionic` is passed as dependency using [Angular Dependency Injection](https://docs.angularjs.org/guide/di). `$ionicPlatform` is the service that is injected to `run` method which enables Cordova plugins discussed earlier and the app itself.

The last folder, `lib` contain the packages/dependencies that are installed using Bower. It contains a pre-loaded dependency of Ionic and Angular files.

_I guess, you now have the idea of how an Hybrid application using Ionic Framework works._


🔥 9 Posts filtered by tag "ionic"