Change the URL without changing view and controller AngularJS

Question

In my AngularJS project, I have a form having searching filter. What I do is I can select filters and then click on Search button. It gives me a list of search results. From that search result, I have a button from which I can navigate to another page. Now if I click on "Browser back button", it reloads the first page completely without having my search results- just like a fresh reload of page.

Is there any way so I can change the URL of first page along with query string when I click on Search button and be there on the same page without changing the controller and view ?

Here is my piece of code:

View page:

<div>
    <select class="form-control" ng-options="producttype.Name></select>

</div>
<div>
    <button type="submit" class="btn btn-primary" ng-click="search()">
       Search
    </button>
</div>

In Controller:

$scope.search = function () {
    // Search method to get results
}

The page's url is #/Product.
Config page is :

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Product',
        {
            controller: 'ProductController',
            templateUrl: '/app/product.html'
        })

I want to make it change to #/Product?ProductType=".." when user click on Search button on the same page. I referred link1 and link2 but did not get it. Any suggestions how can I achieve this ? Thanks.

When you start on the search page you want the url = #/Product. But, when you go to the search results page you want the url to contain the query params, ie: #/Product?ProductType=xyz. BUT, you want to maintain the same controller & view? Correct? — whyceewhite, Oct 04 '14 at 03:44

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Product',
        {
            controller: 'ProductController',
            templateUrl: '/app/product.html',
            reloadOnSearch: false
        });

and then in controller

$scope.search = function () {
    // Search method to get results
    ...
    //and after getting results
    $location.search('ProductType', someProductType);
}

did you try this ?

UPDATE
in order to match your url string with view through navigation and etc ,you need to inject $routeParams in controller

SomeCtrl.js

window.app.controller('SomeCtrl', ['$scope',  '$routeParams', '$location', 'SomeResourceOrService' ,
        function ($scope, $routeParams, $location, SomeResourceOrService) {
          //check if filter allready setup
          if (IsSearchFilterSetUp($routeParams))
          {
              //search and update
              SomeResourceOrService.Search({ProductType:$routeParams.ProductType},function(data)
              {
                  $scope.Products=data;
              };
          }  
          ...

and in your case IsSearchFilterSetUp function will be look something like this

 function IsSearchFilterSetUp(routeparmas)
        {
            return routeparmas.ProductType!='';
        }

and resourse something like this

SomeResourceOrService.js

 window.app.factory('SomeResourceOrService',
            ['$resource',
                function ($resource) {
                   return $resource('', {},
                        {
                            Search: { method: 'GET', isArray: true, url: 'someurl' },
                            
                        }
                    );
          }]);

It changed the url but when I click on link, it goes to next page. Now when I click on browser back button, i got the desired url (/products?ProductType=2) but I lost the search result. How can I get the results as well ? — mpatel, Oct 05 '14 at 21:03
one way to acheive this is inject '$routeParams' in conroller and on initialization of contoller check search params and if it is allready set in '$routeParams' perform search with updating of view — Kostia Mololkin, Oct 05 '14 at 22:15
Thank you for your help. But I have a que. Which search and update method should I write inside if condition ? Also where do I need to define IsSearchFilterSetup method ? — mpatel, Oct 06 '14 at 17:16
please check the update,you can define IsSearchFilterSetup anywhere ,inside the controller definition for example — Kostia Mololkin, Oct 07 '14 at 08:17

Change the URL without changing view and controller AngularJS

1 Answers1

SomeCtrl.js

SomeResourceOrService.js