How to reuse a controller in angularjs with different variables based on route

Question

I have a requirement to load a web service. I liked the angular way of displaying, sorting and filtering tables, and what I built worked great. Now I'm trying to expand this: based on the link selected, I'd like to display different data, but from the same web service, in the same way. I'm trying not to duplicate code so I'm trying to reuse the controller and now I'm confused. This means that I want to

• display a different partial / template url.
• load different url parameters.
• map a few things after JSON has been returned.

What would be the best way of tackling what i've so far considered to be more changes in config? I started by routing to a variable ( when('/change-requests/:businessUnit' ), and then use that to load different values. But, how do I then change the template url? On the other hand, if I just add a route and load a different URL template (reusing the controller), how do I load a different url in the ajax call? I'm not very familiar with Angular, so maybe I'm barking up the wrong tree...

Here are the relevant parts of my original code. There's more to it but none of that has to change. I've put some inline comments where you'll find the bits that I'd like to change, depending on the links selected.

HTML:

<div ng-view></div>

Router:

  $routeProvider.when('/change-requests/business-solutions', {
                    //this template will be different
                    templateUrl: 'js/modules/changeRequests/partials/business-solutions.html',
                    controller: ChangeRequestCtrl
                })

(parts of the) Controller:

        function ChangeRequestCtrl($scope, $location) {

                $scope.loaded = false;
                $.ajax({
                    //this url will be different
                    url: url,
                    success: function(json) {
                        $scope.$apply(function() {
                            $scope.changes = json.map(function(row) {
                                //this array map will be different
                                return row;
                            });
                            $scope.loaded = true;
                        });
                    },
                    error: function() {
                        $scope.error = true;
                    }
                });
        }

If I'm not making sense, I'll try to clarify.

Answer 1

If you want to use a reuse controller name then you should be using resolve property with the routes and use that resolve property in the controller

 $routeProvider.when('/change-requests/business-solutions', {
                    //this template will be different
                    templateUrl: 'js/modules/changeRequests/partials/business-solutions.html',
                    controller: ChangeRequestCtrl, resolve: {
            resolvedprop: ['$route', '$q', function ($route, $q) {
               var apiObject = {url: 'abc.com' };                      
               return apiObject     
                     }],
        }
                })


     function ChangeRequestCtrl($scope, $location,resolvedprop) {
       url = resolvedprop.url ;
       }