با سلام
پیشنهاد می‌شود قبل از ورود به قسمت ششم انگولار جی اس سایر قسمت‌ها را نیز موردمطالعه قرار دهید. برای ورود به فهرست تمامی قسمت‌ها روی آموزش انگولار جی اس کلیک کنید.
اتصال داده‌ها
اتصال داده در AngularJS هماهنگ‌سازی بین مدل و دیدگاه است.
مدل داده
برنامه‌های AngularJS معمولاً یک مدل داده‌ای دارند. مدل داده‌ها مجموعه‌ای از اطلاعات موجود برای برنامه می‌باشد.
برای درک بهتر به بررسی مدل داده‌ای زیر می‌پردازیم:
|
1 2 3 4 5 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Morteza"; $scope.lastname = "Afzali"; }); |
نمایه‌ها در HTML
تگ HTML که در آن برنامه AngularJS نمایش داده می‌شود، نمایه نامیده می‌شود.
|
1 |
<p ng-bind="firstname"></p> |
شما همچنین می‌توانید از علامت روبرو {{}} استفاده کنید تا محتوا را از مدل نمایش دهید:
|
1 |
<p>نام شما: {{firstname}}</p> |
دستورالعمل ng-model
از دستورالعمل ng-model برای اتصال داده‌ها از مدل به نمایش در کنترل‌های HTML استفاده کنید (ورودی، انتخاب، متن زمینه)
دستورالعمل ng-model یک اتصال دوطرفه بین مدل و نمایه فراهم می‌کند.
|
1 |
<input ng-model="firstname"> |
اتصال دو طرفه
اتصال داده در AngularJS هماهنگ‌سازی بین مدل و دیدگاه است.
هنگامی‌که داده‌ها در مدل تغییر می‌کنند، نمای نمایشگر تغییر را نشان می‌دهد، و هنگامی‌که داده‌ها در دید تغییر می‌کنند، مدل نیز به‌روز می‌شود. این بلافاصله و به‌طور خودکار اتفاق می‌افتد، که اطمینان می‌دهد که مدل و نمایش در همه زمان‌ها به‌روز می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div ng-app="myApp" ng-controller="myCtrl"> نام: <input ng-model="firstname"> <h1>{{firstname}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "Morteza"; $scope.lastname = "Afzali"; }); </script> <p>با تغییر دادن نام داخل کادر متوجه خواهید شد که متن پایین نیز بصورت کاملا هوشمندانه عوض خواهد شد.</p> |
کنترل AngularJS
برنامه‌های کاربردی در AngularJS توسط کنترل‌کننده‌ها کنترل می‌شوند. در مورد کنترل‌کننده‌ها در بخش کنترل‌کننده AngularJS اطلاعات بیشتری کسب کنید.
ازآنجاکه هماهنگ‌سازی فوری مدل و نمایش، کنترل‌کننده می‌تواند به‌طور کامل از دیدگاه جداشده و به‌سادگی برداده مدل تمرکز کند. با توجه به اتصال داده در AngularJS، این دیدگاه، هر تغییری را که در کنترلر ایجادشده، منعکس خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 = "Morteza"; $scope.changeName = function() { $scope.firstname = "Afzali"; } }); </script> <p>با کلیک کردن بر روی نام بالا تابع "changeName" اجرا خواهد شد.</p> <p>این مثال به وضوح نشان می‌دهد که کنترل کننده ی داده ها چگونه عمل می‌کند</p> |
برای نمایش دقیق‌تر دو کد بالا فاصله‌های موجود در تگ اسکریپت را حذف نمایید
خب به‌پایان آموزش اتصال داده‌ها در انگولار جی اس می‌رسیم امیدوارم که استفاده‌ی کافی از این آموزش رو برده باشید.
برای دریافت اطلاعات بیشتر می‌توانید به سایت w3schools مراجعه فرمایید.
ممنون که تا اینجای آموزش با کدپز همراه بودید پیشنهاد می‌کنم تا انتهای این دوره با ما همراه باشید.
