When I change the path of the page, my ng-view keeps its contents until the new ones are loaded by my routeProvider. Is there a way to hide them immediately and display a spinner till the new ones load?
See this fiddle regarding loading screen (can customize as necessary): http://jsfiddle.net/KmXTy/1/.
I think what you are looking for though is ng-cloak. It hides ng elements until Angular is ready for them.
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
See https://docs.angularjs.org/api/ng/directive/ngCloak.
Also, this may be helpful: Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?.
Related
I am initialising a scope variable to false in controller
$scope.created=false;
However when the page loads for the fist time still the below message flickers once and then hides. Is there a way to stop this flicker and hide it fully when the page loads for the first time.
<div class="alert alert-success" ng-show="created">A new Entity created successfully.</div>
add ng-cloak to your div, it hides it until the controller is loaded.
Jay,
You can try this:
<div ng-init="created=false">
<div class="alert alert-success" ng-show="created">A new Entity created successfully.</div>
</div>
And finally you can create a function that makes the variable created be true.
Look an example: Plunker
<div ng-repeat="item in CategorizedItems"
ng-if="CategorizedItems.length> 0"
class="row customRow itemBorder animated slideInLeft" >
{{item.name}}
</div>
I show the list of items in above div.
On click of a button, CategorizedItems are updated.
i.e
$scope.CategorySelected=function(categoryName){
$rootScope.CategorizedItems =[];
$rootScope.CategorizedItems = $rootScope.Items.filter(function(obj){
if(obj.category.name === categoryName)
return obj
});
}
This method is called.Now, when I go from one class to another, New items appear gracefully but items from previous category appear under the list of new items for a couple of seconds.
This is a common problem in Angular.
Most people do this ...
<div ng-if="false">
don't display me
</div>
and then at end of HTML ...
<script src=".....angular.min.js">
and expect the DIV to not appear. Of course it will initially appear in this scenario since it has no idea what ng-if means UNTIL angular is loaded.
Put your angular script include at top of page.
You may also wish to consider using ngCloak directive or CSS class, which is the documented way of resolving this issue (assuming script tag is at top of page).
If I have real problems with this then I might use $scope.readyToRender boolean variable in my controller to control when to display elements.
e.g. at end of controller code I would set it to true and wrap code in an ng-if='readyToRender'
how to hide angularJs Code when page is refreshed ?
please see this :
how to hide {{userInfo.UserName}} when page is refreshed ?
this is Not user-friendly.
Just use ng-cloak:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>
it hides given elements until your application is loaded. Note that documentation states that for best results, you should load angular.js in the head section, what ensures that functionality is accessible right after head has been processed.
I am using this way:
<div ng-cloak>{{ message.userName || message.text }}</div>
Is this the only / best way to ensure the user does not see the {{ }} when AngularJS is still loading ?
There are several ways to hide content before Angular has a chance to run
Put the content you want to hide in another template, and use ngInclude
<div ng-include="'myPartialTemplate.html'"></div>
If you don't actually want another request made to the server to fetch another file, there are a couple of ways, as explained in the $templateCache docs. There are tools to "compile" external HTML templates into JS to avoid having to do this manually, such as grunt-angular-templates.
Similar to ngInclude, if you put everything in custom directives, with its own template, then the template content won't be shown until Angular has had a chance to run.
<my-directive></my-directive>
With a definition of:
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Content hidden until Angular loaded</div>'
}
});
ngBind as an alternative to {{}} blocks
<div>Hello <span ng-bind="name"></span></div>
ngCloak as you have mentioned (in this list for completeness).
<div ng-cloak>Content hidden until Angular compiled the template</div>
But you must have certain styles loaded before the page is rendered by the browser, as explained in the ngCloak docs.
You can use ng-bind too as the documentation explains.
A typical advantage about ng-bind is the ability to provide a default value while Angular is loading (indeed, ng-cloak can only hide the content):
<p>Hello, <span ng-bind="user.name">MyDefaultValueWhileAngularIsLoading<span/></p>
Then as soon Angular is loaded, the value will be replaced by user.name.
Besides, ng-cloak is useful when dealing with blocks (many HTML lines) and ng-bind on a particular element.
When I call a rest service then i will get .html file from server. But it showing scripts for 1 or 2 seconds. Then it shows correct values.My problem is page loads first then controller binds data. Is there is any way to bind data before loading page?
There are basically two options that I know of:
The preferred option is to add ng-cloak to sections of the page that contain angular templates. From the docs:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
Use ng-bind instead of the {{ }} approach. For example:
<div ng-bind="marked4Reviewcount"></div>
Have a look at the ngCloak directive. It temporarily hides the Angular template while the page is being loaded. You could apply it on the body tag, but it's advised to do it on portions of the page so you get a progressive loading effect.
http://docs.angularjs.org/api/ng.directive:ngCloak