گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/05/02 - 15:14
كد :7731
اتصال داده در آنگولار ارتباط بین model و ظاهر سایت است.
Data Model :
نرم افزار آنگولار معمولا یک data model دارد ، data model بیک مجموعه از داده های در دسترس برای نرم افزار است.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
HTML View:
به کانتینر Html در مکانی که اطلاعات نرم افزار آنگولار را به نمایش میگذارد، View میگوییم.
View به model دسترسی دارد و راههای متفاوتی برای نمایش داده های model data در View وجود دارد.
شما میتوانید از دستورالعمل ng-bind برای اتصال تگ Html به model استفاده کنید:
<p ng-bind="firstname"></p>
مشاهده نتیجه
شما میتوانید از دوجفت براکت {{ }} برای نمایش محتویات model استفاده کنید.
<p>First name: {{firstname}}</p>
مشاهده نتیجه
شما میتوانید از دستورالعمل ng-model در کنترل های(input, select, textarea) HTMLبرای اتصال با modelاستفاده کنید.
<input ng-model="firstname">
مشاهده نتیجه
دستورالعمل ng-model اتصال دوطرفه را با model برقرار می کند.
Two-way Binding :
اتصال داده در آنگولار ارتباط دو طرفه بین داده ها model و view را ممکن می سازد.
وقتیکه داده ها در model تغییر کند. Viewتغییر خواهد کرد، وقتیکه داده های View تغییر کند دادههای 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 = "John";
$scope.lastname = "Doe";
});
</script>
مشاهده نتیجه
کنترلرهای آنگولار
نرم افزارهای در آنگولار توسط کنترلرها کنترل میشوند، در باره کنترلرها در آموزش های بعد بیشتر توضیح خواهیم داد.
با توجه به عکس العمل بلافاصله View و model میتوان کنترلرها را کلا جدای از View ایجاد کرد. کنترلرها میتوانند تنها روی دادهای model data اجرا شوند.
<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>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت با شرکت سارگون تماس بگيريد