Understanding Ionic 2: Class

Understanding Ionic 2: Class

posted in: Uncategorized | 4

In Ionic 2, classes are at the center of everything thanks to ES6. Everything is now a class. For someone coming from other object oriented languages, they wil feel right at home with classes. For anyone who comes from JavaScript, there may be some mind-wrapping-around that needs to happen to get to the point of comfort with this new paradigm.

In this article, we’ll take a look at the basics of writing classes.

Ionic 1.0 Equivalent

While there isn’t an obvious parallel between classes in Ionic 2 and something in Ionic 1, you can imagine that any time in Ionic 1 you called angular.factory or angular.controller or something similar, you were creating some kind of object or thing. In 2.0, we are creating these things as classes and then decorating them with the type of thing they are using decorators.

Basic Class Syntax

The basic syntax of a class is as follows:

class myClassName {}

Super simple right?

Constructor

The Constructor is a function that is called immediately when a new instance of a class is created. Lets look at the following example:

class myClassName {
	constructor(name: string){
		console.log("Hello " + name)
	}
}

var testInstance = new myClassName("Andrew");

In the above example, as soon as I am creating a new instance of myClassName and passing in the string Andrew, the constructor function is called with Andrew passed in to the name parameter. Now you may be wondering what is up with the weird name: string syntax. That is Typescript! I’m not going to dig deep into it in this post, but its something you can use to develop your app and it’s awesome.

Methods

To give our class methods, it’s super simple!

class myClassName {
	constructor(name: string){
		
	}
	
	sayHello(){
		console.log("Hello");
	}
}

Properties

Adding properties is a bit strange if you are coming from a different class based language. Class properties can only be created within one of the classes methods. There is no way to create properties in the declaration of the class itself. However, it IS supported in TypeScript.

For example, the follow WILL NOT WORK with just ES6 but it WILL work with TypeScript.

class myClassName {
	name: ""
	constructor(name: string){
		this.name = name;
	}
}

Instead, for ES6, you would want to simply declare it in the constructor.

class myClassName {
	constructor(name: string){
		this.name = name;
	}
}

Decorators

So what is a decorator? Well, let’s look at an example of one.

@App({
	templateUrl: 'app/app.html'
})
class MyApp {
	//etc
}

A decorator describes what a class is or does. It gives it functionality by running it through a function. In this example, we are creating a class called MyApp and adding the @App decorator to it. So, we are saying this class is an app. We are also passing some details about our new app class, telling it where to find the templateUrl. Some examples of decorators in Ionic 2 include:

  • @App – The main, central class of our app (Read More)
  • @Page – A view/page
  • @Pipe – A replacement of filters from Ionic 1.0. Used for formatting data.
  • @Injectable – A generic injectable class (Think: Factories in Ionic 1.0)
  • @Directive – Almost identical to directives in Ionic 2.0
  • @Component – A directive with a template (similar to using transclusion in directives in Ionic 1.0)

Conclusion

Classes are at the heart of Ionic 2 with ES6. Everything is a class and classes are everything. Questions? Feel free to leave them below in the comments!

Special Thanks

Huge thanks to Brandy Carney for reviewing/editing this post!

NOTE: Alpha

Please be aware that Ionic 2 is in alpha and is subject to change at any time. If this post becomes inaccurate at any time, feel free to leave a comment and I’ll do my best to update it as soon as I can.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

4 Responses

  1. cfjedimaster

    Ah – interesting. I never knew that

    @something
    class foo {}

    was *one* thing with @something simply describing/enhancing/whatever foo.

  2. Cubics Rube

    I love the image! It makes so much sense after reading tons of posts on Angular 2 and Ionic 2. Sometimes, a simple image as this makes much more sense than the verbal explanation.

  3. Well said! Thank you for sharing.

Leave a Reply