Difference between {{}} and ng-bind in AngularJS

To bind our data to the HTML page, Angular gives the ability to use {{}} known as double curly brackets or ng-bind.Both ways are performing the same functionality.

Eagle thinking image to learn more


{{}}


Example:-      Double Curly brackets in Angular JS

name is JS object or some variable we are referring to.
It makes your template very readable i.e Anyone going through a code such as {{ name }} can easily understand that “name”  is a variable bounded to the DOM.

Drawbacks of {{}}

Sometimes when we  load our application in the browser , we can notice flashing content for some milliseconds before {{ name }} is resolved and data is loaded.
flashing-content
Flashing content
This happens because the template is loaded before AngularJS had a chance to go in and compile the elements. To resolve this issue, you can use ng-cloak directive.

ng-bind is used inside an HTML DOM element:


Example:-
ng-bind

We are using the same expression which we used for double curly brackets.

The major difference between ng-bind and {{}} is that ng-bind creates a watcher for variable passed to it(i.e. name as in above example), while curly brackets({{}}) will (store the entire expression in memory i.e. }perform dirty-checking and refreshing the expression in every digest cycle even if it is not required.

ng-bind will only apply when the value passed is changing actually.
In the first approach(i.e. {{}}), AngularJS evaluates the expression then replaces it with some value which sometime be left with the flashing double curly brackets but ng-bind saves this time by informing AngularJS to put the contents of the expression within the element itself.
Note:-

  • {{}} sometimes cause performance issue if we have thousand of bindings in our page.In these scenario’s, we should go with ng-bind.
  • For some modules, like translate module is implemented  or having binding which are not going to change , make the practice to use :: (double colon) before our binding. Example


XMLHttpRequest Cannot Load error in AngularJS

Error:- XMLhttpRequest Cannot load ? How to handle this error.



XMLHttpRequest cannot load Error
Browser Error



Solution:-
This is common error when you attempt to open load files directly in chrome.
Reason,
Chrome and other browsers have imposed security restrictions for “Cross Origin Requests“, which means that you cannot load the files directly from your local hard-disk to browser hence you required to load the files on some server using some protocol. Eg: http.

There are different ways to resolve this issue:
Approach-1:- Search for the path of your Chrome executable and then, on your cmd, try :

  •  Type “where chrome” into command prompt which will give you “C:PathToChrome.exe”
  • Then type ” C:PathToChrome.exe –allow-file-access-from-files “

Cmd Prompt chrome.exe


Note:-It is better to close all the browser instances before executing the above commands.

Approach-2:- If you have node setup then you can use http-server.
Execute npm install –g http-server and you will be able to access it using http-server C:pathtoapp

Step1:- install node.js 
sudo  npm install –g http-server 

Step2:- Browse to the file location of .html file and execute the below command

http-server

how to run node.js server


Step3:- Access the file using http://127.0.0.1:8080/ in browser

Approach-3:- Mount Apache server and deploy your code to run the app.

Note:-Some IDE’s have default built in web servers like JetBrains, Eclipse

Do follow us for more learning and solutions Fb,G+,Twitter

Learn AngularJs

Conditional display of elements/data using Angular Js Directives.

Today we would learn frequently used Angular JS directives.


Problem:- How to achieve conditional construct in Angular js?

Love Nature


Solution:- We would achieve it by using built in directives of Angular JS.

1. ng-Switch:-We can control the conditional display of data.
It is similar to Switch-Case in JavaScript.
JavaScript syntax:-
Switch(expression) {

   Case  n:
Code
Break;
Case n1:
Code
Break;
Default:
Default code


Angular JS syntax:-
Lets have corresponding code for above flow using directives:-
ng-switch on = expression 

   ng-switch-when = n
Code
ng-switch-when = n
Code
ng-switch-default
Code


We also need to use ng-switch-when & ng-switch-default directives same as Case and Default in Javascript


Example:-

<div ng-app>
EnterColor:
<input type = "text" ng-model="Color"/>
<div ng-switch on = "Color">
<span ng-switch-when="red" style="color:{{Color}}"> I am very RED
</span>
<span ng-switch-when="green" style="color:{{Color}}"> I am very GREEN
</span>
<span ng-switch-default style="color:{{Color}}"> I am default
</span>
</div>

</div>


Working Code

2. ng-If:- Used to remove/recreate the DOM element based on the expression.

Syntax:- ng-if=”Conditional-Expression“

Note:-when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.

Example:-

<div ng-app>
Check for Red Color:
<input type = "checkbox" ng-model="Color"/>
<div ng-if = "Color" style="width:50px;height:50px;background-color:red;">
</div>
<div ng-if = "!Color" style="width:50px;height:50px;background-color:green;">
</div>

</div>


ng-if example code



Working Code

3. ng-Show/ng-Hide:-
Used to show/hide the DOM element based on the expression.

Note: – Unlike ng-if, it is not deleting and recreating the element from DOM but simply changing the display CSS of the element.

Syntax:-ng-Hide=”expression“

How it works: – 

  • All it uses is Class =”ng-hide” and this class have CSS property of “display:none !important”.
  • !important so that this property have the maximum weight and cannot be overridden.
  • When expression is true then .ng-hide CSS is added causing element to be hidden and vice-verse.
Note: – For ng-Show we have ng-hide class added on “False” condition and removed when condition is “true” (it is reverse case as of  ng-Hide)

Example:-
<div ng-app>
Show Me:
<input type = "checkbox" ng-model="Color"/>
<div ng-show = "Color" style="width:50px;height:50px;background-color:red;">
</div>
Hide Me:
<input type = "checkbox" ng-model="hideColor"/>
<div ng-hide = "hideColor" style="width:50px;height:50px;background-color:green;">
</div>

</div>

ng-show Example



  • We can check the ng-hide class, using the inspect element.

At launch of code 

ng-hide class is applied


Check the “Show Me” checkbox


ng-hide class is removed