Series: Ionic 2 App, Part 2: Set-up, Configuration, and Tabs Overview

In part 1 we learned a little bit about the basics of a mobile hybrid app.  Now let’s get to the details of how to set up our environment.  You can also follow this link:

http://ionicframework.com/docs/v2/getting-started/installation/

Some prerequisities:

  • Mac or ubuntu (you can use brew if you are using a mac)
  • npm installed
npm install -g ionic@beta
npm install -g phonegap [for phonegap]
npm install -g cordova@latest [for phonegap

Note that Ionic is still in beta, so some of the cli auto generation doesn’t come out quite correctly.

To start off run

ionic serve

//which outputs
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.22
Ionic App Lib Version: 2.0.0-beta.12
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS 
Node Version: v5.4.1

ionic serve is useful when you need to submit a bug via github or ask for help on the Ionic Slack Forums.

Create a project by running

ionic start tutorial --v2

and then run

ionic serve

On your browser you should now be able to see:
Capture

Let’s take a look at the project structure:

Capture

  • Root – the root folder is tutorial and there is config.xml.  That will be important later for testing on your phone and deploys
  • app.js – This is where the app starts initializing
  • providers folder – this doesn’t exist yet, but will be where your data mappings will be
  • pages folder – This is where all of your pages will live.

Before that, let’s take a look at the main file app.js

 

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

There is a lot going on here, so let us break things into sections

Tabs and Imports

  • Lines 1-3 the import lines import the class so you can use it the current class.  If you have coded Java before, this may seem very familiar to you.  You can read more from this blog.
  • In particular let us focus on line 3 which states
    import {TabsPage} from './pages/tabs/tabs';

What this is saying is it is importing the ‘TabsPage’ class from the location ‘pages/tabs/tabs’.  Even though it doesn’t state it, it is implicilty referring to tabs.js

If you open up tabs.js you will see

export class TabsPage

Notice that the import ‘TabsPage’ matches the name of the import.

Root Page

Now if you take a look at line 16, this is setting the rootPage of your app to the TabsPage.  Note that it can be any arbitrary page.

Tabs Page.js

import {Page} from 'ionic-angular';
import {Page1} from '../page1/page1';
import {Page2} from '../page2/page2';
import {Page3} from '../page3/page3';


@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = Page1;
    this.tab2Root = Page2;
    this.tab3Root = Page3;
  }
}

  • In the tabs.js you will note a bunch of new imports.
  • In line one, you have an import from a core class
  • In lines 2-4, you have imports for other pages
  • And if you notice in lines 14-16 variable instances on the TabsPage are being set to the pages.

Tabs.html


<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
</ion-tabs>

Here you see that in the ion-tabs element, it is being set to ‘tab1Root’.  tab1Root is mapped to ‘Page1’ so when you click on the ‘Tab 1’ page it loads.

Here ionic defines special ‘ion-tabs’ tags (which is described on the api here).

Review:

Capture

  • When ‘ionic serve’ is run app.js loads
  • In this scenario, TabsPage is instantiated (e.g. new TabsPage() )
  • When the constructor runs in TabsPage, any class variables are set
  • In the tabs.html, those variables are implicitly available without references ‘this.’

To Do:

  • Open page1.html and change some text
  • Open page2.html and change some text
  • Open tabs.html and change the ‘tabTitle’

Get a feel of what is changing

Next Post:

  • Stay tuned for a post of how to render data and use providers.

Extras:

Subscribe to our newsletter to get notified of new articles in the Ionic 2/Tutorial Series!

[mc4wp_form id=”47″]