How can I change params in url with AngularJS?

Question

I want change the url in my angularjs app on the fly by tipping in a inputfield.

e.g.

I stay on: http://localhost/test/year/2012
I will change on the side via a input field the year to 2013 that call my yearIsChanged function, than the url should changed to http://localhost/test/year/2013
But with my current configuration the url is changed to http://localhost/test/year/2012/?year=2013

My modul configuration.

var module = angular.module('exampleApp').
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/test/year/:year', {templateUrl: 'partials/test.html', controller: OverviewCtrl, reloadOnSearch: false}).
        otherwise({redirectTo: '/'});
}]);

Controller action:

 function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
        $location.search('year', $scope.year);
    }   
}

asgoth · Accepted Answer · 2013-01-05 17:34:42Z

7

$location.search will create an url like:

http://localhost/test/year/2012?year=2013

which is not what you want. You need to use $location.url():

function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
        $location.url('/test/year/' + $scope.year);
    }   
}

answered Jan 5, 2013 at 17:34

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Silver52 Over a year ago

Ok, that change my url correctly. But with $location.url(...) is the page reloading and the "reloadOnSearch: false" param is not working. Has AngularJS another param for e.g. reloadOnUrlChange?

asgoth Over a year ago

Your OverviewCtrl will be executed again when the route actually changes (e.g. not when you enter '2012')

Silver52 Over a year ago

If I enter something in my inputfield, then the controller is reinitialized and I lost the focus of my inputfield. It is a problem because I can not focus the inputfield for every character. :D

asgoth Over a year ago

Can't you trigger it on blur? or on change, but not on keypress?

Silver52 Over a year ago

I have changed my inputfield to a select. I have always the same problem that the focus is lost, but I can live with it. Thanks for your help

Valentyn Shybanov · Accepted Answer · 2013-01-05 18:29:54Z

Actually if you'll use 'search' then $location service will change 'search' part of URL, see URL spec. So AngularJS will detect that routing would not be changed and has possibility not to reload controller (reloadOnSearch:false).

But using .url or .path methods can change whole URLs, but AngularJS router can't detect can it re-use controller or not. So the only option is apply routing table to new url and re-initialize routes.

To achieve your goal (specific urls like /year/2012) without re-loading controller, you can:

rewrite ngView directive (and possible some changes to default routing in AngularJS) and try to re-use scopes. This sounds like quite havy change.
Don't use default AngularJS routing and implement desired behaviour by yourself.

Here is sample Plunker that illustrates second option (press small blue button in preview pane to see how URL changes, and also check that prev/next browser's buttons do not reload page/controller).

Milad · Accepted Answer · 2014-06-04 08:02:41Z

5

You should notice that in your route :

"when (' / test / year / : year ' "

the BOLD word , is a routeParam and is not search fileds.

So if you want to change your route , you should use this :

    function OverviewCtrl($scope,$routeParams, $location) {
      $scope.yearIsChanged = function () {
       $location.path('/test/year/'+$scope.year)
     // .path() will set(or get) your routeParams 
     // .search() will set(or get) your seach fields like your error
     }   
   }

answered Jun 4, 2014 at 8:02

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Collectives™ on Stack Overflow

How can I change params in url with AngularJS?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related