یادگیری AngularJS با مثال – Controller

یادگیری AngularJS با مثال – Controller

در قسمت قبل معرفی کوتاهی از Angular را داشتیم، و پس از آن بدون هیچ مقدمه ای توانستیم یک نوار منو پویا با ادغام فریم ورک Bootstrap درست کنیم و اولین قدم برای یادگیری آنگولار را برداشتیم. در این پست می خواهیم کار را ادامه دهیم و با Controller ها در آنگولار آشنا شویم.

 

Controllerهای AngularJS

همانطور که از نام Controller پیداست، کنترولرهای آنگولار وظیفه کنترل داده ها برنامه را به عهده دارند. به عبارتی برنامه های Angular با controller ها کنترل می شوند. controller یک شیء جاوا اسکریپت است که توسط یک شیء سازنده جاوا اسکریپت استاندارد ایجاد شده است. برای درک بهتر مثال زیر را مشاهده کنید:

 

 1

 

در مثال فوق برنامه آنگولار را با ng-app="myApp" را در تگ div تعریف کرده ایم، به همان صورتی که در قسمت قبل دیدیم. برای تعریف controller تنها کافیست دایرکتیو ng-controller="myCtrl" را در هر کجا که دوست دارید اضافه کنید. در واقع کنترولر myCtrl که ایجاد کرده ایم یک تابع جاوا اسکریپت می باشد. توجه داشته باشید که ما ng-controller="myCtrl" را در تگ div تعریف کرده ایم، پس تابع myCtrl تنها در محدوده آن تگ div قابل دسترسی است. آنگولار با استفاده از شیء $scope به controller دسترسی پیدا می کند. در آنگولار $scope شیء برنامه است که در آن می تواند متغیرها و توابع خود را تعریف کرد.

همانطور که در مثال فوق مشاهده می کنید ما دو متغیر firstName و lastName را در controller با مقدار پیش فرض تعریف کردیم.

دایرکتیو ng-model در تگ input همانند یک چسب عمل می کند. به عبارتی، ng-model به متغیر firstName و lastName می چسبد و هر بار که این متغیرها مقدارشان عوض می شود، بلافاصله این تغییرات در input منعکس می شود.

اگر مثال فوق را اجرا کنید خواهید دید که در ابتدا مقدار پیشفرض Patrick و Avakian در خروجی نشان داده می شود، و وقتی مقدار ورودی ها را تغییر می دهید، بلافاصله مقدار متغیرهای firstName و lastName نیز تغییر می باید و بدون رفرش شدن صفخه مقدار متغیر جدید را نشان می دهد.

 

ng-repeat

قبل از اینکه در قسمت بعد مثال هیجان انگیزی را با هم درست کنیم، ابتدا لازم دونستم که مختصری با ng-repeat آشنا شویم تا با درک آن در برنامه بعدی به مشکل بر نخوریم. به تکه کدهای زیر توجه کنید!

همانطور که مشخص است در controller فوق آرایه ای از اشیا داریم که مشخصات 3 نفر از افراد را در خود نگه می دارد.

اما در View یا همان HTML دایرکتیو جدید به نام ng-repeat وجود دارد. این دایرکتیو بصورت یک حلقه عمل می کند. اگر با حلقه هایی مثل foreach آشنا باشید، این دایرکتیر نیز همانند آن حلقه ها عمل می کند.

ما قصد داریم مشخصات کاربران را در تگ li نشان دهیم، پس لازم است ng-repeat را در داخل li قرار دهیم. در اینجا ng-repeat رکوردهای آرایه users را به ترتیب در user قرار می دهد. تا بتوانیم یکی یکی آنها را در li چاپ کنیم.

 

  [fa type=”globe”] دمو

 

ng-Click

حال می خواهیم رویداد کلیک را به برنامه خود اضافه کنیم. در این مثل می خواهیم وقتی کاربر بر روی هر یک از آیتم ها کلیک کرد، مشخصات مربوط به آن آیتم نشان داده شود. برای این کار controller و view خود را بصورت زیر تغییر دهید یا می توانید کدها را در دمو مشاهده کنید. توجه داشته باشید اگر در Angular تازه کار هستید حتما کدها را خودتان بطور دستی بنویسید تا یاد بگیرید و از کپی/پست کردن استفاده نکنید.  🙄

 

controller

view

  [fa type=”globe”] دمو

 

قصد از این پست آشنایی شما با موارد مهم از Angular بود، پس سعی کنید دانش خود را بالا برده تا در نوشتن برنامه های واقعی آنگولار دچار مشکل نشوید فقط کافیست موارد بالا را در مستندات سایت AngularJS دنبال کنید تا چیزهای زیاد یاد بگیرید.

لینک هایی که باید آنها را مطالعه کنید:

در قسمت بعدی قرار است با چیزهایی که در این بخش یاد گرفتیم یک سیستم CRUD ساده ایجاد کنیم. امیدوارم از این پست کوتاه لذت برده باشید، پس شما را در قسمت بعدی خواهم دید.  😛