0

Here is my scenario.

  1. Search for customers via "/customers" (app.customers), say I search for "bob"
  2. Click one of the results to get to "/customers/detail/:id" (app.customers.detail).
  3. Hit the back button in the browser, which redirects me to the "/customers" page with no search results.

How can I get it to work so when I hit back I go to the page where the customer search results are displayed using my original search text, "bob"?

I have seen this post but do I really have to create a session service, state history service, and state location service? Seems like there should be a much easier way to get this to work. Thanks.

Community
  • 1
  • 1
BBauer42
  • 3,549
  • 10
  • 44
  • 81
  • Do a Google search, then look at the URL. Notice that it's not `http://google.com/`. I dunno if that's the best way, but it's certainly relatively easy to code. – Nic Nov 23 '15 at 19:32
  • 1
    You're asking how to save the searches; Google shows one way to do it -- URL parameters. If I had any idea if it's useful with ui-router, I'd have left an answer, but since I don't, I left a comment with a hint. – Nic Nov 23 '15 at 19:35
  • It would help if we can see your ui-router config please – mindparse Nov 23 '15 at 19:41
  • Sorry @QPaysTaxes, didn't get what you were trying to say at first, thx. – BBauer42 Nov 24 '15 at 15:57

2 Answers2

1

The correct answer is that you need to change the URL based on the data searched for. When you perform a search for "Bob", change the URL to match that: /customers?q=bob and go to a route that handles that (or just let your one route be able to handle an optional query parameter). This allows you to use the browser's state handler, so that when you go Back to /customers?q=bob, you can handle it.

If you don't want to do it in a way that browsers natively support (urls), you'll have to do it manually, using the services, etc, which is just a pain.

Dan Crews
  • 3,067
  • 17
  • 20
1

Thanks Dan, I went with your suggestion and now have the search parameters in the URL. This is what the URL looks like now:

localhost/#/customers?searchText=test&pageSize=25&pageNumber=1

..and here is my updated state in ui-router. The params section sets the default values and "squashes" the URL parameters if they match the defaults.

.state("app.customers", {
    url: "/customers?searchText&pageSize&pageNumber",
    params: {
        searchText: { value: "", squash: true },
        pageSize: { value: 25, squash: true },
        pageNumber: { value: 1, squash: true }
    },
    controller: "customersController as vm",
    templateUrl: "customers.html",
    resolve: {
        customerService: "customerService",
        customers: function (customerService, $stateParams) {
            if ($stateParams.searchText) {
                return customerService.search($stateParams.searchText, parseInt($stateParams.pageSize), parseInt($stateParams.pageNumber));
            } else {
                //return empty array and default pager
                return null;
            }
        },
    }
})

..and now on the customer page when the user hits the search button I just do this in the controller's search() method.

$state.go("app.customers", { searchText: vm.searchText, pageSize: vm.pager.pageSize, pageNumber: pageNumber });

This UrlMatcher documentation for ui-router was very helpful. This article was also helpful.

BBauer42
  • 3,549
  • 10
  • 44
  • 81