Using Ionic 2.0 Generators
At the time of writing this, Ionic 2.0 is still in alpha.
Ionic 2.0 builds on a ton of new technologies, such as Angular v2, TypeScript (with decorators), and ES6. If you've never dabbled in these technologies, you can use the generators available in the ionic-cli
to get ramped up quickly!
Getting started
First, install the alpha
version of the Ionic CLI: npm install -g ionic@alpha
, currently version 2.0.0-alpha.19.
Start an app with the tabs template: ionic start MyIonic2App tabs --v2
.
Change directories and serve the app in the browser: cd MyIonic2App && ionic serve
.
You'll see, we've got a basic tabs starter now avilable at MyIonic2App
directory.
Generating a few pages
Let's say we want to link to a new page, 'About', from one of the tabs. First, let's generate our page with this command: ionic generate page About
. NOTE: You can also use the generate alias, ionic g
.
You'll see a few files added:
~/Development/testing/MyIonic2App$ ionic g page About
√ Create www/app/about/about.html
√ Create www/app/about/about.js
√ Create www/app/about/about.scss
Adding link on view to the About page
Let's add the link to the main tab page in www/app/dash/dash.html
, via the (click)
handler on an anchor, like so:
<ion-card>
<ion-card-header>
Go to about page
</ion-card-header>
<ion-card-content>
<button (click)="goToAboutPage()">About this</button>
</ion-card-content>
</ion-card>
Navigating to the page
Modify the Dashboard TypeScript file (www/app/dash/dash.ts
) to import our new about page, add the click event handler, and push the page on the nav controller, all like so:
import {Page, NavController} from 'ionic/ionic';
import {About} from '../about/about';
@Page({
templateUrl: 'app/dash/dash.html',
})
export class Dash {
constructor(nav: NavController, view: ViewController) {
this.nav = nav;
this.view = view;
}
goToAboutPage() {
this.nav.push(About);
}
}
Try it out!
Look in your browser, you should have an anchor available to click/tap that will then navigate you to the About page, fresh for you to get working!
Here's a GIF of what it looks like:
I'd like to also note, Ionic 2 is much smoother than a GIF would allow.
Wiring up sass
If you want to use the custom sass styles on the about page, first wire in the about.scss
page in your www/app/app.scss
sass file, like so: @import 'about/about';
.
A quick note on naming conventions
For Ionic 2.0, we've contributed to a naming convention of kabob-casing for file names (my-about-page.html) and css classes (.my-about-page), and using PascalCasing for JavaScript classes in ES6 / TypeScript (MyAboutPage).
Other generators
Check out all the generators available: ionic g --list
~/Development/testing/MyIonic2App$ ionic g --list
Available generators:
* component
* directive
* injectable
* page
* page-login
* page-sidemenu
* page-signup
* pipe
* tabs
Final words
We hope you find the generators help you get started with ramping up quickly and building some awesome Ionic applications! Enjoy.
We'd love your feedback, drop us a line at Ionic v2 Github Issues.