Reflecting State in the URL – Angular JS Tip

In the last post I outline a method for parsing parameters to a page, but as people work on the page, they can sometimes modify the parameters. Consider a page that accepts a query value as a parameter, but also allows the user to modify the query value. If you update the page’s address, then bookmarks by the user will always bring them back to the same place/mode.

Here is the implementation for quick reference:

function setAddressBar(param) {
    var curPath = window.location.toString();
    var hashPos = curPath.indexOf("#");
    var newAddr = "";
    if (hashPos>0) {
        newAddr = curPath.substring(0,hashPos+1);
    }
    else {
        newAddr = curPath + "#";
    }
    for (var key in param) {
        if (param.hasOwnProperty(key)) {
            newAddr = newAddr + "/"+key+"="+window.encodeURIComponent(param[key]);
        }
    }
    window.location = newAddr;
}

Discussion

Remember that I am assuming that you are passing values in the URL after the hash as a collection of tokens which are parsed from a name=value pair and they are placed in a param object in the model. This method then turns that around. There is always a slash before the name to separate the tokens.

Whenever a parameter value is changed, call this method to update the URL in the address bar.

Like the parsing, only the parameter value is URL encoded. The name should be chosen so that it does not need encoding. If you wanted to use non-ASCII names, you would need to change both the parsing and the address update in corresponding ways.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s