1

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!

PSZ_Code
  • 1,015
  • 10
  • 29
CastenettoA
  • 673
  • 5
  • 17
  • 3
    Duplicate: [AngularJS in HEAD vs BODY](http://stackoverflow.com/questions/15538125/angularjs-in-head-vs-body) – Yogi Feb 15 '16 at 21:11
  • I now that angular.js is very lightweight, but this problem (https://developers.google.com/speed/docs/insights/BlockingJS) it's a real problem and I would put all the script at the bottom of the body And I heard that there could be problems with angular.js. But the response on stackoverflow are not exhaustive, I asked if anyone knows something from which I can learn (sorry for bad english) – CastenettoA Feb 15 '16 at 21:16
  • Duplicate? I ask what ploblem I could face and where I learn why this happens and how I can resolve... – CastenettoA Feb 15 '16 at 21:18
  • 1
    When you load AngularJS at the bottom of the page you will face "flash of uncompiled content" – Liadco Feb 15 '16 at 21:54
  • I never have problems loading angular at bottom. Use `ng-cloak` for sections that require interpolation – charlietfl Feb 15 '16 at 22:21

1 Answers1

2

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Ah, thanks you. I thought it was a general problem, however, it was limited to that function. thanks for the clarity – CastenettoA Feb 15 '16 at 22:55