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
– whyceewhite, Commented Oct 4, 2014 at 3:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 4, 2014 at 5:55

Kostia Mololkin

72610 silver badges25 bronze badges

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

4 Comments

mpatel Over a year ago

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 ?

Kostia Mololkin Over a year ago

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

mpatel Over a year ago

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 ?

Kostia Mololkin Over a year ago

please check the update,you can define IsSearchFilterSetup anywhere ,inside the controller definition for example

Collectives™ on Stack Overflow

Change the URL without changing view and controller AngularJS

1 Answer 1

SomeCtrl.js

SomeResourceOrService.js

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SomeCtrl.js

SomeResourceOrService.js

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related