اَن گُرول جی ایس ڈیٹا بائنڈنگ

ਅੰਗੁਲਰ ਜੇਐੱਸ ਵਿੱਚ ਡਾਟਾ ਬਾਂਧੇ ਹੋਣ ਮਾਡਲ ਅਤੇ ਵਿਜ਼ਿਊ ਦਰਮਿਆਨ ਸਿੰਕ੍ਰੋਨਾਈਜ਼਼ਨ ਹੈ。

ਡਾਟਾ ਮਾਡਲ

ਅੰਗੁਲਰ ਜੇਐੱਸ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਡਾਟਾ ਮਾਡਲ ਹੁੰਦਾ ਹੈ। ਡਾਟਾ ਮਾਡਲ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਉਪਲੱਬਧ ਡਾਟਾ ਦਾ ਸਮੂਹ ਹੈ。

مثال

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

ਐੱਚਟੀਐੱਮਐੱਲ ਵਿਜ਼ਿਊ

ਅੰਗੁਲਰ ਜੇਐੱਸ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਐੱਚਟੀਐੱਮਐੱਲ ਕੰਟੇਨਰ ਨੂੰ ਵਿਜ਼ਿਊ ਕਿਹਾ ਜਾਂਦਾ ਹੈ。

ਵਿਜ਼ਿਊ ਮਾਡਲ ਨੂੰ ਪਹੁੰਚ ਸਕਦਾ ਹੈ, ਅਤੇ ਵਿਜ਼ਿਊ ਵਿੱਚ ਮਾਡਲ ਡਾਟਾ ਦਿਸਾਇਆ ਜਾਣ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ。

ਤੁਸੀਂ ng-bind ਇੰਡਰੈਕਟਿਵ, ਇਹ ਇੱਕ ਇਲੈਕਟਰੌਨਿਕ ਅਤੇ ਐੱਚਟੀਐੱਮਐੱਲ ਇਲੈਕਟਰੌਨਿਕ ਐਲੀਮੈਂਟ ਦੇ innerHTML ਨੂੰ ਬੰਧਨ ਕਰਦਾ ਹੈ:

مثال

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

خود ہی کوشش کریں

ਤੁਸੀਂ ਵੀ ਦੋ ਵੱਡੇ ਪਾਠਾਂ {{ }} ਦੇ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਕਿ ਮਾਡਲ ਵਿੱਚ ਦਾਟਾ ਦਿਸਾਇਆ ਜਾ ਸਕੇ:

مثال

<p>First name: {{firstname}}</p>

خود ہی کوشش کریں

ਜਾਂ ਤਾਂ ਤੁਸੀਂ ਐੱਚਟੀਐੱਮਐੱਲ ਕੰਟਰੋਲ 'ਤੇ ng-model ਇੰਡਰੈਕਟਿਵ ਮਾਡਲ ਨੂੰ ਵਿਜ਼ਿਊ 'ਤੇ ਬੰਧਨ ਕਰਦਾ ਹੈ。

ng-model ਇੰਡਰੈਕਟਿਵ

ਵਰਤੋਂ ng-model ਇੰਡਰੈਕਟਿਵ ਮਾਡਲ ਵਿੱਚ ਦਾਟਾ ਨੂੰ ਐੱਚਟੀਐੱਮਐੱਲ ਕੰਟਰੋਲ (input, select, textarea) ਦੀ ਵਿਜ਼ਿਊ 'ਤੇ ਬੰਧਨ ਕਰਦਾ ਹੈ。

مثال

<input ng-model="firstname">

خود ہی کوشش کریں

ng-model ਇੰਡਰੈਕਟਿਵਜ਼ ਮਾਡਲ ਅਤੇ ਵਿਜ਼ਿਊ ਵਿੱਚ ਦੋਹਰੀ ਬੰਧਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ。

ਦੋਹਰੀ ਬੰਧਨ

ਅੰਗੁਲਰ ਜੇਐੱਸ ਵਿੱਚ ਡਾਟਾ ਬਾਂਧੇ ਹੋਣ ਮਾਡਲ ਅਤੇ ਵਿਜ਼ਿਊ ਦਰਮਿਆਨ ਸਿੰਕ੍ਰੋਨਾਈਜ਼਼ਨ ਹੈ。

ਜਦੋਂ ਮਾਡਲ ਵਿੱਚ ਡਾਟਾ ਬਦਲਦਾ ਹੈ ਤਾਂ ਵਿਜ਼ਿਊ ਉਸ ਬਦਲਾਅ ਨੂੰ ਦਰਸਾਵੇਗਾ, ਅਤੇ ਜਦੋਂ ਵਿਜ਼ਿਊ ਵਿੱਚ ਡਾਟਾ ਬਦਲਦਾ ਹੈ ਤਾਂ ਮਾਡਲ ਵੀ ਅੱਪਡੇਟ ਹੋਵੇਗਾ। ਇਹ ਤੁਰੰਤ ਅਤੇ ਸਵੈਚਾਲਿਤ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਮਾਡਲ ਅਤੇ ਵਿਜ਼ਿਊ ਹਮੇਸ਼ਾ ਅੱਪਡੇਟ ਹੁੰਦੇ ਹਨ。

مثال

<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 = "Bill";
  $scope.lastname = "Gates";
});
</script>

خود ہی کوشش کریں

اَن گُرول جی ایس کنٹرولر

ਅੰਗੁਲਰ ਜੇਐੱਸ ਵਿੱਚ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟਰੋਲਰ ਦੁਆਰਾ ਕੰਟਰੋਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਕੰਟਰੋਲਰ ਦੇ ਬਾਰੇ ਵਿੱਚ ਅੰਗੁਲਰ ਜੇਐੱਸ ਕੰਟਰੋਲਰ ਚਾਪ ਵਿੱਚ ਪੜ੍ਹੋ।

ਮਾਡਲ ਅਤੇ ਵਿਜ਼ਿਊ ਦੇ ਤੁਰੰਤ ਸਿੰਕ੍ਰੋਨਾਈਜ਼਼ਨ ਕਰਕੇ, ਕੰਟਰੋਲਰ ਵਿਜ਼ਿਊ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖਰਾ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਮਾਡਲ ਡਾਟਾ 'ਤੇ ਕੇਵਲ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। ਅੰਗੁਲਰ ਜੇਐੱਸ ਵਿੱਚ ਡਾਟਾ ਬਾਂਧੇ ਹੋਣ ਕਰਕੇ, ਵਿਜ਼ਿਊ ਕੰਟਰੋਲਰ ਵਿੱਚ ਕੀਤੇ ਗਏ ਕਿਸੇ ਵੀ ਬਦਲਾਅ ਨੂੰ ਦਰਸਾਵੇਗਾ।

مثال

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

خود ہی کوشش کریں