اتصال داده در آنگولار جی اس

اتصال داده در AngularJS هماهنگ سازی بین model و view است.

مقالات

مدل داده Data Model – آنگولار جی اس angular js

برنامه های AngularJS معمولا یک مدل داده ای دارند. مدل داده ها مجموعه ای از اطلاعات موجود برای برنامه می باشد.

مثال:

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

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.firstname = "John";

$scope.lastname = "Doe";

});

HTML View

ظرف HTML که در آن برنامه AngularJS نمایش داده می شود، view (نمایه) نامیده می شود.

این view به model دسترسی دارد و روش های متعددی برای نمایش داده های مدل data model وجود دارد.

شما می توانید از دستور ng-bind استفاده کنید که innerHTML عنصر را به model مشخص شده مرتبط می کند:

مثال:

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

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

شما همچنین می توانید از {{ }} دوبار استفاده کنید تا محتوا را از model نمایش دهد:

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

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

یا شما می توانید از directive دستورالعمل ng-model در (controller) کنترل های HTML برای اتصال model به view استفاده کنید.

دستور ng-model

از دستورالعمل ng-model برای اتصال داده ها از model به رهثص در کنترل های HTML استفاده می شود (input, select, textarea)

مثال

<input ng-model="firstname">

1	<input ng-model="firstname">

دستورالعمل ng-model یک اتصال دوطرفه بین model و view فراهم می کند.

دو راه دو طرفه – tow way binding

Data binding اتصال داده در AngularJS هماهنگ سازی بین model و view است.

هنگامی که داده ها در مدل تغییر می کنند، view (نمای) نمایشگر تغییر را نشان می دهد، و هنگامی که داده ها در view تغییر می کنند، model نیز به روز می شود. این بلافاصله و به طور خودکار اتفاق می افتد، که اطمینان حاصل می کند که model و view در همه زمان ها به روز می شود.

مثال

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

Name: <input ng-model="firstname">

<h1>{{firstname}}</h1>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.firstname = "John";

$scope.lastname = "Doe";

});

</script>

controller کنترل کننده AngularJS

برنامه های کاربردی در AngularJS توسط کنترل کننده ها(controller) کنترل می شوند. در مورد کنترل کننده ها(controller) در بخش کنترل کننده AngularJS اطلاعات بیشتری کسب کنید.

از آنجا که هماهنگ سازی فوری model و view ، کنترل کننده می تواند به طور کامل از view جدا شده و به سادگی بر داده های model تمرکز کند. با توجه به اتصال داده در AngularJS، این view ، هر تغییری را که در کنترلر ایجاد شده، منعکس خواهدکرد.

مثال:

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

<h1 ng-click="changeName()">{{firstname}}</h1>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.firstname = "John";

$scope.changeName = function() {

$scope.firstname = "Nelly";

}

});

</script>

5/5 - (1 امتیاز)

اتصال داده در آنگولار جی اس – AngularJS Data Binding

مدل داده Data Model – آنگولار جی اس angular js

HTML View

دستور ng-model

دو راه دو طرفه – tow way binding

controller کنترل کننده AngularJS

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

مدل داده Data Model – آنگولار جی اس angular js

HTML View

دستور ng-model

دو راه دو طرفه – tow way binding

controller کنترل کننده AngularJS

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ