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.
Related
I just learned how to create custom directives with angular today via codeschool and it is fantastic! The way it taught me was to make a directive in my JS file, link it to an html file, then write the tag accordingly in the index.html file which is my main file.
My question is does creating a whole new html file for a custom directive hurt load times on the main page? If you want a reference to the section I'm in, it is shaping up with angular level 4 (custom directives).
It depends on whether or not you precompile the templates directly into your main.js or not.
If you precompile them, your main.js will take longer to load, but, when rendering the view, angular won't need to send an http request to get the template so rendering will happen faster.
If you don't precompile them, the up front load time will be faster, but rendering the view may be slower the first time because angular needs to send an http request to get the template for the first time. after the first load, it will be cached in the template cache.
You could also use a hybrid solution, precompiling things needed for the main entry to your app, and letting angular request the rest as needed.
which one is better is a debate not suited for stackoverflow.
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
https://docs.angularjs.org/guide/bootstrap
In this guide it says "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"
But what exactly does it mean in the next statement "Angular initializes automatically upon DOMContentLoaded event". Can anyone explain what this initialize means and then how angular.js can block the HTML loading?
When the HTML parser comes across any script elements, It assumes that document.write may be present in the script and it blocks HTML loading. That's why it's recommended to load all scripts at the bottom of the page to ensure page loads fast.
By the statement, Angular initializes automatically upon DOMContentLoaded event, it means that angular bootstraps the app once the DOM is ready.
I saw in many websites like twitter.com when you navigate between views by clicking navigation bar menus, then views loaded only one time and the loading spinner appear only for the first time the view has been loaded. If you back to the view again,it loaded directly and the loading spinner does not appear again.
I wonder, how can i do something like that using AngularJS ?. I need any tutorials to help me doing this or put me on the road.
This is already a core part of angular. Have a read of the $templateCache documentation. Here is a simple excerpt:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.
So when using something like ng-include to grab a remote template via a file, it will only be loaded once, and automatically placed into this cache and reused when necessary.
If instead you are wondering how you go about only reloading part of the page, then you need to look at ng-view (which is part of the basic route module), or ui-router for more complex hierarchical view layouts.
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"