Ukubinda Data ya AngularJS

Uhusiano wa data wa AngularJS ni uhusiano wa modeli na muonekano.

Mashirika ya kusomea:

Modeli ya data

Mivuno

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

Programu ya AngularJS ina modeli ya data. Modeli ya data ni kumpatasi wa data ambao inaweza kutumiwa na programu.

Muonekano wa HTML

Kina cha HTML cha programu ya AngularJS kina jina la muonekano.

Muonekano inaweza kufikiria modeli, na kuna viwango vingi ambavyo inaweza kufikiria data ya modeli katika muonekano. Inaweza kuitumia ng-bind

Mivuno

Inaruhusu kizito cha kina cha elementi kwa kuzingatia kiwango cha modeli:

Tukio hii

<p ng-bind="firstname"></p> Inaweza kuitumia phezwi za kiburi kubwa {{ }}

Mivuno

Kwa kuonyesha muonekano wa modeli:

Tukio hii

<p>Jina la kwanza: {{firstname}}</p> ng-model Au, inaweza kuitumia kwenye vifaa vya kiburi vya HTML

Inaruhusu uhusiano wa modeli na muonekano.

Kwa sababu ya ng-model Inaruhusu uhusiano wa data wa modeli katika muonekano wa HTML kwa vifaa vya kiburi (input, select, textarea).

Mivuno

<input ng-model="firstname">

Tukio hii

ng-model Inaruhusu uhusiano wa kuzingatia kwa pacha kati ya modeli na muonekano.

Uhusiano wa kuzingatia kwa pacha

Uhusiano wa data wa AngularJS ni uhusiano wa modeli na muonekano.

Kwa sababu ya uharibifu wa data katika modeli, muonekano unaweza kumekua kwa uharibifu huo, na kwa sababu ya uharibifu wa data katika muonekano, modeli yana uharibifu. Hii inafanyika kwa zaidi ya zamani na kwenye mazingira ya kufikiria, inasababisha modeli na muonekano kufikiria kwa kuzungumza na kumaliza.

Mivuno

<div ng-app="myApp" ng-controller="myCtrl">
  Jina: <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>

Tukio hii

Kikurugenzi cha AngularJS

Programu za AngularJS zinaendaliwa na kikabla cha uadilifu. Tafadhali soma maelezo ya kikabla cha uadilifu katika kitabu cha kikabla cha uadilifu cha AngularJS.

Kwa sababu mifano na muonekano inayofanyika kwa zaidi ya zamani, kikabla cha uadilifu unaweza kushirikiana kwa kuzungumza na muonekano bila kuzungumza na muonekano. Unaweza kumaliza modeli ya data. Kwa sababu ya uhusiano wa data wa AngularJS, muonekano wa kina unaweza kumekua kwa uharibifu wowote kimekitengenezwa kwenye kikabla cha uadilifu.

Mivuno

<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>

Tukio hii