آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Controller ها در AngularJS

دوره آموزش SPA

رمز فایل :tahlildadeh.com

 

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

 

Controller ها در AngularJS

کنترلگرها در واقع داده های برنامه را مدیریت یا کنترل می کنند.

کنترلگرهای AngularJS همان اشیای منظم و رایج JavaScript می باشند.

controller ها کلاسهای جاوا اسکریپت هستند. زمانی که کاربر با برنامه تعامل برقرار می کند controller پاسخگوی مستقیم دستورات کاربر می باشد و مدل را تغییر می دهد. به کنترلگرها بخش منطق برنامه نیز گفته می شود.

AngularJS Controllers 

برنامه های AngularJS توسط کنترلگرها مدیریت می شوند.

دستور ng-controller در حقیقت کنترلگر برنامه ی مورد نظر را تعریف می کند.

یک کنترلر، درواقع یک شی جاوااسکریپت است که به واسطه ی یک سازنده ی شی (object constructor) ساخته شده است.

نمونه یک

 
First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}
امتحان کنید

تشریح برنامه ی فوق:

برنامه ی مورد نظر به وسیله ی دستور  directive یا ng-app="myApp"  اعلان شده است. این برنامه داخل عنصر <div> کار می کند.

خصیصه ی "ng-controller="myCtrl یک directive (دستور) AngularJS می باشد و یک کنترلگر را مشخص می کند.

تابع myCtrl یک تابع جاوا اسکریپت است.

AngularJS به وسیله ی شی scope$ کنترلگر مورد نظر را فرامی خواند.

scope$ در AngularJS، همان شی برنامه ی مورد نظر می باشد که حاوی متغیرها و توابع برنامه می باشد.

کنترلگر مورد نظر، دو خاصیت (متغیر) را داخل شی scope ایجاد می کند(متغیرهای firstName و lastName).

دستور ng-model فیلدهای دریافت کننده ی ورودی را به خاصیت های کنترل مورد نظر مقید/bind می کند(firstName و lastName).

متدهای کنترلگر

نمونه ی بالا یک شی کنترلگر را به همراه دو خاصیت نمایش می دهد: firstName و lastName.

یک کنترلگر همچنین می تواند دارای توابع یا متدهایی باشد(متغیرهایی به عنوان تابع):

نمونه دو

    
First Name:
Last Name:

Full Name: {{fullName()}}
امتحان کنید

تعریف کنترلگرها در فایل های خارجی

در برنامه های بزرگ، اغلب کنترلگرها را درون فایل های خارجی ذخیره می کنند.

کافی است کد بین دو تگ باز و بسته ی <script> را درون فایل خارجی به نام personController.js جای گذاری کنید:

angular.module('myApp', []).controller('personCtrl', function ($scope) {

    $scope.firstName = "John",

    $scope.lastName = "Doe",

    $scope.fullName = function () {

        return $scope.firstName + " " + $scope.lastName;

    }

});

نمونه سه

    
First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}
امتحان کنید

مثال دیگر

برای مثال بعدی یک فایل کنترلگر جدید ایجاد می کنیم:

    angular.module('myApp', []).controller('namesCtrl', function ($scope) {

        $scope.names = [

            { name: 'Jani', country: 'Norway' },

            { name: 'Hege', country: 'Sweden' },

            { name: 'Kai', country: 'Denmark' }

        ];

});

فایل مورد نظر را به این نام ذخیره کنید: namesController.js:

حال فایل کنترلگر را داخل یک برنامه بکار ببرید:

نمونه چهار

 
  • {{ x.name + ', ' + x.country }}
امتحان کنید

 

  • 1545
  •    1064
  • تاریخ ارسال :   1394/09/17

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .