Angular: Passing params from $routeProvider to controller

Question

I have multiple routes that invoke the same Controller and I would like to pass different variables to it.

// Example
$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleB'
});

I know that I could use the "resolve" object:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    resolve: {test: function() { return true; }}
});

To pass a value as a dependency:

app.controller('MyController', ['$scope', 'test', function ($scope, test) {
  console.log(test); // true
}

My problem with that approach is that my app crashes if the resolve object is missing on other routes and I would like to pass optional params.

Is there any way to pass specific params to the Controller (from the route provider)?

---

Thank you

Answer 1

Routing:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleB'
});

Access: inject $route in your controller then use this

 app.controller('MyController', ['$scope', '$route', function ($scope, $route) {
      var paramValue = $route.current.$$route.paramExample;
      console.log(paramValue); 
 }

Answer 2

You can use resolve and $route.currrent.params.test to pass the parameter like this:

$routeProvider
  .when('/a', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = true; }
    }
  })
  .when('/b', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = false; }
    }
  })

Then in your controller you can access it from the $routeParams:

app.controller('MainCtrl', function($scope, $routeParams) {
  $scope.test = $routeParams.test;
})

http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview

Answer 3

The most natural way to do this is doing what you would normally do when you want to load a page with parameters: use query parameters: http://yoururl.com?param1=value&param2=value

ngRoute comes with the service $routeParams which you can inject in your controller. Now you can simply retrieve the values like this $routeParams.param1.

Another way to do this is to retrieve the path with $location.path and set the variable there.

Answer 4

using $routeParams

in Main js file

routeApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: '../sites/./home.html',
        controller: 'StudentController'
    })
    .when('/viewStudents/:param1/:param2', {
        templateUrl: '../sites/./viewStudents.html',
        controller: 'StudentController'
    })
    .otherwise({
        redirectTo: '/'
    });
 });

 routeApp.controller('StudentController',['$filter','$routeParams', '$location',function($filter,$routeParams,$location){
   var StudentCtrl = this;  
   StudentCtrl.param1 = $routeParams.param1;
   StudentCtrl.param2 = $routeParams.param2;
 }]);

calling from Home.html

 <div class="container">
   <h2> Welcome </h2>
   <a href="#/viewStudents/myname/somevalue2">Students</a>
</div>