Ionic Hello World Part 2


Let’s have a look at the Hello World app that was created on the previous blog post called Ionic Hello World.

For this app I have created a new one and I chose the Blank template. I am only running it in the browser and I will not discuss transferring it to your Android device.

Here is the screen shot taken from the Chrome browser. I made three changes to the code. First, I changed the HTML file to include my name. I also added an alert button. Thirdly, I added a couple of input boxes.

Before looking at the code that made this happen I will discuss a little bit about the file and folder structure. You will need to have a directory/folder on your computer where you store your projects. When you run your ionic start command you will be located in that folder and you will specify the name of the folder in your command line. That folder will be created. In this example I called the project ionicblank because I chose the blank template. You can read the documentation on the Project Structure at the Ionic 2 Documentation website.

src/index.html

The src/index.html is the main entry point for the app. For your app to function, Ionic looks for the tag in your HTML, and the following scripts near the bottom:

  • <script src=”cordova.js”></script
  • <script src=”build/main.js”></script>

Inside of the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic 2 app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of JavaScript the browser needs.

src/app/app.module.ts

src/app/app.module.ts is the entry point for our app. Every app has a root module that essentially controls the rest of the application. In this module, we’re setting the root component to MyApp, in src/app/app.component.ts. This is the first component that gets loaded in our app, and it typically is an empty shell for other components to be loaded into. In app.component.ts, we’re setting our template to src/app/app.html, so let’s look in there.

/src/app/app.html

In this template, we set up an ion-menu to function as a side menu, and then an ion-nav component to act as the main content area. The ion-menu’s [content] property is bound to the local variable content from our ion-nav, so it knows where it should animate around.

Adding and Navigating Pages

This blog post will not discuss adding pages. For that information, please have a look at the website’s discussion of adding pages.

Modifying A Page

Now We will look at the code changes I made to produce the app at the top of this post.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster, Mike.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <button ion-button outline (click)="doAlert()">Default</button>
  <ion-list>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>
</ion-content>

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public alerCtrl : AlertController) {
  }
      doAlert() {
          let alert = this.alerCtrl.create({
            title: 'New Friend!',
            message: 'Your friend, Obi wan Kenobi, just approved your friend request!',
            buttons: ['Ok']
          });
          alert.present()
        }
  }

I added the code at the top to import the AlertController. I also added that to the constructor. The doAlert() function was also added.

Series Navigation<< Ionic Hello WorldIonic 2 Simple Adding Calculator >>

Leave a comment

Your email address will not be published. Required fields are marked *