RSS

Reflecting State in the URL – Angular JS Tip

16 Jan

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.

Advertisements
 
Leave a comment

Posted by on January 16, 2015 in Coding, Design

 

Tags: ,

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

 
%d bloggers like this: