Premium Economy Software


Singapore
Perth W Australia

Ionic 2 – Hello World Tutorial

October 13, 2016 Uncategorized 0 comments

A few months ago I dipped my toe in the water with the app thing. After waiting for 10 minutes for my emulator to load for java, I pulled up the white flag and swore that app programming would be equal to my Chinese. Bad an in functional for me.

And they want me to do IOS too? Oh no.

I see the light!

That all changed a month ago. That’s where I discovered Ionic which is a really smart idea. What Ionic does is create a low key browser that pops into your phone. The power is that this browser runs on both IOS and Andriod because it is a browser. The next thing is that it runs good old HTML and JS, just like any browser. Add to that its’ super powered link of all the mobile only features like the camera, the GPS and other features that pop in.

Yeepeee!

Native or Hybrid

This is known as a Hybrid app. No the native stuff is very good for running things like games and graphics but if your application is about input output then Hybrid is an option. There was some slow issues in the beginning but with improved versions, Hybrid is giving native a run for its money. I’m quite sure many users won’t even notice the difference.

Angular 2… Ionic CLI

Ionic 2 is powered by Angular 2, that’s the JS that makes all the animations. I suggest skipping learning Angular 2 and diving immediately into Ionic 2 learning Angular that way. Angular 2 on its on imho is pretty lame as it populates the files in the same folder and starts making things very messy. In Ionic you’re going to work directly with TypeScript, which is a cleaner type of JS. The Command Line Utility (CLI) and automatically changers the type script into JS and hides it so you never have to mess with it.

In addition, I like some of the Ionic2 layout more than just Angular and some smart stuff in there. Seriously why would anyone make a Single Page Application for the Web? You’re going to want to just do it for Mobile right?

So Let’s Go

install

Ok, first you’re going to need IONIC 2. In windows.
NPM is the node package manager. You need to download this. Just google it.

npm update -g cordova ionic@beta

This will install cordova and ionic at the same time.

 

Download

ionic start ionic_tutorial tutorial --v2

This says, start project “ionic_tutorial” using the tutorial template with version 2.

In the Folder

The first thing you will notice is the structure.

– main.ts
– module.ts
– component.ts

Just treat all 3 as classes. There’s sort of virtual classes because JS does not really have class features.

This component thing is what really gets me confused on Angular2. I like to think of it as a McDonald’s secret. You have the Main – which is your order. The module – which is like (set)burger + side + drink. Component – which is Burger.

So you put the burger in the set in the order.

The good thing about this structure is that suppose you want to change the side to a large fries, you just have to look in the Module(set) . If you wanted to get a big mac, you just change the component class.

It’s a good idea, but hard to get your head around.

 

 

Main.ts (app.ts)

  1. This sets what plateform you are using, IOS, Web, Android, Windows.
  2. Imports the Module.ts
  3. Launches the application in bootstrap

Module.ts


import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports:      [ BrowserModule ],
providers:    [ Logger ],
declarations: [ AppComponent ],
exports:      [ AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

So your application is split up into modules and each module does a certain something. Most apps only need 1 module so you might just skip this to main –> components.

The first you you’ll notice is the @NgModule ( )

What this essentially is, is a bunch of declarations or ‘settings’ of the class. They are a standard name so that you do not have to go messing in the class to change them as they are set at the top.

 

Component.ts

export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;

constructor(private service: HeroService) { }

ngOnInit() {
this.heroes = this.service.getHeroes();
}

selectHero(hero: Hero) { this.selectedHero = hero; }
}

 

Components are like controllers for a page. They do all the coding and then output its to the viewer. This is where you put the code you want for a particular page.