Manually Bootstrapping an AngularJS Application

We always need some mechanism to control our front-end application at the time when we bootstrap it. Getting some customization done before kicking in the angular on the front end, can be a desired use case for some of the Angular Applications. It is mainly needed when we have to redirect to an Angular application from some other social login sites(Facebook, twitter, etc).

The reason that we need to make changes before bootstrapping the Angular on the front-end is that, these social login sites append few characters to the redirecting urls such as the one below :

[code language=”javascript”]
<www.domain.com>/app#
<www.domain.com>/app/#_=_
<www.domain.com>/app#/
[/code]

So, we need to remove these extra appended characters from the url, before starting up the application on the font-end. As it may cause ambiguity for the angular route provider to serve the correct route.

Now we have to remove these appended characters before bootstrapping up the angular application. You can achieve it by following these 2 simple steps:

Step 1: Initialize the Angular on the front-end.

[code language=”javascript”]
var app = angular.module(‘myApp’, []);
[/code]

Step 2: Once the document gets ready, perform your required customization task. And when you are done with all the changes, then you can bootstrap the angular.

[code language=”javascript”]
angular.bootstrap(document, ["myApp"]);
[/code]

This will setup the angular application onto the front-end.

So, the sample code for the above mentioned use case will some what look like this:

[code language=”javascript”]
angular.element(document).ready(function() {
if (window.location.hash === ‘#/’ || window.location.hash === ‘#_=_’) {
window.location.href = window.location.origin + ‘/’;
} else if (window.location.href[window.location.href.length – 1] === ‘#’) {
window.location.href = window.location.origin + ‘/’;
} else {
//Then init the app
angular.bootstrap(document, ["myApp"]);
}
});
[/code]

It gives you the power, to setup the ground before you kick start your Angular on front-end. There are many more things that you can perform by this method of bootstrapping the Angular application.

Hope this helps!!