As discussed in Understanding Ionic 2: Classes, classes are at the center of everything thanks to ES6. These classes use a new syntax called decorators to specify what the purpose of each class is. One of these decorators, @Page, represents a view in an Ionic app. New instances of these classes are created on the fly as they are needed in your app.
In this article, we’ll discuss the @Page decorator and how to use it.
Ionic 1.0 Equivalent
Depending on how you wrap your mind around it, @Page could be compared to a couple different concepts in 1.0 but the simplest is probably a mixture of states and controllers where the decorator itself is similar to a state and the class is similar to a controller. Assuming you wrote one controller per view in 1.0 and used the controller to feed data to the view, a @Page decorator and it’s class are very similar. The major difference will be that in 2.0, instead of pairing a template and a controller in the router state like in 1.0, the template is attached in the @Page decorator directly.
Basic @Page Syntax
The basic syntax of a @Page is as follows:
import {Page} from 'ionic/ionic';
@Page({
templateUrl: "templateName.html"
})
export class PageName(){
constructor(){
}
}
It is very similar to the @App decorator in that it takes a templateUrl which points to an html file. As per the Ionic Docs, “Pages have their content automatically wrapped in ion-view, so although you may see these tags if you inspect your markup, you don’t need to include them in your templates.”
Example: Hello World
Let’s look at a basic example of a “Hello World” @Page.
import {Page} from 'ionic/ionic';
@Page({
templateUrl: "Main/Main.html"
})
export class Main(){
constructor(){
}
}
In this example, we are creating a Main page and using a template located at Main/Main.html. Our template will just say the words “Hello World!”:
Hello World!
Example: Hello Name
Let’s try using some data from our class in our template. We will define a name property in our class.
import {Page} from 'ionic/ionic';
@Page({
templateUrl: "Main/Main.html"
})
export class Main(){
constructor(){
this.name = "Andrew";
}
}
This will look very familiar if you used controllerAs syntax in version 1.0. If you did not, this.name is roughly equivilent to $scope.name. We can now use this property in our template:
Hello {{name}}!
This will be compiled to “Hello Andrew!”.
Example: Hello Method
For our final example, lets create a method on our @Page that changes the value of this.name. This method will be called on a button click.
import {Page} from 'ionic/ionic';
@Page({
templateUrl: "Main/Main.html"
})
export class Main(){
constructor(){
this.name = "Andrew";
}
changeName(name){
this.name = name;
}
}
In our template we will add three buttons to call the changeName function when they are clicked:
<p>Hello {{name}}!</p>
<strong>Change Name To:</strong>
<button (click)="changeName('Andrew')">Change to Andrew</button>
<button (click)="changeName('Brandy')">Change to Brandy</button>
<button (click)="changeName('Katie')">Change to Katie</button>
When each of these buttons are pressed, they will change the value of the name property and the template will update. For example, clicking the second button will change the output from Hello Andrew! to Hello Brandy!
Example: Hello Modal
In Ionic 1.0, a modal was constructed from a template that was a totally separate entity. In 2.0, ANY @Page can be a modal by simply passing it to the Modal.open method. As an example, lets create a page called PopupPage.
import {Page} from 'ionic/ionic';
@Page({
templateUrl: 'Popup/Popup.html',
})
export class PopupPage {
constructor(){
}
}
Nothing special here, just a normal page. For the example, lets give it a really simple template.
Hello from PopupPage!
As per the documentation, we need to include the ion-overlay component somewhere in our app once, usually in our root app.html template. (This would be in the template of our @App)
<ion-overlay></ion-overlay>
Next, let’s create a second page, MainPage that contains a method that when called shows our PopupPage in a modal.
import {Page, Modal} from 'ionic/ionic';
import {PopupPage} from 'Popup/Popup';
@Page({
templateUrl: 'Main/Main.html',
})
export class MainPage {
constructor(modal: Modal){
this.modal = modal;
}
openPopup(){
this.modal.open(PopupPage);
}
}
… and that’s it! All we had to do was use modal.open and pass our PopupPage to it as a parameter.
Conclusion
@Page is the building block of your app that is used to create each of the views of your app including providing that view with data. Questions? Leave them below!
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.
The post Understanding Ionic 2: @Page appeared first on Andrew McGivery.