با عرض سلام و وقت بخیر خدمت کاربران سایت پی ویلرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در مباحث قبلی ما شما را با ماژول ها در AngularJS آشنا کردیم و همچنین تعدادی از کاربردهای مهم ماژول ها را نیز ، بیان کردیم. اگر خاطرتان باشد گفتیم که یکی از کاربردهای ماژول ها در AngularJS ، فراهم کردن ارتباط بین داده ها در کد HTML و کد AngularJS، است. که در آموزش این بخش، ما شما را، بیشتر با مبحث
Data binding یا ارتباط داده ها در AngularJS ، آشنا خواهیم کرد.
اتصال داده در AngularJS هماهنگ سازی بین ماژول و کد HTML است.
برنامه های AngularJS معمولا یک مدل داده ای دارند. مدل داده ها مجموعه ای از اطلاعات موجود برای برنامه می باشد.
مثال:
1 2 3 4 5 | var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); |
ظرف HTML که در آن برنامه AngularJS نمایش داده می شود، view یا نمایه نامیده می شود.
view به مدل دسترسی دارد. و روش های متعددی برای نمایش داده های مدل در view وجود دارد.
شما می توانید از دستور ng-bind
استفاده کنید. که innerHTML عنصر را به ملک مشخص شده مرتبط می کند:
1 | <p ng-bind="firstname"></p> |
شما همچنین می توانید از {{}} دوبار استفاده کنید. تا محتوا را از مدل نمایش دهید:
1 | <p>First name: {{firstname}}</p> |
یا شما می توانید از دستورالعمل ng-model
در کنترل های HTML برای اتصال مدل به نمایه استفاده کنید.
از دستورالعمل
ng-model
برای اتصال داده ها از مدل به نمایش در کنترل های HTML استفاده کنید (input, select, textarea)
1 | <input ng-model="firstname"> |
دستورالعمل ng-model
یک اتصال دوطرفه بین مدل و نمایه فراهم می کند.
Data binding یا اتصال داده در AngularJS هماهنگ سازی بین مدل و view است.
هنگامی که داده ها در مدل تغییر می کنند، نمای نمایشگر تغییرات را نشان می دهد، و هنگامی که داده ها در view تغییر می کنند، مدل نیز به روز می شود. این فرآیند بلافاصله و به طور خودکار اتفاق می افتد، تا مدل و نمایش در همه زمان ها به روز باشند.
1 2 3 4 5 6 7 8 9 10 11 12 | <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 توسط کنترلرها، کنترل می شود.
از آنجا که در بحث هماهنگ سازی فوری مدل و view ، کنترل کننده می تواند به طور کامل از view جدا شده و به سادگی بر داده های مدل متمرکز شود. با توجه به اتصال داده در AngularJS، نمای view ، هر تغییری را که در کنترلر ایجاد شده را، منعکس خواهد کرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
در این بخش از سری آموزشهای کامل AngularJS ، شما با مباحث کاربرد Data binding یا ارتباط داده ها در AngularJS ، آشنا شدید. همچنین ساختار آن و نحوه استفاده در کد را نیز، یاد گرفتید. امدواریم که مطالب فوق ، مورد توجه و پسند شما قرار گرفته باشد.