قسمت دوم AngularJS: اتصال داده‌ها دستورالعمل‌ها رشته‌ها و شی‌ءها

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت دوم AngularJS بررسی اتصال داده ها دستورالعملها رشته ها و شی ها

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

12518

Calendar-amico (2)

تاریخ انتشار:

9 , آذر , 1397

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

با عرض سلام

در قسمت دوم از آموزش‌های صفر تا صد AngularJS اتصال داده‌ها، دستورالعمل، رشته‌ها و شی‌ءها در AngularJS موردبررسی قرار خواهد گرفت.

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

اتصال داده‌ها

یکی از مفاهیم AngularJS ، اتصالِ داده است.

در زیر به بررسی یک نمونه کد AngularJS که بااتصال داده کار می‌کند می‌پردازیم:

کد بالا یک کادر متنی ایجاد می‌کند. درحالی‌که شما دران تایپ می‌کنید خروجیان در المان <h2> نمایش داده می‌شود.

ng-model یک دستور است که عنصر HTML را به یک اصطلاح متصل می‌کند. در کد بالا، ما به این ویژگی نام name را اختصاص دادیم، سپس از نام اختصاص داده‌شده در علامت مخصوص AngularJS به‌صورت روبرو استفاده می‌کنیم: {{name}}

همچنین شما می‌توانید از قطعه کد بالا را به‌صورت زیر استفاده کنید.

دو قطعه کد بالا یک عمل را انجام می‌دهند با این تفاوت که ng-bind بر روی یک المان HTML اثر می‌گذارد و علامت {{}} به‌صورت خودکار برایمان نمایش خواهد داد.

اتصال داده‌ها به ما این کمک را می‌کند تا هماهنگ‌سازی خودکار بین مدل و نمایش دادنان در کد HTML برقرار کنیم.

این دیدگاه اساساً DOM است که کاربر می‌بیند.

مدل داده‌هایی است که کاربر بر آنها اثر می‌گذارد و تأثیر آن نیز برای کاربر نمایش داده می‌شود.

اتصال به داده‌ها، یک طرح از اصطلاحات را در هر بار تغییر نمایش می‌دهد. هنگامی‌که مدل را تغییر دهید آن تغییر از طریق اصطلاحات به شما نمایش داده خواهد شد.

بررسی دستورالعمل‌های AngularJS

دستورالعمل‌های آنگولار مشابه صفات HTML هستند و اجازه می‌دهند که رفتار خاصی به عناصر DOM متصل گردد.

دستور ng-app یک برنامه را از طریق AngularJS راه‌اندازی می‌کند.

دستور ng-model یک ویژگی خاصی به المان‌های HTML اضافه می‌کند.

دستور ng-init مقدار داده‌های برنامه را اولویت‌بندی می‌کند.

به مثال زیر توجه کنید:

قطعه کد بالا یک مبدل ساده از درجه‌ی سلسیوس به فارنهایت می‌باشد. ما دو خواص را با استفاده از ng-model برای اتصال کادر دریافت متن و اعمال تبدیل سلسیوس به فارنهایت دریافت کردیم. در انتها مقدار محاسبه‌شده‌ی درجه‌ی سلسیوس به‌صورت فارنهایت در تگ p نمایش داده خواهد شد.

یکی دیگر از دستورالعمل‌های بسیار مفید در AngularJS، دستورالعمل no-repeat است. با استفاده از این دستور می‌توانیم یک ساختار HTML را به هر تعداد دلخواه تکرار کنیم.

به مثال زیر توجه کنید :

در بالا قطعه کدی نوشتیم که مقادیر ارائه‌ی members را گرفته و هر خانه را در نام قرار داده و تا اتمام این کار به تعداد هر خانه یک مرحله تکرار صورت می‌گیرد.

به یاد داشته باشید که شما می‌توانید از دستورالعمل‌ها به‌صورت چندگانه نیز استفاده ببرید.

در زیر به بررسی انواع دیگری از عبارات می‌پردازیم.

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

به قطعه کد زیر توجه کنید.

در صورت وجود عبارت ng-app متغیر حساب‌شده و جواب در خروجی نمایان خواهد شد ولی اگر ng-app را حذف کنیم به‌صورت عبارت نمایش داده خواهد شد و هیچ عملیاتی بر رویان انجام داده نخواهد شد.

بیایید به مثالی که در css از انگولار استفاده کرده‌ایم بپردازیم. در این مثال رنگی از ما گرفته و آن کادران رنگی را که وارد کرده‌اید به خود گرفته.

همان‌طور که در مثال‌های قبل از ng-init استفاده کرده‌ایم برای درک بهتر این موضوع مثالی دیگر در زیر موردبررسی قرار خواهیم داد.

در قطعه کد بالا در ابتدا در ng-init مقادیر اولیه را تعریف کرده‌ایم و بعد داخل پرانتزها عبارات محاسبه‌شده و خروجی را به ما نمایش خواهد داد.

اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا را به‌صورت زیر خواهیم نوشت.

رشته‌ها در AngularJS

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

برای اتصال دو رشته در آنگولار از + استفاده کرده‌ایم و برای ایجاد فاصله بین دو متغیر فاصله را داخل دابل کوتیشن‌ها قرار می‌دهیم.

اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا به‌صورت زیر خواهیم نوشت.

شی‌ءها در AngularJS

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

اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا به‌صورت زیر خواهیم نوشت.

آرایه‌ها در AngularJS

همانند موارد بالا آرایه‌ها هم نیز در آنگولار شبیه به جاوا اسکریپت خواهند بود. برای درک بهتر این موضوع به قطعه کد زیر توجه نمایید.

همانند موارد فوق اگر تمایل به ng-bind داشته باشیم می‌توانیم قطعه کد فوق را ویرایش نماییم که از ذکر این موضوع پرهیز می‌کنیم.

بررسی عبارات در AngularJS و جاوا اسکریپت

اولین موضوع شباهت تعریف شی‌ءها، حروف و ارائه‌ها در انگولار و جاوااسکریپت خواهد بود.

دومین موضوع برخلاف جاوااسکریپت شما در انگولار این قابلیت را خواهید داشت که عبارات را داخل کدهای html مورداستفاده قرار دهید.

سومین موضوع آنگولار برخلاف جاوااسکریپت از حلقه‌ها، شرط‌ها و استثناها پشتیبانی نمی‌کند.

چهارمین موضوع آنگولار از فیلترها پشتیبانی می‌کند درصورتی‌که جاوااسکریپت این قابلیت را ندارد.

در صورت تمایل برای اطلاعات بیشتر می‌توانید به سایت w3schools مراجعه کنید.

در صورت نیاز می‌توانید سؤالات خود را از طریق فرم نظرات با ما به اشتراک بگذارید!

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

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

2 پاسخ به "قسمت دوم AngularJS: اتصال داده‌ها دستورالعمل‌ها رشته‌ها و شی‌ءها"

  1. لطفا سریعتر به اموزش های ویدیویی برسید !
    این اموزش ها رو خوندم جالب بودن تشکر از کارتون

    • درحال اماده سازی کامل مراحل اموزشی هستیم!
      به زودی کل کدپز با تغییرات جدیدی روبرو خواهد شد و اموزش های ویدیویی انگولار بخشی از تغییرات کدپزخواهد بود.

ارسال یک پیام

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

X