How to use current url params in angular controller

Question

I have a dynamic value params in url and I want to get it and use in controller when onload But I have no idea how to deal with $route.current.params

Let say I have this route provider

$routeProvider.when('foo/:bar', {templateUrl: 'template.html'};

Then in my controller

app.controller('mapCtrl', function($scope, $route, $routeParams) {

  var param = $route.current.params.bar;
  console.log(param);

});

If user access foo/abcdefg suppose should show abcdefg in console but I got error. 'Cannot read property 'params' of undefined'

Teammate

what are u getting in $routeParams.bar? – Dukey

undefined, I think because I access the url with typing in url bar without trigger angular. – Teammate

If I use {{$route.current.params.bar}} directly in view then it works. – Teammate

Its better to set up a plunker or fiddle demo to make your code working as it is difficult to tell why it is not working – Dukey

Answer 1

$routeProvider.when('foo/:bar', {templateUrl: 'template.html', controller: 'mapCtrl'};
app.controller('mapCtrl', function($scope, $route, $routeParams) {

  var param = $routeParams.bar
  console.log(param);

});

Fuji

@Teammate check the paramenter name, it should totally match the name you declared in $routeProvider. – Giblets

Answer 2

For example:

In you app_route.js you have to link url pattern to a specific controller and the template to use for displaying datas:

angular.module('mapApp', []).
    config(['$routeProvider', function($routeProvider){ 
                $routeProvider.when('/foo/:bar', {templateUrl: './view/partial/template.html', controller: mapCtrl});
                $routeProvider.otherwise({redirectTo: '/foo/01'});
            }
            ]);

In your specific controller you add the logic (here select data by bar) : Same using for $routeParams & $route.current.params

function mapCtrl($scope, $routeParams, $http) {
    $http.get('./data/myDatas.json').success( function(data){
                                        var arr = new Array();
                                        for(var i=0; i < data.length; i++){
                                            if(data[i].bar == $routeParams.bar){
                                                arr.push(data[i]);                              }
                                            }
                                        $scope.items = arr;
                                        });
}
 mapCtrl.$inject = ['$scope', '$routeParams', '$http']; //for minified bug issue

And in your template.html, the layout :

<div ng-repeat="item in items">
    <h3>{{item.bar}}</h3>
</div>

Don't forget add the ng-view on your index page where you want displaying datas, and ng-app="mapApp" in html tag.

I hope that will help you ^^

for more informations, see : http://docs.angularjs.org/tutorial/step_07

Lest

Answer 3

To access the $route.current.params you of course need to include the ngRoute module which is loaded by including the additional angular-route.js

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-route.js"></script>

You can access the current.params onLoad by creating an init() function or with routeChangeSuccess.

See the code below and the working example on jsfiddle.

 <script type="text/javascript">

 var app = angular.module( "myApp", ['ngRoute'] );

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

app.controller('MainCtrl', [
  '$rootScope', '$scope', '$route', '$routeParams', function($rootScope, $scope, $route, $routeParams){

    $scope.routeParams = {};
    $scope.routeParams.bar = $routeParams.bar;

    var init = function () {
      $scope.initCurrentParams = {};
      $scope.$route = $route;
      $scope.initCurrentParams.bar = $scope.$route.current.params.bar;
      console.log('from init', $scope.initCurrentParams.bar);
    };
    init();

    $scope.$on('$routeChangeSuccess', function() {

      $scope.routeChangeSuccessCurrentParams = {};
      $scope.$route = $route;
      $scope.routeChangeSuccessCurrentParams.bar = $scope.$route.current.params.bar;
      console.log('from routeChangeSuccess', $scope.routeChangeSuccessCurrentParams.bar);
    });
}]);

</script>

<div ng-app="myApp" class="ng-scope">
    <script type="text/ng-template" id="template.html">
      $routeParams.bar: {{ routeParams.bar }} <br />
      initCurrentParams.bar: {{ initCurrentParams.bar }} <br />
      routeChangeSuccessCurrentParams.bar: {{ routeChangeSuccessCurrentParams.bar }} <br />
    </script>

    <div class="ng-scope">
      <ul>
          <li><a href="#/foo/1">bar 1</a></li>
      </ul>
      <ng-view></ng-view>
    </div>
  </div>

Povertystricken