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.

Answer 1

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' },
                            
                        }
                    );
          }]);