CODEWITHSUNDEEP
javascripthtmlangularjsperformancenonblocking
CastenettoA
CastenettoA

Reputation: 693

What problems I will face if I put angular.js at the bottom of the body?

On anguler official guide - bootstrap I read:

Place the script tag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script. You can get the latest bits from http://code.angularjs.org. Please don't link your production code to this URL, as it will expose a security hole on your site. For experimental development linking to our site is fine.

And also on the same site AngularJS ngCloack I read:

For the best result, the angular.js script must be loaded in the head section of the html document

I am a neophyte in angularjs, and my question is:

what problems I might encounter if you put the angulas.js script at the bottom of the body, so as to make my html non-blocking? And where I can learn how to deal with this ploblem? Thanks you all!

Upvotes: 1

Views: 815

Answers (1)

georgeawg
georgeawg

Reputation: 48968

The main issue is that if you load the script at the bottom, then for ng-cloak to work properly, the CSS for the ng-cloak classes need to be loaded at the top.

From the Docs:

ngCloak works in cooperation with the following css rule embedded within angular.js and angular.min.js

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.

-- AngularJS ng-cloak Directive API Reference

Upvotes: 2

Related Questions