توسعه یک برنامه هیجان انگیز با انگولار#3

توسعه یک برنامه هیجان انگیز با انگولار#3
تو این قسمت، میخوایم درباره bind کردن اطلاعات برنامه با attribute های dom صحبت کنیم. dom یا Document Object Model یک استاندارد قراردادی مستقل از زبان در بین چند پلتفرم هست که بر اساس اون، نمایش دادن و تعامل با اشیاء (object) در زبانهای html, xml,xhtml پیاده سازی و رعایت می شود.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید


برای مثال دایرکتیو ng-disable ویژگی disable را به عناصر html اضافه می کند..
تو این مثال، اول از همه با دایرکتیو ng-init یک متغیر تعریف میشه، به اسم mySwitch که مقدار اولیه true داره، حالا با دونستن این مقدار، از دایرکتیو ng-disable استفاده میکنیم تا وضعیت مشخصه disable رو روی دکمه کنترل کنیم، پس حالا که mySwitch مقدار true داره، یعنی ویژگی disable هم true هست و دکمه غیرفعال میشه.از طرف دیگه دایرکتیو ng-model میتونه با گرفتن مقدار checkbox متغیر mySwitch رو تغییر بده و اینطوری اگر چک باکس تغییری بکنه، اون تغییر روی ویژگی disable دکمه هم پیاده میشه. به همین راحتی!
دایرکتیو ng-show در انگولار
دایرکتیو ng-show عنصر HTML را show یا hide می کنه.
دایرکتیو ng-show بر اساس مقداری که بهش پاس داده میشه، تصمیم میگیره تگی که روش اعمال شده رو نشون بده، یا نشون نده. اینجا هم میتونیم مثل مثال قبلی از یه checkbox برای کنترال کردنش استفاده کنیم.
در مطلب بعدی چندتا مثال آوردیم که با کلیک بر روی button عناصر مخفی می شوند.
دایرکتیو ng-hide در انگولار
دایرکتیو ng-hide هم مثل ng-show درباره نشون دادن یا ندادن یه عنصر تصمیم میگیره، منتها برعکس!
رویدادها در انگولار
انگولار هم مثل اکثر کتابخانه های جاوااسکریپتی دیگه، از رویداد ها یا events برای کنترل برنامه استفاده میکنه. همونطور که میدونین این رویدادها (مثل کلیک کردن یا فشار دادن کلید ها توسط کاربر) توی کنترل برنامه نقش مهمی دارن، مثلاً وقتی کاربر روی دکمه فرم کلیک میکنه، با دونستن لحظه ای که این رویداد اتفاق افتاده، برنامه نویس میتونه جریان برنامه رو کنترل کنه و انگولار هم این رویدادهارو رصد میکنه، برای مثال ng-click یک event هست که کلیک شدن روی عنصری که براش تعریف شده رو به برنامه نویس اطلاع میده؛.
حالا با ترکیب این سه تا دایرکتیو که گفتیم، یک مثال تولید میکنیم که با استفاده از دایرکتیو ng-hide وقتی مقدار true به اون پاس میشه، تگی که روی آن اعمال شده رو پنهان می کنه، و وقتی این مقدار false باشه اون عنصر رو نمایش میده.
همونطور که میبینید، تو این مثال یک کنترلر برای برنامه تعریف کردیم به اسم personCtrl که قبلاً تو بخش کنترلر ها توضیح دادیم. وقتی کنترلر رو تعریف کردیم، یک متغیر به اسم myVar ساختیم که مقدار پیشفرض اون رو false گذاشتیم، حالا از این متغیر و دایرکتیو ng-hide کنترل کردن visibility تگ p که اطلاعات داخل اون هستن رو در اختیار میگیریم. با استفاده از ng-click هم وقتی کاربر روی این دکمه کلیک میکنه، مقدار myVar رو معکوس میکنیم تا اطلاعات نمایش داده بشن یا مخفی بشن.
حالا فرصت خوبیه که شما هم بتونین کدنویسی انگولارو تمرین کنین، چطوره با همین مثال بالا شروع کنیم؛ سعی کنین این مثال رو بجای ng-hide با ng-show بنویسین، بعد به کد پایین نگاه کنین تا جوابتون رو کنترل کنین.
ماژول ها در انگولار
ماژول ها در انگولار، بعنوان نگهدارنده یک برنامه هستن که بخشهای مختلف یک برنامه رو بصورت یکپارچه در کنار هم نگه میدارن، برای مثال ماژول ها کنترلر های برنامه رو در خودشون جا میدن، درواقع یه کنترلر باید به یک ماژول اختصاص داده بشه تا کار کنه. توی این مثال ساده میبینیم که myApp بعنوان برنامه اصلی، چطور کنترلر myCtrl رو داخل خودش نگه میداره و کنترل اون بخش از برنامه رو براش مشخص میکنه.
همونطور که دیدین، این کدها توی تگ script نوشته شدن، اما اگر بخوایم توی برنامه های بزرگتر این کدهارو بنویسیم، بهتره این فایل هارو از هم جدا کنیم.
پس بخش html رو همونطور که هست نگه میداریم؛

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
یک فایل برای ماژول میسازیم به اسم myApp.js ؛ 
var app = angular.module("myApp", []);
یکی از ویژگیهای خوب ماژول کردن برنامه ها در انگولار، اینه که میتونیم اونارو مجدداً تو جاهای دیگه به کار ببریم، همونطور که میبینین، [] یک مجموعه از ورودی ها که میتونه شامل ماژول های دیگه باشن رو به ماژول فعلی ما اضافه میکنه، نمونه این کارو در آینده نشونتون میدیم.
کنترلرمون رو هم به یک فایل جدا اضافه میکنیم به اسم myCtrl.js ؛
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});
طبیعیه که این فایلهای جدا باید به فایل html اضافه بشن تا کار کنن.laugh
خسته نباشین، امیدوارم این جلسه هم خوب بوده باشه.

نیلوفر افشار کارشناسی ارشد هوش مصنوعی خونده و چند سالی می شه که توسعه دهنده FrontEnd هست و بصورت تخصصی با Sass و Bootstrap کار می کنه. اون همیشه در زمینه مباحث و تکنولوژی های جدید در حوزه وب تحقیق می کنه.

این مطالب را هم ببینید

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.