Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Angular 2 or Angular 4 use banana brackets? Is there any specific reason for that? Why they won't follow same pattern as Angular 1?

Tags:

I know its not related to any coding but they can follow the same syntax as in Angular 1

<input ng-model="hero.name" placeholder="name" type="text">

AngulAR 2 and its Greater Version Syntax till now

 <input [(ngModel)]="hero.name" placeholder="name" type="text">

If they do so, it would be very helpful for people to adapt change in Angular JS ?

Similarly for ng-repeat, they changed to ngFor

<ul ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ul>
<ul ng-repeat="item in items track by myTrackingFunction(n)">
<li>...</li>
</ul>
like image 850
VIKAS KOHLI Avatar asked Apr 25 '17 10:04

VIKAS KOHLI


2 Answers

The banana brackets are for double way binding.

See

Binding syntax:

Data binding is a mechanism for coordinating what users see, with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these chores over to a binding framework. You simply declare bindings between binding sources and target HTML elements and let the framework do the work.

Angular provides many kinds of data binding. This guide covers most of them, after a high-level view of Angular data binding and its syntax.

Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view.

like image 131
Roman C Avatar answered Sep 24 '22 10:09

Roman C


Banana Brackets... [()] that is a standard way of two way data-binding in angular. It is a getter and setter. [] setter while () for getter, so combining them to achieve two way data binding for ngModel.

Setters [] can lead you to have one way binding.


Angular (2,4+) is a complete rewrite of angular1 as angular has adopted typescript as it's base language and it is completely rewritten with typescript. Typescript has all the latest javascript's feature + types. Which can let you ensure about what type of data flow is in the logic.

But this doesn't stop user to use angularjs, anyone can use as it is also in development and they are trying to find easy way to migrate angularjs to angular.

like image 30
Jai Avatar answered Sep 24 '22 10:09

Jai