I have a working helloworld type of app but as soon as the page loads the template code is visible for a split second. What is the best way to stop this happening?
You should use ngCloak directive:
The ngCloak directive is used to prevent the Angular html template from
being briefly displayed by the browser in its raw (uncompiled) form
while your application is loading. Use this directive to avoid the
undesirable flicker effect caused by the html template display.
One option could be adding a loading image to the post request of the ajax call for the json object from controller. That would show you the loader instead of the code until the data comes from the controller. Other than that u could look at ngCloak directive:
http://docs.angularjs.org/api/ng.directive:ngCloak
ngCloak is only good till you app stays at "Hello World!" stage, but as it grows, ngCloak is just another headache in performance bottlenecks of AngularJS.
What ngCloak directive actually does is, it adds styles for ngCloak attribute/class within <head> element and these styles come from AngularJS lib .js file. So if your page is quite heavy (not just HelloWorld), those expression template codes wont go way till AngularJS is loaded.
See here: http://run.plnkr.co/plunks/8IWriNwkzQ2RWmrrQkwC/
I have delayed 5 seconds to load Angular, and despite having ngCloak expressions are visible on the page.
So how to fix it?
Add the class="ng-cloak" as well to body, and keep this styles withing your CSS file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Source: Angular Github
Once angular js is loaded and templates, expressions are compiled, angular removes this class! And everything becomes happy every after.
Related
A client of mine has an issue with his AngularJS Project that during the loading, some interpolations are rendered as text before they are replaced with the proper content. I haven't encountered this behavior before. Does anyone know what they might be doing wrong?
Use the ng-cloak directive to avoid the undesirable flicker effect caused by the html template display.
From the Docs:
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.
The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
For more information, see
AngularJS ng-cloak Directive API Reference
Is there any way to run scripts when AngularJS has finished rendering all the routes, components & directives?
For example when all components and directives with a templateURL have finished rendering.
$timeout is the best way when you need to execute something after the DOM has finished rendering:
$timeout(function() {
});
http://lorenzmerdian.blogspot.de/2013/03/how-to-handle-dom-updates-in-angularjs.html
Please use $timeout service with 0ms delay:
$timeout(function() {
//this code will be invoked when all directives and components will be rendered
});
If it's for display purpose you can use he ngCloak directive.
According to Angular docs it is used to prevent the Angular html template from being briefly being displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
You can also use $http.pendingRequests.
I use Angular routing. When I click to some url, it shows me template with undefined fields until data from http rest service is loaded. Is it possible to wait and show template when data is already loaded and binded?
You can use ng-cloak
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading
Another option is use ng-bind instead of double brackets {{ }}
I am trying to create two tabs using Angular UI (Bootstrap), in which one tab lets the user input HTML, and the other tab serves as a "Preview", rendering the HTML provided.
To handle the preview, I am using the contenteditable directive demonstrated here.
However, this directive does not seem to be working using Angular UI tabs. I believe there may be a scope issue at play, but I haven't been able to track it down. I have already found examples of "gotchas" here, but this doesn't seem to be the issue in my case.
A Plunker of non-working code can be found here. In this example, not only is the HTML not getting rendered, but the scope updates seem to be sporadic.
Any help is greatly appreciated!
You can do this without that directive at all. You just need to use the $sce service in angular. See this plunk
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"