AngularJS Veri Bağlama
AngularJS'de veri bağlama, model ve görünüm arasındaki senkronizasyondur.
Veri örneği
AngularJS uygulamalarının genellikle bir veri modeli vardır. Veri modeli, uygulama için mevcut olan bir veri koleksiyonudur.
Örnek
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML Görünümü
AngularJS uygulamasının görüntülendiği HTML kapsayıcısına görünüm adı verilir.
Görünümün modele erişimi vardır ve görünümde model verilerini görüntülemenin birkaç yolu vardır.
ng-bindÖğenin innerHTML'sini belirtilen model özelliğine bağlayacak yönergeyi kullanabilirsiniz :
Örnek
<p ng-bind="firstname"></p>
Modeldeki içeriği görüntülemek için çift ayraç da kullanabilirsiniz :{{ }}
Örnek
<p>First name: {{firstname}}</p>
ng-modelVeya modeli görünüme bağlamak için HTML kontrollerindeki yönergeyi kullanabilirsiniz .
ng-modelDirektif _
ng-modelModelden HTML kontrollerindeki görünüme veri bağlamak için yönergeyi kullanın (input, select, textarea)
Örnek
<input ng-model="firstname">
Yönerge ng-model, model ve görünüm arasında iki yönlü bir bağlantı sağlar.
İki Yönlü Bağlama
AngularJS'de veri bağlama, model ve görünüm arasındaki senkronizasyondur.
Modeldeki veriler değiştiğinde, görünüm değişikliği yansıtır ve görünümdeki veriler değiştiğinde model de güncellenir. Bu hemen ve otomatik olarak gerçekleşir, bu da modelin ve görünümün her zaman güncellenmesini sağlar.
Örnek
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
AngularJS Denetleyicisi
AngularJS'deki uygulamalar kontrolörler tarafından kontrol edilir. AngularJS Kontrolörleri bölümünde kontrolörler hakkında bilgi edinin .
Model ve görünümün anında senkronizasyonu nedeniyle, kontrolör görünümden tamamen ayrılabilir ve sadece model verilerine konsantre olabilir. AngularJS'deki veri bağlama sayesinde, görünüm denetleyicide yapılan tüm değişiklikleri yansıtacaktı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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>