کنترل کننده ها (Controller)، در AngularJS

کنترل کننده ها (Controller) در AngularJS ، برای کنترل کردن اطلاعات (Data) اپلیکیشن (Application) به کار می روند.

کنترل کننده ها (Controller) را به صورت شیء (Object) در زبان JavaScript می سازیم.

یک دستور دهنده (Directive) با نام ng-controller برای تعریف کردن کنترل کننده (Controller) در AngularJS ، در کدهای صفحه ذکر می گردد. در ng-controller ، یک نام دلخواه را برای کنترل کننده (Controller)، انتخاب می کنیم :

در کد بالا، نام کنترل کننده را برابر Kelidestan_Controller انتخاب نموده ایم. همچنین در ادامه متوجه خواهید شد که با توجه به کدنویسی های بعدی، در این مرحله، نام Kelidestan_App را نیز برای اپلیکیشن ساخته شده توسط AngularJS ، انتخاب کرده ایم (در کلیدهای آموزشی اولیه، تذکر دادیم که تا زمانی که نیاز نباشد، نباید نامی برای اپلیکیشن ذکر شود، در غیر این صورت، ممکن است کدها به درستی عمل نکنند، زیرا باید مواردی در کدنویسی رعایت شود).

اما برای تعریف عملکرد کنترل کننده Kelidestan_Controller ، باید از کدهای JavaScript استفاده کنیم.

به عنوان مثال، کد JavaScript زیر را در صفحه می نویسیم :

در کد JavaScript ، ابتدا با خط زیر از کدها، اپلیکیشن را از طریق نام آن (Kelidestan_App)، شناسایی کرده ایم :

سپس با کد زیر مشخص کرده ایم که عملکرد کنترل کننده Kelidestan_Controller ، به چه صورت باشد :

در کدهای تعریف کنترل کننده (Controller)، متغیری با نام $scope به عنوان ورودی در نظر گرفته شده است. متغیر $scope ، به صورت یک شیء (Object) در JavaScript تعریف شده و اطلاعات اپلیکیشن (Application) در آن قرار دارد. بنابراین با تغییر دادن اطلاعات شیء $scope ، در واقع در حال تغییر دادن اطلاعات اپلیکیشن (Application) ساخته شده توسط AngularJS هستیم.

با کد زیر، مقدار kelidestan.com را برای متغیر Kelidestan_Address تعیین کرده ایم :

با همین کدها، یک مثال کامل را ذکر می کنیم :

مثال

بخش مهم کدها :

Kelidestan_Address در 3 بخش از کدها ذکر شده است :

1- مقداردهی اولیه در کنترل کننده Kelidestan_Controller :

بنابراین دارای مقدار اولیه برابر kelidestan.com خواهد بود.

2- در تگ input و توسط ng-model :

بنابراین مقدار اولیه مربوط به Kelidestan_Address در کادر تگ input نمایش داده می شود و همچنین کاربر می تواند با تغییر این مقدار نمایش داده شده در کادر، مقدار تعیین شده برای Kelidestan_Address را تغییر دهد.

3- در عبارت (Expression) زیر :

بنابراین مقدار Kelidestan_Address در این بخش از صفحه که این عبارت (Expression) نوشته شده، نمایش داده می شود (به صورت لحظه ای).

کد کامل صفحه HTML :

نتیجه :

مقدار اولیه kelidestan.com که توسط کنترل کننده Kelidestan_Controller برای متغیر Kelidestan_Address تعیین شده است، هم در کادر مربوط به تگ input و هم در محل مربوط به عبارت {{Kelidestan_Address}} نمایش داده می شود و سپس چنانچه کاربر آن مقدار را در کادر مربوط به تگ input تغییر دهد، مقدار جدید وارد شده توسط کاربر، جایگزین خواهد شد :