My page has header, content and footer.
<div id='header'></div>
<div data-ng-view=""></div>
<div id='footer'></div>
I have binding in header section, how can I delay header view rendering until model loaded to prevent flicker ? I do not want the user to see this while ajax data is loading.
I have checked this post, it only will works for the ng-view.
My page header and footer are part of the master page, they are not governed by $routeprovider
Try ng-cloak. It will hide the page until angularJS is ready.
Try adding a conditional attribute in the header tag.
<div id="header" ng-show="model_name"></div>
Related
I have an angular app with a page and dynamic content.
I use ui router for routing.
I want user to see static html which server side rendering will return it, and when angular is loaded, change html content with ur router templates.
sample static html is:
<div ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
<div>
sample ui router template is:
<div>
<div>{{myModel}}</div>
<p>{{myModel2}}</p>
<span>Lorem Ipsum</span>
<div>
My aims:
User should see some static html, before dynamic content is loaded. Dynamic content will replace it.
Search engines should track static files, not something like <p>{{myModel2}}</p>
I think you can make static content visible before ui-router is resolved like this:
<ui-view>
<div>Lorem Ipsum</div>
<p>Lorem Ipsum</p>
<span>Lorem Ipsum</span>
</ui-view>
Using ui-view as custom tag will render inner HTML without any changes to it, however when route is resolved this content will be replaced with actual route template.
I have this specific issue with the way ng-view renders templates. Whenever a partial is rendered, the div with the ng-view attribute slides up and then again renders with the compiled template. I tried using ngCloak as follows:
<div ng-view autscroll="true">
<!--Partials rendered here-->
</div>
partial.html
<div class="some-class" ng-cloak>
</div>
For better illustration:
Pre render
Post render
Here the dark part is the footer that's static across all pages along with the red header.
How do I prevent this jumping?
I've built a directive <playlist> which calls my custom service to return and then display a list of videos. So far so good. However, I don't want this directive to render and call my API until the user clicks on a link elsewhere on the page.
How can I have a link outside of the directive trigger the rendering of the <playlist> item? I looked for some sort of onShow event to no avail.
You can use the ng-if directive to keep your directive out of the DOM until the link is clicked. So your HTML would looks something like this:
<div ng-if="showPlaylist">
<playlist />
</div>
Then you would just set showPlaylist to true when you want it to show/render.
I was able to figure this out based on dnc253's feedback.
Toggle Playlist
<div ng-if="showPlaylist != undefined">
<playlist ng-show="showPlaylist"></playlist>
</div>
On initial page load <playlist> is hidden and not rendered. Clicking the link renders <playlist>. Subsequent clicks toggle the ng-show attribute and so the scope is not reset.
I want to hide a text message while the js is loading and data binding is not yet applied. I have tried something like this but its always hiding the message
.hide { display: none; }
<div class="hide" ng-hide="haveRecords">No Records found</div>
If I remove the class hide from div. then this element is shown for some milli-seconds before the data binding is applied. How to fix it?
This is what ngCloak is for.
You can use it like this:
<head>
...
<style>[ng-cloak] {display: none !important;}</style>
</head>
<body>
...
<div ng-cloak ng-hide="haveRecords">No Records found</div>
NOTE: The style in the head is only required if you include the AngularJS script at the end of body (which is a good idea anyway).
You should use ngCloak
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.
Code
<div ng-hide="haveRecords" ng-cloak>No Records found</div>
My requirement is to display a spinner image on every $route change request and hide the spinner image on success or error. I am using angular-animate.js to slide the view after the $route success
<div ng-cloak ng-controller="sliderController">
<div ng-view ng-class="{slide: true, left: isDownwards, right: !isDownwards}">
</div>
</div>
I need to hide to progress image (Spinner) after the new page is loaded (ie : on complete page animation)
Any help would be appreciated.
In your code, I don't see anything that is showing what you're doing for the spinner. So this will be just a stab in the dark at what you're looking to accomplish.
One option is to use an app-wide progress bar. Think of how YouTube does page transitions. The Angular Loading Bar is a good solution to accomplish this. I think it uses $http interceptors to do it (good explanation of interceptors).
Another option would be to use $routeChangeStart and $routeChangeSuccess that are part of the $route provider. You can simply have a $scope variable that triggers whether or not the image should be visible.
$scope.$on("$routeChangeStart", function(event, next,current) {
$scope.spinnerDisplayed = true;
});
$scope.$on("$routeChangeSuccess", function(event, next,current) {
$scope.spinnerDisplayed = false;
});
And then your HTML would just have a basic ng-show/hide
<div ng-show="spinnerDisplayed">
<!-- some spinner image here -->
</div>