javascripthtmlangularjsperformancenonblocking

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

In Angular 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 might I encounter if I put the angular.js script at the bottom of the body to prevent my HTML from blocking? And where can I learn how to deal with this problem? Thank you all!

Solution

  • 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