Federico Nastasi Federico Nastasi - 1 month ago 10
Javascript Question

Avoiding to show the html angular tags when loading AngularJS app

I'm a newbie in Angular JS(I'm using #1.5.8)and I'm following the docs.angularjs.org/tutorial tutorials.

I've the html

<div class="jumbotron">
<h1>{{application_name | uppercase }}</h1>
<p class="lead" >
</div>


where is set in main.js

$scope.application_name='app';


everything is going well, but every time I reload manually(refresh localhost page) or with gulp, the page renders earlier the html,the user sees
application_name
printed in big and after is rendered with the wanted value.


My question is :

is there a way to avoid showing Angular js expressions when rendering the page for first time?

I want that when I go to the localhost page, the page shows app and not
application_name

Answer

You can avoid it by not using brackets...

<div class="jumbotron">
        <h1 ng-bind="application_name | uppercase"></h1>
        <p class="lead" >
   </div>

As Stephen C commented above you can also use ngcloak..

<div class="jumbotron" ng-cloak>
        <h1>{{ application_name | uppercase }}</h1>
        <p class="lead" >
</div>

Here is a great link about the difference between cloak and bind. Differences between ng-bind and ng-cloak in angularjs

In summary, directly from that link:

ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

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.