{"id":22379,"date":"2015-07-02T23:21:14","date_gmt":"2015-07-02T17:51:14","guid":{"rendered":"http:\/\/www.tothenew.com\/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:\/\/www.tothenew.com\/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":1},"categories":[1439,3429,1],"tags":[3955,955,4697,55],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/22379"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/99"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=22379"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/22379\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=22379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=22379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=22379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}