In this lab you'll be working with the Playlister domain model, with a twist. Here, we have a
Albums model. The relationships between them are as follows:
You'll be connecting this Ember application to the Playlister API. This API is a Rails app. We'll have you run it on your own localhost:3000 to make the test suites run nice and fast. Go here and clone down this Rails app. Bundle install, run
rake db:migrate, and
rake db:seed. Then run
rails s to get the API up and running. **Your Ember app will not work if your API is not running on localhost:3000.
ember install active-model-adapterin your terminal. Generate an adapter with
ember generate adapter application. Then, code your Active Model Adapter to connect to the
http://localhost:3000, with a namespace of
app/router.jsto have a route for
/artistsand a route for an indivual artist, nested under
/artist. Do the same for albums and songs.
app/routes/artists.js, define the route handler for the
/artistsroute. Do the same for albums in
app/routes/albums.jsand songs in
app/routes/songs/song.js. Do the same for artists in
app/routes/artists/artist.jsand albums in
Note: The template files have been provided for you. They include starter code that our test suite relies on so don't change any of the code you'll find there.
app/templates/application.hbsyou'll see a navbar with three list items. The list item with an
"artists"should contain a link to the artists' index page. The same is true of the list items with
app/templates/songs/index.hbswe'll iterate over all of the songs and render a list of song names. Each list item will contain a song name, which should link to that song's show page.
app/templates/songs/song.hbs, we'll display the details of an individual song. Place the song's name inside the
<h4>tags provides, render the song's album in the
<p>tag provided. In the
<ul>provided for you on, iterate over the song's artists and render the artist name, which should link to that artist's show page.
app/templates/artists/index.hbs, we'll iterate over all of the artists and render a list of their names. Each list item will contain an artist name, which should link to that artist's show page.
app/templates/artists/artist.hbs, we'll show the details of a given artist. This page will show their name, wrapped in the
<h4>tags provided. Then, iterate over that artist's albums and render a list of album names. Each name should link to that album's show page.
app/templates/albums/index.hbs, we'll iterate over all of the albums and render a list of their names. Each list item will contain an album name, which should link to that album's show page.
app/templates/albums/album.hbs, we'll show the details of a given album. This page will show the album name, in the
<h4>tags provided. Then, iterave over that album's songs and render a list of song names. Each song name should link to that song's show page.
View Ember Playlister Associations on Learn.co and start learning to code for free.
View Ember Model Associations on Learn.co and start learning to code for free.