Subscribe now

Ember Weekly Drip #1 and Exercise - Building Nested Routes [09.09.2016]

On the last drip of the week, we'll provide some interesting links as well as an exercise. This week, the exercise is to create a nested route. But first, the links!

They cover: APIs, RFCs, Discussions, Twiddles, Weekends.

Here are the API Docs for the Ember Controller

If you want to find out a little more about Controllers in Ember this is a good place to look.


Here is the Routable Components RFC that I mentioned yesterday

If you want a little insight into the direction that Ember will be heading in the next major release it would benefit you to look this over.


Here are the API Docs on the Ember.Computed namespace

Computed properties are an incredibly useful tool in Ember that you will find yourself using very often. We will spend more time with them moving forward, but in the interim it never hurts to peruse the docs.


The Ember discussion forum

This is a good place to bookmark if you ever get stuck, if you want to know how others solved their challenges, or if you need a little help yourself.


Ember Twiddle

Ember Twiddle is a great way to share small snippets of your application. It can be really useful for debugging or sharing solutions.


Ember Weekend

Ember Weekend is a terrific weekly podcast by Chase McCarthy and Jonathan Jackson that covers all things Ember. If you want to stay up-to-date on the latest news and developments in the Ember world this is one of the best, and most entertaining resources available.

Exercise

This week we got our first Ember application built and we learned about Ember generators, the router, routes, controllers, and templates. Let's try and build on that by creating a nested route.

Create an index route that is a child of contacts. It should be mapped to the URL path contacts/. Inside this associated template add the following text:

<h3>Welcome to the contacts index route</h3>

Create an index template that is not a child of the contacts route. In the index template add this:

<h2>Welcome to our Contacts App!</h2>

Finally create an application template and add two links. One should link to the new index page and the other to contacts page.

Hint: use a link-to helper.

Note: don't forget about the {{outlet}} in the application template.