Alternative to ng-show/-hide or how to load only relevant section of DOM

Question

When using ng-show/-hide, the content included in those blocks initially displays on the user screen. Only after few milliseconds (after angular.js has loaded and executed) does the right block show up in ng-show.

Is there a better way than ng-show/-hide to load only the relevant section of data into the DOM?

The problem with ng-view is that I can have only one on the page, so I have to toggle the behavior of many sections of the DOM based on the current state.

Evora

Answer 1

To avoid the "flash of uncompiled content", use ng-bind instead of {{}} or use ng-cloak:

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

If you use ng-cloak, and you do not load Angular.js in the head section of your HTML, you will need to add this to your CSS file, and ensure it loads at the top of your page:

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

Note that you only need to use these directives on your initial page. Content that is pulled in later (e.g., via ng-include, ng-view, etc.) will be compiled by Angular before the browser renders.

Is there a better way to load data other than ng-show / hide, in which only the relevant section is loaded into the DOM.

Some alternatives to ng-show/ng-hide are ng-include, ng-switch and (since v1.1.5) ng-if:

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

See also https://mcmap.net/q/112725/-create-a-single-html-view-for-multiple-partial-views-in-angularjs for an example of ng-switch working together with ng-include.

Note that ng-switch and ng-if add/remove DOM elements, whereas ng-show/hide only alters the CSS (if that matters to you).

Maurita

The css is not required since Angular puts this in your head. – Liatris

@user1226868, thanks for the comment. I have reworded my answer to essentially note that if you load Angular at the bottom of your page (which is often recommended), the CSS will load too late. Also, to quote the ng-cloak API page "For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application." – Maurita

I'm trying to use ng-if based on a function expression. However even though the function is working, the ng-if does not remove the DOM. In fact on my recent AngularJS app, it doesn't do anything. I had to resort to ng-show. Can anyone give an actual example of an ng-if working at removing the DOM? – Pejorative

@CMCDragonkai, plunker with ng-if. Note Angular v1.1.5 is being included. – Maurita

Hi @MarkRajcok I've tried this solution, but it hasn't worked for me :( do you mind taking a look here? Let me know what I need to include to make it easier to debug! #30540619 – Sharpie

@MarkRajcok I think you mean use ng-bind instead of {{ }} to show the content – Kharkov

Answer 2

I used the ng-cloak trick and it doesn't seem to work that well. Following the Angular documentation I added the following to my CSS and that does work:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

See: http://docs.angularjs.org/api/ng.directive:ngCloak

Morra

Answer 3

Per Mark Rajcok's fine answer, here's a CodePen showing ng-show, ng-switch, and ng-if in action, so you can compare the approaches, and see differences in how the conditional content is actually rendered.

Note that some people feel that ng-show is a little faster than ng-switch and ng-if for file-based templates. But you can use $templateCache to preload your templates at bootstrap time, reducing or eliminating that advantage. Using ng-switch and ng-if, you no longer have to deal with hidden conditional content being in the DOM when it's not needed, and prevent expressions on that content being evaluated by Angular at inopportune times. That saves you processing resources you don't need to waste, and avoids errors that can be thrown when something's evaluated prematurely.

Resistor