How do I prevent the angular brackets {{ }} from temporarily appearing as a static html page loads

8,508 views
Skip to first unread message

Chris

unread,
Feb 9, 2012, 8:24:51 AM2/9/12
to AngularJS
I am currently switching a static HTML page over from JQuery to
Angularjs. The existing JQuery code updates the content of various
DIV's after the page has been loaded in the browser. When I replace
the JQuery implementation with an Angularjs implementation, it works,
but the Angularjs brackets {{ }} temporarily appear on the screen.
This occurs even when I have a default value in the controller scope.

How do I prevent the brackets from temporarily appearing?

Example:
<p><b>{{this.stats.num_players}} </b> players have played.</p>

appears for a split second as {{this.stats.num_players}} rather than
4345. (or whatever the number is)

Message has been deleted

Paul Bininda

unread,
Feb 9, 2012, 8:36:28 AM2/9/12
to ang...@googlegroups.com
What I do is the following.
I have a flag in my model (item.ready) which I initialize to false.
After receiving model data from the server I set item.ready to true.
 In the html I have the following:

<ng:switch on="item.ready">
  <div ng:switch-when="false">
    Loading data...
  </div>
  <div ng:switch-default>
    ...
  </div>
</ng:switch>

Witold Szczerba

unread,
Feb 9, 2012, 10:16:49 AM2/9/12
to ang...@googlegroups.com
The cause of this problem is that your browser is displaying raw
(not-yet-compiled) angular template.
I am preventing it: there is "nojs" class at the top of document.
Using AngularJS directive, I am removing this class, so up until
AngularJS is ready to go and operational, there is "nojs" class. Now,
you are free to implement what is invisible during initialization
using pure CSS.

Example:

<html ...>
<body myApp:remove-nojs class="nojs">
[...]
</body>

/**
* Removes 'nojs' class from element, so the whole
* page becomes visible once angular is operational.
*/
angular.directive('myApp:remove-nojs', function(expr, compiledElement) {
compiledElement.removeClass('nojs');
});


And here is example CSS entry:

/* feat: do not display application until angular is running */
body.nojs div.wrapper {
display: none;
}

/* feat: before angular is ready, display loading animation */
body.nojs div.initializing_panel {
display: block;
background: url(../images/loading.gif) center center no-repeat;
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}

As you can see, until AngularJS is ready, user can see nice "loading"
animation. Background is not affected by 'nojs' class.

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/angular?hl=en.
>

Chris Odney

unread,
Feb 9, 2012, 1:48:46 PM2/9/12
to AngularJS
I remember Igor/Vojta giving a angular-solution to this problem. Or
may be it was in the dev guide. Unfortunately I don't remember what it
was exactly.

Chris.

Misko Hevery

unread,
Feb 9, 2012, 2:04:04 PM2/9/12
to ang...@googlegroups.com
http://docs-next.angularjs.org/api/angular.directive.ng:cloak

Chris

unread,
Feb 9, 2012, 11:53:43 PM2/9/12
to AngularJS
Does ng:cloak only work on angular-0.10.6.min.js?

Starting with the angularjs seed project (0.9.19), if I try do use
ng:cloak, it doesn't work. If I switch to using version 0.10.6 as
shown at the linke provided below, the ng:cloak will work but then I
get lot of errors such as:

TypeError: 'undefined' is not a function (evaluating
'angular.service')
angular-0.10.6.js:6559Unknown provider: $xhrProvider <- $xhr

How do I get ng:cloak working with version 0.9.19?

Chris

ThomasBurleson

unread,
Feb 10, 2012, 12:35:28 AM2/10/12
to AngularJS
@Chris,
I highly recommend the 10.6 or 10.7 code base.

To upgrade, you can look at the [CafeTownsend](https://github.com/
ThomasBurleson/angularJS-CafeTownsend) source code.
It has been tagged with both v0.10.6 and v0.10.7 tags. Studying that
source should make it easy to migrate your own source.
BTW, unfortunately it is written in CoffeeScript... but the ideas and
structures are STILL valid.

- ThomasB

Vojta Jina

unread,
Feb 10, 2012, 3:26:55 AM2/10/12
to ang...@googlegroups.com
There is no ng:cloak in 0.9.*, see changelog for how to upgrade to 0.10.*, it's definitely worthy.

V.

Chris

unread,
Feb 10, 2012, 4:34:26 AM2/10/12
to AngularJS
Thanks for the encouragement. A little bit of work, but worth it to
see the ng:cloak stuff working now.

Cole Orton

unread,
Jun 3, 2013, 4:06:28 PM6/3/13
to ang...@googlegroups.com
Is there any way to have static content not show up until the {{dynamic content}} has loaded? 

Pawel Kozlowski

unread,
Jun 3, 2013, 4:07:24 PM6/3/13
to ang...@googlegroups.com
ng-bind

Cheers,
Pawel

On Mon, Jun 3, 2013 at 10:06 PM, Cole Orton <cole...@gmail.com> wrote:
> Is there any way to have static content not show up until the {{dynamic
> content}} has loaded?
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
>
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

William Candillon

unread,
Jun 3, 2013, 4:07:25 PM6/3/13
to ang...@googlegroups.com


On Mon, Jun 3, 2013 at 10:06 PM, Cole Orton <cole...@gmail.com> wrote:
Is there any way to have static content not show up until the {{dynamic content}} has loaded? 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
William Candillon


Pawel Kozlowski

unread,
Jun 3, 2013, 4:08:56 PM6/3/13
to ang...@googlegroups.com

On Mon, Jun 3, 2013 at 10:07 PM, William Candillon <william....@28msec.com> wrote:

It won't as ng-cloak will simply hide part of the DOM tree. So you won't be able to display static content.

Cheers,
Pawel
Reply all
Reply to author
Forward
0 new messages