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.

Tuesday, 27 May 2014

AngularJS executing controller twice

During my angularJS adventure i noticed that my controller seems to be running twice, something like getting two alert when testing for result or double responses during HTTP post, like every nubie to a technology, i had asked myself same question i had asked myself as pass through previous hurdle, i had thought to myself have i made a great mistake in choosing this framework.

So After pulling up my pants and sucking it up, i started googling and found out i had made a mistake but not of the choice of framework but that of my code.When i start my first app with angularjs, i started buy writing :

<div data-ng-controller="MyCrtl">
but then i got to the ease of routing then i switch with :
$routeProvider.when('/',{ templateUrl:'patials/sample.html', controller:'MyCrtl'});
but then i left the previous in my 'sample.html' code which was apparently wrong the meaning of this as i gathered is that i am now instructing AngularJS, to digest my controller twice. 

Solution:

Remove the data-ng-controller="'MyCrtl"' from your html code if you have specified controller:'MyCrtl' I hope this can help someone out there.