{"id":22379,"date":"2015-07-02T23:21:14","date_gmt":"2015-07-02T17:51:14","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=22379"},"modified":"2017-08-03T13:19:23","modified_gmt":"2017-08-03T07:49:23","slug":"manually-bootstrapping-an-angularjs-application","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/manually-bootstrapping-an-angularjs-application\/","title":{"rendered":"Manually Bootstrapping an AngularJS Application"},"content":{"rendered":"

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<\/a>, 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).<\/p>\n

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 :<\/p>\n

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

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.<\/p>\n

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

Step 1:<\/strong> Initialize the Angular on the front-end.<\/p>\n

[code language=”javascript”]
\nvar app = angular.module(‘myApp’, []);
\n[\/code]<\/p>\n

Step 2:<\/strong> 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.<\/p>\n

[code language=”javascript”]
\nangular.bootstrap(document, ["myApp"]);
\n[\/code]<\/p>\n

This will setup the angular application<\/a> onto the front-end.<\/p>\n

So, the sample code for the above mentioned use case will some what look like this:<\/p>\n

[code language=”javascript”]
\nangular.element(document).ready(function() {
\n\tif (window.location.hash === ‘#\/’ || window.location.hash === ‘#_=_’) {
\n\t\twindow.location.href = window.location.origin + ‘\/’;
\n\t} else if (window.location.href[window.location.href.length – 1] === ‘#’) {
\n\t\twindow.location.href = window.location.origin + ‘\/’;
\n\t} else {
\n\t\t\/\/Then init the app
\n\t\tangular.bootstrap(document, ["myApp"]);
\n\t}
\n});
\n[\/code]<\/p>\n

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.<\/p>\n

Hope this helps!!<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":99,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2,"footnotes":""},"categories":[1439,3429,1],"tags":[3955,955,4697,55],"class_list":["post-22379","post","type-post","status-publish","format-standard","hentry","category-angular","category-front-end-development","category-technology","tag-angular-development","tag-angularjs","tag-angularjs-development-company","tag-javascript"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t