{"id":12283,"date":"2016-05-05T16:15:06","date_gmt":"2016-05-05T13:15:06","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=12283"},"modified":"2017-12-19T16:28:48","modified_gmt":"2017-12-19T14:28:48","slug":"angular-js-location-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-location-example\/","title":{"rendered":"Angular.js $location Example"},"content":{"rendered":"

One of the scenarios that you may have encountered while using AngularJS in your project is having to use the current URL of the website. It becomes especially important when you have to do routing or when the current URL is crucial to the well-functioning of your web-app. There’s an AngularJS service we use whenever we have to deal with these cases: $location<\/code>. Below, you can read about how you can use it too!<\/p>\n

1. What is $location<\/em>?<\/h2>\n

$location<\/code> is an Angular service which enables you to have the URL in the browser’s address bar parsed and made available for use in your application. From there you can go on to use it however you wish, be it changing it, or using it to refresh your page (this you’d have to do manually). The changes that are made on the URL directly from the address bar will be immediately reflected into your $location<\/code>, and similarly the changes you’d perform on the $location<\/code> will be made visible into the address bar of the browser you’re using.
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

1.1 $location<\/em> functions<\/h3>\n

The $location<\/code> service has a number of functions which serve to define this service as much as make itself useful in many ways related to URLs. One of these functions, as mentioned briefly before, is the ability to expose the current URL found on the address bar, so that you can either watch or change it, depending on what your application requires.<\/p>\n

The second function is providing you with a “live communication channel” with the address bar. That consists of a synchronization between $location<\/code> and the address bar that reflects all the changes in a two-directional manner whenever you change the URL directly from the address bar, click on a forward or backwards button in the browser, click on a history link or another random one in the page you’re currently viewing.<\/p>\n

Another very important function of the service is enabling us to view the URL we’re getting not only as a simple object but as a set of methods. You have a URL in your hands? That translates to having a full set of methods such as protocol, host, port, path, search and hash. That would make it much more easier for you to understand and modify the URL you’re getting. Handy, right?<\/p>\n

1.2 $location<\/em> vs. window.location<\/em><\/h3>\n

If you already know what window.location<\/code> does, and are just now being presented to $location<\/code> you might be asking yourself: are they the same thing? Well no, however their purpose is the same: to allow reading or writing the browser’s current location. What are some other similarities and differences between them?<\/p>\n

Regarding the similarities, I’d say that is about it: they have the same purpose (and to be fair $location<\/code> is based on window.location<\/code> on that one) but are different in how they approach bringing that purpose to fruition.<\/p>\n

That would mean we would have an impressive number of differences between the two. The first one of the bunch would be the API approach. While window.location<\/code> would return a straightforward object with all it’s properties and methods and whatnot (which can also be modified directly), $location<\/code> would return getters and setters, similar to jQuery.<\/p>\n

The next aspect to consider would be the integration. window.location<\/code> cannot be integrated with neither the Angular application life-cycle, nor the HTML5 API. That would be pretty easy for $location, which can do both, and seamlessly at that.<\/p>\n

The last difference would be in whether they have awareness of the context from which the document is loaded or not. Can you guess which has this and which not? If you guessed $location<\/code> would win this round too, then you were completely right! While window.location.pathname<\/code> would include the docroot in the result it’s give to us, it’s colleague from the other company would just return the actual path from which the document was loaded. Time to upgrade!<\/p>\n

2. Configuration<\/h2>\n

The $location<\/code> service works differently based on what configuration it’s currently using. Yes, you have to configure it before using it! For some applications the default configuration is more profitable, for others you have to change it in order to get new features made available to you. Once you have the configuration instantiated you can interact with the $location<\/code> using the getter and setter methods that come with it, which we will get to discussing a bit later.<\/p>\n

2.1 The $locationProvider<\/em><\/h3>\n

There are two configuration modes that you can use: the Hashbang mode and the HTML5 mode. Before explaining each of them we’ll first take a look at one crucial element that we’ll use to configure our $location<\/code>. That would be the $locationProvider<\/code>.<\/p>\n

$locationProvider<\/code> is a provider in the ng module that is used to configure how the application’s deep linking paths are stored. It has only two methods which are used to set the parameters as we want them: html5Mode()<\/code> and hashPrefix()<\/code>.<\/p>\n

The first one, html5Mode()<\/code>, is a boolean value or object that takes only one parameter which would define the mode we want to use on our $location<\/code>. This parameter can be either TRUE<\/code> in case you want to use the HTML5 mode, FALSE<\/code> in case you want to use the Hashbang mode which is also the default one, or requireBase:true<\/code> to see relative links.<\/p>\n

The second method, hashPrefix()<\/code>, is only used in Hashbang mode or in legacy browser for the HTML5 mode. It takes only one argument which would be the prefix that will be used for Hashbang URLs.<\/p>\n

The syntax for the configuration is fairly simple and would look a lot like the code snippet below:<\/p>\n

syntax.js<\/em><\/span><\/p>\n

$locationProvider.html5Mode(true).hashPrefix('*');\r\n<\/pre>\n
What we’ve done here is just invoke the methods mentioned above by using the dot operator to link them with the $locationProvider<\/code>. Still, you might be unclear, since we never clarified what each of the configuration modes meant, but we’ll clarify that on their own time.<\/p>\n
2.2 Getters and Setters<\/h3>\n
We mentioned that after configuring the $location<\/code> on the mode in which you want to work on, there is one way through which you can communicate and interact with it. That would be getter and setter methods. But what are these methods?<\/p>\n
The getter methods are used for the read-only parts of the url. There are four getter methods:<\/p>\n