creating routes using Angular JS

Question

Im starting with Angular JS and trying to do this project I have, however I'm encountering some problems.

I know how to make routes using Angular JS the easy way, ie, if you have some specific .html files.

But how do you create something like a temporary .html file? Let me explain.

Let's say I have the main .html page of my CD store. You can make a quick search on my page and then you can click on a CD from a list of CD's in a vector. I want to create a route for that specific CD without having an .html file for each CD. When you click you'd get something like http:.../AbbeyRoad or http:.../AbbeyRoad.html.

Any suggestions?

Answer 1

What you're after is route parameters. You can do this:

.when('/Artist/:ArtistId/Album/:AlbumId', {
    templateUrl: 'album.html',
    controller: 'AlbumController'
 }

The : signifies that this is a parameter, and is passed in during navigation. You can then use that parameter in your controller how you see fit (making API calls, creating markup, etc.).

Like this -- here is your controller:

 .controller('ChapterController', function($scope, $routeParams) {
     $scope.params = $routeParams;
 })

and your view:

<div>
    Artist Id: {{params.ArtistId}}<br />
    Album Id: {{params.AlbumId}}
</div>

Take a look at the $route documentation .