0

I have just started to learn Angular JS. I have a query regarding below code.

<html ng-app>
<head>
</head>
</body>
<h1>{{hello}} </h1>
<input type="text" ng-model="hello"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>

Query: This piece of code is working fine but when I refresh the page I see {{hello}} for a fraction of second. why?

Akki619
  • 2,386
  • 6
  • 26
  • 56
  • Check here http://stackoverflow.com/questions/11249768/angularjs-ng-cloak-ng-show-elements-blink .Use ng-cloak to when your data is ready in scope. – İlker Korkut Oct 15 '15 at 06:28
  • 1
    Because Angular hasn't had a chance to replace the value. One strategy would be to hide a page/div until the data is ready (ng-hide/ng-show) – Romski Oct 15 '15 at 06:28
  • 2
    use ng-cloak in directive. put ng-cloak inside body tag. – Ved Oct 15 '15 at 06:32
  • this code *may* work, but it's already exhibiting a few style problems. first, using `ng-app` without an assignment isn't recommended. Secondly, you should consider loading Angular in the `` element so that it can be available as soon as possible, rather than at the bottom. – Claies Oct 15 '15 at 07:01
  • moving angular script at start of body or head solved the problem – Akki619 Oct 15 '15 at 08:39
  • See this [link](http://stackoverflow.com/questions/16125872/angularjs-why-ng-bind-is-better-than-in-angular) – BhajjiMaga Oct 15 '15 at 10:12

4 Answers4

2

why does it happen?

Your browser will render the HTML, and angular will be just a bit later with it's DOM manipulation

solution 1: ng-bind

You can use <h1 ng-bind="hello"></h1> to fill your H1 tag. Because there is no HTML inside the H1 tag to render, you will not see it flash with the {{hello}} notation when angular hasn't done it's magic yet.

I think the downside for this is that you always need to have a wrapping element around the content you want to show.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

solution 2: ng-cloak

You can use ng-cloak to wrap anything you want to hide as long as angular is not ready.

It would look like: <h1 ng-cloak>{{ 'hello' }}</h1> or <h1 class="ng-cloak">{{ 'hello' }}</h1> in your case.

The benefit I see in ng-cloak is that you can use it to wrap around a larger area. You could use ng-cloak to hide your whole angular-affected area, and display a loader animation while angular is not up and running.

https://docs.angularjs.org/api/ng/directive/ngCloak

JasperZelf
  • 2,731
  • 1
  • 22
  • 34
  • 1
    Just remember to add the `style` for [ngCloak](https://docs.angularjs.org/api/ng/directive/ngCloak) in your `head` otherwise it won't work as you expect as the style would need to be included by Angular. – Cosmin Ababei Aug 17 '16 at 17:16
0

You can change this:

<h1>{{hello}} </h1>

to this:

<h1 ng-bind="hello"></h1>

Example

This happens because HTML is compiled at a later stage. So first you see the HTML, and then builds the angular effect.

If you set binding by adding attribute ng-bind, then you don't have brackets in the HTML code and brackets will not appear for a fraction of second.

If you want to know more about this, please read this: Stack

Community
  • 1
  • 1
Niezborala
  • 1,857
  • 1
  • 18
  • 27
  • this done not solve the problem. after this change even h1 is not getting updated when I type into input. – Akki619 Oct 15 '15 at 06:32
0
<body ng-cloak>
<h1>{{hello}}</h1> 
--------
--------
--------
--------

</body>

To prevent Angular html template from being displayed by the browser use ngCloak.

Note: Use ngCloak in your body tag that will help you hide these thing on complete page.

The best way to avaid this error is, use ng-bing directive see the example below.

<h1 ng-bind="hello"></h1>
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Umar Farooque Khan
  • 515
  • 1
  • 6
  • 17
-2

Use ng-cloak directive.

<h1 data-ng-cloak>{{hello}} </h1>

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

Ritt
  • 3,181
  • 3
  • 22
  • 51