Create an Ember Project with the Ember-CLI

Ember Templating with HTMLBars

Add user interaction to Ember.js apps using actions

Define Routes in Ember 2.0 using Ember-CLI

Creating nested routes in Ember.js

Define Models for Routes in Ember

Create Simple Components in Ember

Use Closure Actions with Ember Components

Debug Ember Applications using Ember Inspector

Ember 2 Fundamentals

In this lesson, we will learn how to define routes within an Ember application and how to use them to navigate around your application. This lesson will cover the basics of routes and how we can use nested routes to display multiple templates at the same time. We can also cover redirect routes and manually forcing transitions through actions.

[00:00] Let's generate a root called about. Next, we can go to our router.js file and application folder, and we'll see that what now exists in there is the about root. We'll also notice that, in addition the root.js file being created, it also created a template for us. Let's out up this about.hbs file in our editor. For now, it's blank, but we can add in about root, and then, we can save.

[00:44] In order to see this about root, we'll have to navigate to the about pap in our browser and press enter. Now, we'll see that about root right below our header. You're probably wondering why there's a welcome to the Ember app still showing. Let's go to application.hbs, and then, remove this header and then save. Now, you'll only see the about root rendering.

[01:08] In ever Ember application, the topmost context is always application. In application.hbs file, you should have an outlet. Otherwise, your Ember application won't render. For example, let's remove this outlet line and save. Our application disappears.

[01:26] But if we add it back in, we'll our about root reappears to the right. This is because in order to render into a parent root, you have to have an outlet. Every single root generated by an Ember application is a child root if the application root.

[01:45] You're probably wondering how to navigate to the about root without manually typing it into the browser. Let's get our application root designated again just so we can tell.

[01:54] Ember's shift to a nice HTML bars helper called link to that we can now use to designate where to link to. Now, we have this about link. If we go back to our base root and we click on this about link, it'll now show up the about root. Great.

[02:21] Link to also can be a custom element. All you have to do is use this special format with the hashtag in front of it. Then, you can say history and then save. Now, we have that same root. This is helpful if you want to make an entire element, like a div, navigate to a specific root.

[02:45] You're probably wondering, "How do I get back to the home root?" You can also go up here and say link to home and then just designate the root application.

[03:04] At every level of nesting in the router, Ember provides a root named index that is the equivalent of the root name and its forward slash. Instead of using application, we're going to replace it with index and save. Then if you go to about and then you go back to home, you'll see that's operating just as it was before...

Course

Ember 2 Fundamentals

Define Routes in Ember 2.0 using Ember-CLI

Share this video with your friends