Change URL without removing history in Angularjs

Question

I'm using 'ui.router' and '$state.go' to redirect page,

'navbar' of my project looks like this.

<ul class="sidebar-menu">
    <li class="active">
        <a ui-sref="root.menu({brand_id:nav.brand_id})">
            <i class="fa fa-building-o"></i>
            <span> {{nav.navInfo.menu.auth_name}}</span>
        </a>
    </li>
    <li>
        <a ui-sref="root.picture({brand_id:nav.brand_id})">
            <i class="fa fa-book"></i>
            <span> {{nav.navInfo.picture.auth_name}}</span>
        </a>
    </li>
    ...
</ul>

Each page show table which has list of items first.

Let us supposed a situation.

When I am in 'menu' page, I search a keyword.

Following my code, URL changes including keyword.

For example, this works like

Before searching :

/menu?page=1&offset=0&limit=10

After searching :

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

.

.

Then, I click 'menu' tab in 'navbar' to get entire list again.

At this time, I wanted to change URL using trigger ui-sref or $(location) or something.

When using $(location).attr('href', url), changing URL successfully

but if I clicked browser back button, browser history did not maintain.

And also I've used window.location.href, window.location.replace but same result.

How can I maintain history in this case?

I'm ready for trying all ways of your suggestions!

.

.

PS.

If this is not enough explanation, please give me feedback.

Actually, I have no idea how to explain this more specifically. :(

And I've tried this in 'js', not 'controller'.

There was no special reason that I've done this in 'js'.

Just I thought that might be more easy way.

Thanks in advance!

.

.

UPDATE

I can change page by clicking each tabs on 'navbar'.

This works using ui-sref and perfect.

My main problem is, for example, when '.active' class is in 'menu' tab,

click 'menu' tab once again, ui-sref did not work.

So I used $location, window or something in 'js',

after this what I've gotten was 'removed history'.

I want to make page in initialized status when I clicked 'menu' tab like.

Before click tab :

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

After click tab :

/menu?page=1&offset=0&limit=10

One more, I'm putting ?page=1&offset=0&limit=10 into URL manually,

so what I just have to do is firing ui-sref or changing URL without removing history.

Answer 1

Have you tried to use angular service $location? for example:

$location.path("/main_page");

Then you maybe need to use $scope.$applyAsync();

Update (after comments below)

services.service("$way", ["$location", function ($location) {
    var self = this;
    var lastBack;            //last page where you was
    this.way = new Array();
    var LIMIT_LENGTH = 30;   //limit of route history
    var curScope = null;     //current scope
    var active = true;       //is service active

    this.step = function (path, $scope) {
        curScope = $scope;
        if (lastBack != path) {
            lastBack = null;
            this.way.push(path);
            if (this.way.length > LIMIT_LENGTH) {
                this.way.shift();
            }

        }
    }

    this.goBack = function () {
        if (active) {
            var path = back();
            lastBack = path;
            if (path != "/") {
                $location.path(path);
                curScope.$applyAsync();
            }
        }
    }

    this.setActive = function (_active) {
        active = _active;
    }

    this.refresh = function () {
        this.way = new Array();
    }

    function back() {
        if (self.way.length > 1) {
            self.way.pop();
            Log.o("WAY_BACK", self.way);
            return self.way[self.way.length - 1];
        }
    }
}]);

Example:

$way.step("/blog", $scope);  //add page to path
$way.step("/main", $scope);  //add page to path
$way.goBack(); // now you on /blog page

Answer 2

Well if you are using Angular routers, don't use window.location or $(location) to change the page url and location. Angular router has its own mechanism of doing that, which is $state.

You need first to inject $state in your controller then you can use:

$state.go('yourStateHere');

This will keep all the tracking the history in your browser.

Note:

Make sure that your states are well defined in your app.js, I mean you need to define a respective state for the serach page taking into considertaion all the search params.

For further details you can check:

• ui-router Quick Reference.
• StateProvider Reference.
• AngularJS Routing Using UI-Router tutorial.