Connecting angularjs to firebase

In AngularJS we have an inbuilt service $location which is used if we want to get the current URL of the browser. The best part of $location service is that it is synchronized with the browser’s URL. So if any change is made to the browser’s URL, $location service will be updated and vice-versa.

We can use $location service to update the browser’s URL and load a different route. This means that the page will not get refreshed if you are using $location service to update the URL, it will just update the page using the new route mentioned.

$location service has some inbuild methods to get the url or some section of it and setting the url or some of its attributes.

Configuring $location

angular.module('myApp', ['ngResource', 'ngRoute'])
.config(function($routeProvider, $locationProvider) { // provider-injector
    $locationProvider.hasPrefix = '!';
    $locationProvider.html5Mode = true;
  });

To configure $location, first we need to inject the $locationProvider dependency and then set the two values i.e. html5Mode and0hashPrefix.

  • html5Mode(mode): {boolean|Object}
    true or enabled:true – see HTML5 mode
    false or enabled:false – see Hashbang mode
    requireBase:true – see Relative links
    default: enabled:false
  • hashPrefix(prefix): {string}
    prefix used for Hashbang URLs (used in Hashbang mode or in legacy browser in Html5 mode)
    default: “”

$location has certain editable/writable methods which can be used to change the url or some part of it. There are some non-editable methods which can only be used to access the url or some part of the url.


absUrl(); // used to access the complete url, it's only a getter method

example: If our current url is https://mail.google.com/mail/u/0/#inbox
so $location.absUrl(); will return
https://mail.google.com/mail/u/0/#inbox
url(); // both getter and setter method

If our url is https://mail.google.com/mail/u/0/#inbox
so $location.url(); will return
/mail/u/0/#inbox if url() method is called without any parameter

url(); has an optional parameter i.e. new url without the base prefix.
i.e. url('/mail/u/0/#send');
protocol(); // its a getter method to access the current protocol

if url is https://mail.google.com/mail/u/0/#inbox
$location.protocol() will return https
host(); // its a getter method to access the current host

if url is https://mail.google.com/mail/u/0/#inbox
$location.host() will return google.com
port(); // its a getter method to access the current port number

if url is http://localhost:8080
$location.port() will return 8080
path(); // its a both getter and setter method to access and set the current path
It will return the current path if called without any parameter and set the path if called with a parameter
Path should always start will a forward slash '/', if we don't add a / in the path, it will automatically add it.
if url is https://mail.google.com/mail/u/0/#inbox
$location.path() will return /mail/u/0/#inbox
search(search,[param]); // it is both getter and a setter method to access and set the search part i.e. anything after ? in the url
If called without any parameter it will return all the search variables with their values in the form of an object.
Parameter can be passed to set the search values in the url

if url is https://mail.google.com/mail/u/0/#inbox?name=pixx&path=studios
$location.search() will return {'name':'pixx', 'path':'studios'}

additionally we can pass values to set the value of search variable 
$location.search('name','somename');
hash([param]); // it is both getter and a setter method to access and set the hash part of the url

if url is https://mail.google.com/mail/u/0/#inbox
$location.hash() will return 'inbox'

additionally we can pass values to hash too change the hash part of the url
$location.hash('send');
https://mail.google.com/mail/u/0/#send
replace(); // It is used to replace the last history entry in the browser rather can creating new entry.

$location.replace(); should be called immediately after we modify any part of the url

Related Posts