Angular - different route, same template/controller,different loading method

Question

I want to use routes, but I always want to use same template & controller. I have routes like this:

**a/:albumid**

and

**i/:imageid**

In the first case I want to load an array of images and add them to a list. In the second case I want to load a single image and add it to a list.

So the difference is only in data loading. What is the most efficient way to do this?

Also is it possible to animate ng-show? Something like jQuery's slideDown?

Answer 1

Check out this article, it describes a way to do exactly what you want:

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

I've used the technique, it works well.

In a nutshell, something like this for routing:

$routeProvider
    .when("/a/:album_id", {
        action: "album.list"
    }).when("/i/:imgid", {
        action: "images.load"
    })

Then in your controller you can access $route.current.action and do the appropriate thing. The trick is to create a function in you controller that does all the work (the article calls it render()) and then call that function when $routeChangeSuccess fires:

$scope.$on(
   "$routeChangeSuccess",
   function( $currentRoute, $previousRoute ){
        // Update the rendering.
        render();
    }
);