AngularJS Controller

Categories AngularJS
کنترلر ها هیچ چیزی جز توابع ساده جاوا اسکریپت نیستند که به یک اسکوپ متصل هستند. Controllers منطق را به view اهدا میکنند.
۱- اسکوپ ها چیستند ؟
اسکوب در ویو و کنترلر فعالیت می کند. این شی داده هایی را در خود نگه می دارد که قرار است به view‌ تحویل داده شوند. اسکوب ها از اتصال داده ی دو طرفه ی مخصوص انگولاری استفاده میکند که دیتای مدل ها را به view‌ می رساند.
پس می توان این گونه نتیجه گرفت که اسکوب شی ای است که کنترلر را به view متصل می کند. به همین منظور این وظیفه ی کنترلر است که داده هایی که قرار است در view نمایش داده شوند را به به ان برساند.
این عملیات ها تماما در $scope انجام میشوند.
حالا مثال کوچکی از این ارتباط میزنم :

۱.۱. دموی آنلاین :

در مثال بالا یک دکمه ی ساده در نظر گرفته شده است تا با فشردن آن محتوای آن در یک آرایه قرار گرفته و در یک لیست به نمایش گذاشته میشود.

۱.۲- ng-controller

این خصیصه همانطور که در مثال بالا هم قابل مشاهده است وظیفه ی معرفی یک کنترلر به view را دارد. در مثال بالا ما کنترلری بنام ContactController در یک Div بوسیله ی ng-controller تعریف نموده ایم. لذا هر گاه ما به درون Div سر سرک بکشیم با حاکمیت کنترلر ContactController در ارتباط خواهیم بود.

ContactController چیزی جز یک تابع ساده ‌vanilla JavaScript  نیست. در دموی بالا ما این کنترلر را بصورت یک تابع بکار بستیم.  در تابع ContactController شی ای بنام $scope بعنوان ارگومان در نظر گرفته شده است که همان وظیفه ی اتصال کنترلر به ویو را بر عهده دارد. وقتی انگولار این کنترلر را ساخت و پرداخت می کند بوسیله $scope بصورت خودکار در ویو پیاده سازی شده و تزریق میشود.

۱.۳- ng-repeat

در مثال بالا به نحوه ی نمایش contacts با استفاده از ng-repeat اشاره می کنیم.

ng-repeat یکی از پر کاربردترین خصیصه ها در ویوهای انگولاری است. این خصیصه یک آرایه را دریافت کرده و به تعداد آنها المنت های زیر شاخه ی خود را ساخته و تکرار میکند.

از این خصیصه در نشان دادن جداول ، گرید ها و … استفاده میکنند

۲- ساخت و پرداخت یک شی در اسکوپ

با توجه به مثال بالا هرگاه می خواهیم یک برنامه با انگولار بسازیم می بایست وضعیت scope‌انگولار را روشن نماییم.

در مثال بالا در اسکوب هایمان لیستی از ایمیل های مختلف را در اسکوب contacts قرارداده ایم. وقتی انگولار این خط را بررسی می کند در سرویس $scope شی contacts از نوع آرایه را ساخته و ایمیل ها نسبت می دهد و آماده می شوند تا بروزرسانی ، حذف و یا در لیستی بوسیله ی ng-repeat قرارداده شوند.

انگولار نوع زیبایی از ارتباط بین کنترلر و ویو برقرار می کند که امکان میدهد امکان میدهد گاهی کنترلر دیتای درون contacts را دستکاری نماید و گاهی نیز view ، این نیز یکی از امکانات بسیار زیبای انگولار است.

۲.۱- ng-click

در مثال بالا ما یه متد به شکل زیر داریم

بوسیله ی ng-click می توان آنرا اجرا نمود. در اصل این خصیصه یه onClick یک المنت متصل شده است. ضمنا اینگونه توابع نیز در اسکوب نوشته میشوند

در این تابع ما به آرایه ی contacts نام جدیدی را push میکنیم و به محض اضافه سازی می توان آنرا در لیست مشاهده نمود

زیبا نیست :)))

۳- چگونه یک کنترلر را پیاده سازی نماییم

کمی درباره ی اینکه کنترها چگونه هستند صحبت و اشاره شد که این توابع تنها توابع ساده vanilla JavaScript هستند که مقداری کدهای تجاری در آن وارده شده و به ویو متصل می شوند.

 

روشی که در مثال بالا بکار بسته شد ساده ترین روش استفاده ی کنترلر است ولی پیشنهاد می کنم اینگونه آنرا بکار نبرید.

روش بهتری برای استفاده پیاده سازی وجود دارد که در ادامه اشاره خواهد شد. این روش بما اجازه میدهد که کنترلرها را همراه با Module‌ها پیاده سازی کنیم که روشی است استاندارد.

۳.۱- AngularJS Modules

مدل ها یک موجودیت منطقی هستند که شما تصمیم می گیرید به چه تعداد و چگونه بکار ببندید به همین ترتیب برنامه شما می تواند تعداد متعددی module داشته باشد باشد مثل Transaction, Report, … هر ماژول نمایان گر یک موجودیت منطقی در برنامه شماست.

هر مدل می تواند دارای چندیدن کنترلر باشد. همانطور که در شکل بالا مشاهده می کنید. پس می توان یک یا چند کنترلر به یک مدل اضافه کرد. حالا یک نمونه را مشاهده می کنیم :

در مثال بالا مدلی بنام myApp بوسیله ی angular.module() ساختیم. سپس یک کنترلر بنام ContactController به آن افزدیم. البته این روش هم یکی از روش های موجود برای این کار است که من همین روش را پیشنهاد میکنم.

به نحوه ی تعریف کنترل ها در myApp.controller() توجه نمایید. ما یک آرای به آن اضافه کردیم که یکی و تنها آرایه استفاده شده در آن $scope است و نام سرویس های عمومی انگولار است و ارگومان بعدی ContactController‌ است مربوط به شرح توابع مربوط به کنترلر در آن قرار میگیرد.

۴- Nested Controllers

انگولار از کنترلرهای تو در تو نیز پشتیبانی می کند :

دموی آنلاین :

 

۵- وراثت در کنترلر ها

هنگام استفاده از کنترلهای تو در تو ممکن است بخواهید از قدرت وراثت در کنترل های انگولار استفاده نمایید.

ممکن است شما BaseController‌ داشته باشید و مابقی کنترل ها نیز زیر شاخه ی آن باشند.

برای استفاده از این امکان شما میبایست از سرویس $injector استفاده نمایید :

 

و در آخر یه پروژه ی نمونه دیگر :

لطفا بروی این پروژه متمرکز شوید :

 


Play on JSFiddle – http://jsfiddle.net/viralpatel/JFYLH/

مدیر تیم های توسعه
نظریه پرداز جوامع نوین مجازی
نویسنده مقالات در ماهنامه های تخصصی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


6 + پنج =