نقل قول: آموزش فریم ورک AngularJS
عذر خواهی به خاطر تاخیر خیلی خیل زیاد .
خوب بخش سوم رو شروع میکنیم همونطور که قبلا گفتیم این قسمت با گرفتن مقدار یک text box در ang کار میکنیم به قطعه کد زیر رو توی مروگر امتحان کنید.
<!doctype html><html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>
خوب دیدید که با تغییر مقدار text box به طور خودکار متن داخل تگ P تغییر میکنه هیچ گونه کد جاوااسکرپیتی که شما بنویسید در کار نیست فقط Dirctive ها که به تگ های HTML اضافه کردید این رو میکنند.
اگر با مدل MVC آشنایی داشته باشید میدونید که M مخفف Model در این کلمات هست ما در این جا Directive به اسم ng-model دادیم که مقدار آن برابر با name هست که همین name رو اومدیم به روشی که توی قسمت قبل گفتیم به تگ P خودمون Bind یا انقیاد کردیم...
خیلی راحت.
حالا کمی پیچیده اش میکینیم کد زیر رو توی مروگر امتحان کنید ببنید چه اتفاقی میوفته.
<!doctype html><html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="mainCtrl">
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function mainCtrl ($scope) {
$scope.name = 'Hamid Faraji';
}
</script>
</body>
</html>
خوب دید که حالا مدل ما یه مقدار اولیه داره که این مقدار اولیه از یک مدل واقعی که در کنترلر ما وجود داره که این مقدار رو از اون میگیره.
به تشریح کد میپردازیم.
اول اومدیم به Div خودمون یک کنترلر به نام mainCtrl متصل کردیم که دایو رو کنترل کنه.
بعد هم یک text box با مدل name که این مدل به مدل واقعی که در کنترلر والد خودش وجود داره متصل هست.
بعد هم به تگ P اون مدل رو Bind کردیم.
بعد یک کنترل با کلاس های POJO جاوااسکریپت ساختیم که یک مدل به scope اون دادیم و اسم اون رو name گذاشیتم.
خوب اینجوری کد ما مقدار text box رو کنترل میکنه مسئله جالب توی این بخش اینه که اگه شما این داده ها که به name متصل هست رو از طریق کد تغییر بدید به صورت Live مقدار text box و تگ p تغییر میکنه که این عمل به درد وقتی میخوره که داده از سرور دریافت میشه که بعدا به این مسئله میپردازیم که به این عمل Two Way Binding یا انقیاد دو طرفه میگویند.
توی قسمت بعد با ساختار های Object Model اشنا میشیم و طریقه ساخت یک لیست کارمندان رو یاد میگریم.
موفق باشید ایام به کام.
پاسخ با نقل قول
نقل قول: آموزش فریم ورک AngularJS
