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();
    }
);

Answer 2

I created a super simple directive to handle this that allows routes to be have more like Rails or Codeigniter routes where the controller method is in the route definition. The method name is set in the routeProvider.when options and the directive is set in the template for the route. See: https://stackoverflow.com/a/22714634/250991