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 {{ }}
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
I use Angular JS library to display preloader during is loaded content from AJAX response.
In tutorial tells about using some preloaders on page based on $scope model.
But it does not work for me:
<div ng-show="myLoadingConditional" ng-activity-indicator skip-ng-show="yes"></div>
Can you share a right way using?
I'm implementing something where the view changes based on the selected value of a select dropdown. I'm doing this using ng-include="mySelectedValue", which is attached to <select ng-model="mySelectedValue" ng-options="..."></select> tags.
Just wondering what happens under the hood, because this is essentially a SPA with no routes that is being loaded inside one of my Rails apps.
When the app gets loaded, does it just load all the views in the browser somehow? I don't get how angular works so magically. Would love to know how views are popping up when there are no server calls.
I assume mySelectedValue is a src.
According to Angular Docs:
By default, the template URL is restricted to the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on it.
$sce.getTrustedResourceUrl is basically an ajax request to fetch the corresponding template. So your server call is here :)
After that, there goes the $compile for the template, and renders the view.
I have a problem with acessing $scope in prettyPhoto inline opened HTML.
This is simple HTML in which I have ng-click.
<div id="inputMask" class="gridSystem modalWindow responsive" style="display:none;">
...
</div>
and here is JS for creating prettyPhoto modal window:
$.prettyPhoto.open('#inputMask','','');
PrettyPhono creates special DIV, which I cannot connect with controller and/or $scope.
Does anybody have any idea how this should be made?
Tnx
AngularJS would not work with dynamically generated content that the prettyphoto plugin generates, since angular needs to compile the html and setup the necessary watches.
You need to wrap the jquery plugin into a directive and manually update the scope elements based on the events handlers available for the plugin.
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"