مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که
دوره کامل
آموزش AngularJS را دنبال می کنند. همانطور که در آموزشهای قبل نیز اشاره کردیم. کنترلرها برای کنترل برنامه های کاربردی ایجاد شده توسط AngularJS ، استفاده می شود. در ادامه ی این آموزش ها در این بخش، بیشتر به مبحث
آشنایی با controllers یا کنترلرها در AngularJS ، می پردازیم.
کنترلر ها با اتصال
داده ها
در AngularJS ، ارتباط مستقیمی دارند. چرا که ارتباط داده ها اتصال بین داده ها ی کنترلر و نمای View را برقرار کرده و نتایج را برای کاربر نمایش می دهد.
آشنایی با controllers یا کنترلرها در AngularJS
۴ اطلاعات مربوط به برنامه های AngularJS را کنترل می کنند.
کنترل کننده های AngularJS اشیای منظمی از جاوا اسکریپت هستند.
کاربرد کنترلرها
برنامه های AngularJS توسط کنترل کننده ها کنترل می شوند.
دستورالعمل ng-controller کنترل کننده ی برنامه را تعریف می کند.
یک کنترل کننده، یک شیء جاوا اسکریپت است، که توسط یک سازنده شیء استاندارد جاوا اسکریپت، ایجاد شده است.
مثال :
| <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> |
شرح مثال فوق:
برنامه AngularJS توسط ng-app = "myApp" تعریف شده است. این برنامه در داخل
<div> اجرا می شود.
ویژگی ng-controller = "myCtrl" یک دستور AngularJS است. این کنترل کننده را تعریف می کند.
عملکرد myCtrl یک عملکرد جاوا اسکریپت است.
AngularJS از یک کنترل کننده با یک شیء کاربردی $ استفاده می کند.
در AngularJS، $ شیء برنامه (مالک متغیرها و توابع کاربردی) است.
کنترل کننده دو ویژگی (متغیر) را در دامنه (firstName and LastName) ایجاد می کند.
دستورالعمل های ng-model زمینه های ورودی را به خواص کنترل کننده (firstName and lastName) پیوند می دهد.
متدهای کنترلر
مثال بالا یک شی کنترل کننده با دو ویژگی: lastName و firstName را نشان داد.
کنترل کننده همچنین می تواند متدها (متغیرها را به عنوان توابع) داشته باشد:
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; }; }); </script> |
کنترلرها در فایل های خارجی
در برنامه های بزرگتر، کنترلرها در فایل های خارجی رایج هستند.
فقط کد بین تگ <script> را به یک فایل خارجی با نام personController.js کپی کنید:
مثال :
| <div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script src="personController.js"></script> |
سایر مثال ها
برای مثال بعدی یک فایل کنترل جدید ایجاد خواهیم کرد:
مثال :
| angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }); |
فایل را به عنوان namescontroller.js ذخیره کنید:
و سپس از فایل کنترل کننده در یک برنامه استفاده کنید:
مثال :
| <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"></script> |
کلام آخر
در پایان این بخش، شما با کاربردها و ساختار کنترلر ها در کد AngularJS با ارائه مثال های متعددی آشنا شدید. امیدواریم که از مطالب آموزش فوق که به منظور
آشنایی با controllers یا کنترلرها در AngularJS ارائه گردید، بخوبی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
