AngularJS: Parameterize controller via route

Question

I use the same controller for multiple views. I want to parameterize the controller differently depending on the route taken.

The views display basically the same angular ui grid, hence the same controller. However, in one view I want to pre-filter the grid for specific data, whereas in the other I don't.

How can I do that?

app.config(function ($routeProvider) {
    $routeProvider
        .when('/foo',
            {
                controller: 'Ctrl',
                templateUrl: '/foo.html',
            })
        .when('/bar',
            {
                controller: 'Ctrl',
                templateUrl: '/bar.html',
            });
});

app.controller('Ctrl', ['$scope' function ($scope) { .. }]);

what do you mean by parameterize – Sachila Ranawaka May 04 '17 at 16:45 — Sachila Ranawaka, May 04 '17 at 16:45
updated the question to be more specific. – hansi May 04 '17 at 16:50 — hansi, May 04 '17 at 16:50

score 2 · Answer 1 · answered May 04 '17 at 17:49

Think of it that way. Both routes are the same except one has a filter and one doesn't. so in reality it's the same route with additional parameter filter='some' right so your configuration might be something like this:

app.config(function ($routeProvider) {
$routeProvider
    .when('/foo/:filter?',
        {
            controller: 'Ctrl',
            templateUrl: '/foo.html',
        })
});

and in your controller you'll have $routeParams.filter question mark would be an optional parameter. Then in the Ctrl you would just look for filter parameter and use filter to render appropriately. Btw your view can stay the same just filter your grid anyways. if filter param doesn't exist it will just return same data (unfiltered)

Hope that helps.

This is the right way to do it. The other answer is hacky for angular. Optional query params are the way to go. — chairmanmow, May 04 '17 at 19:41

rayners · Accepted Answer · 2017-05-04T17:17:24.367

At the basic level, you could inspect the current route to see what template was being used and branch off that.

app.controller('Ctrl', function($route) {
  if ($route.current.templateUrl === '/foo.html') {
    doFoo();
  } else {
    doBar();
  }
});

That would only work if you are using different templates for each route. If you wanted to re-use the same template, the resolve property of the route is very useful.

app.config(function($routeProvider) {
  $routeProvider.when('/foo', {
    controller: 'Ctrl',
    templateUrl: '/foo.html'
    resolve: {
      whichRoute: function() { return 'foo'; }
    }
  });
});

app.controller('Ctrl', function(whichRoute) {
  if (whichRoute === 'foo') {
    doFoo();
  } else {
    doBar();
  }
});

And even better than that, the resolve properties can accept functions that return values or promises, so you could do the pre-filtering of the data in there.

app.config(function($routeProvider) {
  $routeProvide.when('/foo', {
    controller: 'Ctrl',
    templateUrl: '/foo.html',
    resolve: {
      dataToDisplay: function(YourDataService) {
        return YourDataService.getSomeData();
      }
    }
  });
});

app.controller('Ctrl', function(dataToDisplay) {
  doTheThing(dataToDisplay);
});

Thank you! Just what I was looking for. – hansi May 04 '17 at 17:28 — hansi, May 04 '17 at 17:28

AngularJS: Parameterize controller via route

2 Answers2