Thursday, 29 May 2014

Avoid expressions/braces being shown on page load Angularjs

At first I try to ignore the famous curly braces ‘{{}}’ of the angularjs for binding data to the view, this happens just few seconds before my application try’s to load but then I got fed up and decided to do something about, it turns out it could be resolved.

Actually there multiple ways of resolving this, which will are listed below

  • For most people who don’t like the look of braces in your html code, good news, you can make use of the ‘ng-bind’ of angular directive just like below.
    Eg.
    <div ng-bind="title">
    reference to ngBind could be found in ngbind
  • And for those people who still want to stick with the braces, it isn’t bad news also for you, you can still resolve this issues by making use of the ‘ng-cloak’ which is also an angularjs built-in directive, to use this method to resolve the issue refer below.
    Eg.
    Index.html
    <div ng-cloak="">{{ title }}</div>
    style.css

    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none!important;}
    and as well reference to ngCloak could be found in ngCloak
  • And lastly if it is much work and you have no pressure on you, you can just continue ignoring it until it starts getting annoying. Just kidding that all i have.

I hope this can help someone out there.

1 comment:

  1. very informative & different one....
    I would like to share the information to get jobs easily
    Angularjs Training In Hyderabad

    ReplyDelete