In all of the AngularJS examples, the Angular library is placed in the HEAD tags of the document. I have an existing project that has been built upon the HTML5 Boilerplate layout. This defines that JS libraries should be placed at the very bottom of the DOM before the </BODY> tag.
Does AngularJS need to be placed in the HEAD?
AngularJS does not need to be placed in the HEAD, and actually you normally shouldn't, since this would block loading the HTML.
However, when you load AngularJS at the bottom of the page, you will need to use ng-cloak or ng-bind to avoid the "flash of uncompiled content". Note that you only need to use ng-cloak/ng-bind on your "index.html" page. When ng-include or ng-view or other Angular constructs are used to pull in additional content after the initial page load, that content will be compiled by Angular before it is displayed.
See also https://stackoverflow.com/a/14076004/215945
This one answer on Google Groups gave me perfect insight (shortened):
It really depends on the content of your landing page. If most of it
is static with only few AngularJS bindings than yes, I agree, the
bottom of the page is the best. But in case of a fully-dynamic
content you would like to load AngularJS ASAP [in the head].
So if your content is generated in large part through Angular, you'd save yourself the extra CSS and ng-cloak directives by just including Angular in the head.
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
Not necessarily.
Please take a look at this http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview.
Where the angular js is placed at the bottom of the page, and still renders the same output if it were to be placed at the top.
Loading Angular JS at the bottom of the page does result in a flash of ugly {{ something }} html. Using the ng-cloak directive in the body tag creates an empty flash until the JS is loaded so it doesn't add any benefit over just loading AngularJS in the head element. You could add ng-cloak to every element with ng directives in it but you'll end up with a flash of empty elements. Soooo, just load Angular and your app.js files in the head element as the Angular documentation recommends in this quote from their documentation: "For the best result, the angular.js script must be loaded in the head section of the html document"
Related
I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?
I want to know how boot process is done in angular. Which file is executed first and when execution started js file is executed first and execution of html body is started?
Placing the script tag at the bottom of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script.
AngularJS does not need to be placed in the HEAD, and actually you normally shouldn't, since this would block loading the HTML.
However, when you load AngularJS at the bottom of the page, you will need to use ng-cloak or ng-bind to avoid the "flash of uncompiled content". Note that you only need to use ng-cloak/ng-bind on your "index.html" page. When ng-include or ng-view or other Angular constructs are used to pull in additional content after the initial page load, that content will be compiled by Angular before it is displayed.
I have some animation libraries that are loaded at the end of the page. Problem is they are not binding to the html that is populated via the directives.
Is there a way to load the scripts after the view has been completely rendered (including the directives)?
When a script is placed inside angular app element (ng-app on html not body or <script> inside body), <script ng-src="...> will force first bootstrap angular and then only put scripts for download. But mind the fact that if you have multiple libs they will be downloaded in parallel, and order in html won't be tracked in contrary to scripts directly loaded from head at page load.
Alternatively you can add ng-if="doLoadExternalScripts", for example, and specify a truthy value to this variablle when you consider it is right time, for example if your directives are not rendered on init of app
I've just started the process of learning Angular and I'm a bit stumped. Currently, I have a master blade template that I use site wide in my Laravel app. Here is the pertinent piece.
<body>
#include('navbar')
#yield('content')
#yield('content2')
</body>
In order to use AngularJS, I have to place the tag ng-app in the body line. If I have several pages that use different pieces of AngularJS code, how can I change the tag?
I'm hoping that someone has an idea. Help.
Thanks in advance.
ng-app can be placed anywhere, on any element.
So, if you have one app for navbar, simply add ng-app="navbarApp" to the top most element of your navbar template.
As an aside, I would recommend reconsidering using separate apps, and instead focus on one app with several controls for various portions of your application. This way the body element is your ng-app element, and the top most element of your navbar template is simply a ng-controller element.
Then you set a <div ng-view> element under your navbar and you can either assign each of your content includes it's own controller and still load as a single page, or you simply load the page with only the navbar portion and dynamically load views into this portion by performing simple controller routing.
This simplifies the views structure on the server side since you no longer have to worry about creating layout templates for every potential combination of components. Just create the components and let the front-end load the components where needed.
Note: This is assuming you are building an application that doesn't require SEO capabilities.
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?