AngularJS is the highest trending JS MVC Framework right now with lots of people picking it up. However as elegant as angular is you have to come to terms with what all the braces mean and when to use them. So finish the angular starter tutorial and then ask your self if this question:
Why does AngularJS sometimes use single braces { }, sometimes double braces {{ }}, and sometimes no braces?
Short answer:
No braces are used for directives accepting a single value argument. An example is data binding like this: ng-model=”dataItem”
Single braces are used for directives accepting an object parameter (more than one value). In this case the single braces are just defining a JSON object. An example is using ng-class like this: ng-class="{ boldCss: true, blueCss:true }"
Double braces are used to represent an AngularJS expression. An expression can be used by itself like this:
<div>{{ dataItem.name }}<div> (evaluates to someone’s name)
<div>{{ dataItem.name == “Jim” }}<div> (evaluates to true or false)
Bonus points #1:
What’s the difference between these two inputs? Both start out displaying someone’s name.
<input value="{{ dataItem.name }}" />
<div>{{ dataItem.name }}</div>
<input ng-model="dataItem.name" />
<div>{{ dataItem.name }}</div>
In the first example typing in the input field will not change the div tag below it. It’s using an angular expression that evaluates to plain old string.
In this second example the variable name dataItem is actually being passed as a parameter into ng-model. This binds changes in the input field and changes the variable in the div as you type.
Bonus points #2:
Above we said directives take parameters with either no braces (single value) or single braces (JSON, multi-value). However it’s still possible to use a angular expression with double braces as part of a directive argument.
So both of these are valid:
ng-class="{ boldCss: true, blueCss:true }"
ng-class="{ {{ dataString }} }"
The second form uses a controller to assign $scope.dataString = “boldCss: true, blueCss:true”, making the directive parameters equivalent after the expression is evaluated.
The last example is contrived but is meant to point out that even though directive parameters use no braces or single braces, they can still use expressions to partially construct their parameters.