AngularJS Veri Bağlama

AngularJS'teki veri bağlama, model ve görünüm arasındaki senkronizasyondur.

Veri modeli

AngularJS uygulaması genellikle bir veri modeline sahiptir. Veri modeli, uygulama için kullanılabilir verilerin topluluğudur.

Örnek

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML görünümü

AngularJS uygulamasının HTML konteyneri, görünüm olarak adlandırılır.

Görünüm modeli erişebilir ve model verilerini görüntülemek için çeşitli yöntemler vardır.

Kullanarak ng-bind düzenleyicisi, belirtilen model özelliğine innerHTML bağlar:

Örnek

<p ng-bind="firstname"></p>

Kendi Kendine Deneyin

Ayrıca, çift büyük parantez kullanabilirsiniz {{ }} ile modeldeki içeriği göstermek için

Örnek

<p>İlk ad: {{firstname}}</p>

Kendi Kendine Deneyin

veya, HTML denetleyicilerinde ng-model Düzenleyici, modeli görünümle bağlar.

ng-model düzenleyicisi

Kullanarak ng-model Düzenleyici, modeldeki veriyi HTML denetleyicilerine (input, select, textarea) görünümüne bağlar.

Örnek

<input ng-model="firstname">

Kendi Kendine Deneyin

ng-model Düzenleyiciler, model ve görünüm arasındaki iki yönlü bağlamayı sağlar.

İki yönlü bağlama

AngularJS'teki veri bağlama, model ve görünüm arasındaki senkronizasyondur.

Modeldeki veriler değiştiğinde, görünüm bu değişikliği yansıtır ve görünümdeki veriler değiştiğinde, model de güncellenir. Bu, anında ve otomatik olarak gerçekleşir ve modelin ve görünümün her zaman güncel kalmasını sağlar.

Örnek

<div ng-app="myApp" ng-controller="myCtrl">
  Ad: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

Kendi Kendine Deneyin

AngularJS Kontrolör

AngularJS'teki uygulama kontrolcü tarafından yönetilir. Kontrolcü hakkında daha fazla bilgi için AngularJS Kontrolcü bölümünü okuyun.

Model ve görünümün anlık senkronizasyonu sayesinde, kontrolcü, yalnızca model verilerine odaklanmak zorunda kalır ve görünümle tamamen ayrılır. AngularJS'teki veri bağlama sayesinde, görünüm, kontrolcülerde yapılan herhangi bir değişikliği yansıtır.

Örnek

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Kendi Kendine Deneyin