title: Nested Routing Behavior for Ember.js
body: <p>Can someone explain the behavior of the router and nested routes in Ember.js?</p>
  
  <p>What are the resulting URL, RouteName, Controller, Route, and Template?</p>
  
  <pre><code>App.Router.map(function(){
      this.resource('profile');
  
      // URL: /profile
      // RouteName: profile
      // Controller: ProfileController
      // Route: ProfileRoute
      // Template: profile
  
      this.resource('artists', function(){
  
          // URL: /artists
          // RouteName: artists OR artists.index
          // Controller: ArtistsController OR ArtistsIndexController
          // Route: ArtistsRoute OR ArtistsIndexRoute
          // Template: artists OR artists/index
  
          this.resource('artists.artist', { path: ':artist_id' }, function(){
  
              // URL: /artists/:artist_id
              // RouteName: artists.index OR artist.index
              // Controller: ArtistsIndexController OR ArtistIndexController
              // Route: ArtistsIndexRoute OR ArtistIndexRoute
              // Template: artists/index OR artist/index
  
              this.resource('artist.tracks', function(){
  
                  // URL: /artists/:artist_id/tracks
                  // RouteName: artists.tracks OR artists.artist.tracks OR artist.tracks
                  // Controller: ArtistsTracksController OR ArtistsArtistTracksController OR ArtistTracksController
                  // Route: ArtistsTracksRoute OR ArtistsArtistTracksRoute OR ArtistTracksRoute
                  // Template: artists/tracks OR artists/artist/tracks OR artist/tracks
  
                  this.route('playing', { path: ':track_id' });
  
                      // URL: /artists/:artist_id/tracks/:track_id
                      // RouteName: tracks.index
                      // Controller: TracksIndexController
                      // Route: TracksIndexRouteRoute
                      // Template: tracks/index
              });
          });
      });
  });
  </code></pre>
  
  <p>If you would like to see all of the code on my github <a href="https://github.com/Gerst20051/HnS-Wave/tree/master/src/stations" rel="nofollow noreferrer">https://github.com/Gerst20051/HnS-Wave/tree/master/src/stations</a></p>
  
  <p>JavaScript file from my github <a href="https://github.com/Gerst20051/HnS-Wave/blob/master/src/stations/js/app.js" rel="nofollow noreferrer">https://github.com/Gerst20051/HnS-Wave/blob/master/src/stations/js/app.js</a></p>
  
  <p>This guide is what I'm referencing <a href="http://emberjs.com/guides/routing/defining-your-routes/" rel="nofollow noreferrer">http://emberjs.com/guides/routing/defining-your-routes/</a></p>
  
  <p>And I copied my app structure from this <a href="https://github.com/inkredabull/sonific8tr" rel="nofollow noreferrer">https://github.com/inkredabull/sonific8tr</a></p>
  
  <p><img src="https://i.stack.imgur.com/Vn9Ie.png" alt="How the app structure looks"></p>
  
  <p>Many thanks in advance and assistance would be appreciated by me and the whole emberjs community on the emberjs struggle bus!</p>