Finally, we need to define a root component class.
 
class MyApp {

}
 
I don’t blame you If you never heard of this concept in JavaScript, it was introduced with ES6. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now. See the ES6 standard for full specification of the ECMAScript 6 language.
 
A small note. Only the root component class definition starts with a class keyword. Other classes need to start with an export class keyword, for example, previously mentioned hello-ionic.js class looks like this:
 
export class HelloIonicPage {

}
 
Export keyword states that this class is importable. Because we’re not importing root class there’s no point in using export keyword with MyApp class.
 
To initialize our class we need to pass some parameters into the class constructor:
 
  constructor(app: IonicApp, platform: Platform) {
 
Read previously mentioned Andrew McGivery articles to find out more about classes and constructors. In a few short words, this example is identical to Ionic 1 $app and $ionicPlatform service injections. This way our root class can access main application services.
 
We’re also using class constructor to initialize our app, define application pages, and finally set our application root page:
 
    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
 
InitializeApp method will serve an identical purpose to Ionic 1 run method:
 
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {}
    if (window.StatusBar) { StatusBar.styleDefault(); }
  });
})
 
Previously I told you about the @App decorator and how it’s used to reference root component template HTML file. Referenced template file looks like this:
 
<ion-menu id="leftMenu" [content]="content">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
 
While this template is surprisingly similar to Ionic 1 templates, you’ll notice a lot of specific Angular2 code.
 
Take a look at these lines:
 
<ion-menu id="leftMenu" [content]="content">
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
 
This code is unique to Angular2. In case of ion-menu, we’re referencing ion-menu property content to content variable. Technically, [content] is property and “content” is a variable.
 
Same goes with ion-nav root property. This is also a good example, because, unlike content, root property is used in this code. Just go back to core component class and take a look at line 25.
 
    this.rootPage = HelloIonicPage;
 
Because rootPage variable is referenced to root property, we can use it to set application root page, which is in our case HelloIonicPage. If you still need more information you can find them in the official documentation.
 
And finally there’s a button code:
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
    {{p.title}}
</button>
 
Again this is classic Angular2 syntax. We’re looping through the array called pages (which is defined in root component class, line 19.) and each array element is assigned to the variable called p. If we click on such a button it will trigger openPage function defined in the root component class, line 50:
 
  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
 
For the reference, *ng-for is equivalent of Angular1 ng-repeat.
 

What to read next

Ionic 2 | A Page Anatomy Part 2 – Page Components
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



  • Alugbin Abiodun

    Please i have been trying to add sidemenu to my page but its not the root page, i tried creating the menu in the same page but the back button keeps hiding my toggleMenu button. i will really appreciate if you can just demo a dashboard application where you first fill out a login page then move to the dashboard with sidemenu and tabs in ionic 2.
    Thanks

    • mohammad moussa

      Hello, can you please help me if you find a solution for this issue?

  • NonZero

    Not found this Ionic2FirstApp repo gives error not found
    Ionic2FirstApp

    Please solve this issue.

  • Tim

    Thank you very much for the tutorials/articles on Ionic 2!

    When I create a new ionic 2 (2.0.0-beta.6) project it is a bit different from yours, judging from the app.js file for example. I use Terminal on an iMac OS X El Capitan. This is your code:
    “class MyApp {

    constructor(app: IonicApp, platform: Platform) {“

    and this is the code in my project:
    “class MyApp {
    static get parameters() {
    return [[IonicApp], [Platform], [MenuController]];
    }

    constructor(app, platform, menu) {“

    I haven’t tried your code yet, but I think that I will get a parsing error here: “app: IonicApp, platform: Platform”. Is your code like that because you use TypeScript? If yes, where did you declare the use of TypeScript? In the Ionic 2 docs it says: “Want to use TypeScript instead? Pass the –ts flag and get a project set up for TypeScript instead”.

    Is it better, more comfortable, more intuitive, easier to use TypeScript or not?

  • Murali

    Thank you,
    It will be greate if you can write an article which will cover below scenario.

    Have a tab menu at startup like Login, Signup, About, help and once they login then have side menu (not tab menu).

    Cheers
    Murali