AngularJS Data Binding

 Compartiu 

Tipical Jquery/Ajax data binding with JSON

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

per a una vista:

<ul class="messages" id="log">
</ul>

El problema és que en el model típic MVC tant el codi HTML com el codi Javascript estan relacionats (tight coupled) de fet esta completament barrejats a la vista. Si volem canviar la presentació (HTML) hem de canviar el Javascript i si volem afegir funcionalitats com eliminar un LOG també hem de manipular el DOM. Vegem la solució AngularJS

AngularJS solution

Amb AngularJS utilitzem http:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

I la vista serà similar a:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

Els beneficis:

• El codi del controlador no s'ha de canviar mai
• Qualsevol canvi als logs es reflectira a la vista sense haver de canviar ni la vista ni el controlador

{[nota| La relació entre vista i controlador és en dos direccions (two-way), és a dir si modifiquem la vista també modifiquem el model sense tocar el controlador utilitzant: <input ng-model="entry.msg" /> }}

Vegeu també

• AngularJS
• JSON
• Data binding

Enllaços externs

• http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background