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!
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
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,
You’ll see a few files added:
1 2 3 4
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:
1 2 3 4 5 6 7 8
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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:
A quick note on naming conventions
Check out all the generators available:
ionic g --list
1 2 3 4 5 6 7 8 9 10 11
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.