Angular در یک نگاه – مبانی – بخش دوم

Angular در یک نگاه – مبانی – بخش دوم

سلام، به بخش دوم از مبانی Angular خوش آمدید. در بخش قبل دیدیم که چطور angular را به پروژه خود اضافه کنیم. امیدوارم که پست قبلی مفید بوده باشد.

 

Expression یا عبارات

 

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

اجازه دهید نوشتن Angular را با جمع دو عدد شروع کنیم. من فرض کرده ام که شما بخش قبل را دیده اید و کدهای این مجموعه از آموزش آنگولار را در فایل index.html اجرا می کنید:

 

 

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

دو حفت براکت حداکننده قالب می باشند. اگر با Mustache یا Handlebars آشنا باشید، حتما دو جفت براکت را دیده اید که به همین روش استفاده می شود. آنگولار یک کتابخانه قالب بندی پیچیده است. تمام چیزهایی داخل عنصر را که با ng-app مشخص کرده اید را به عنوان یک الگو در نظر می گیرد، و هنگام کامپایل صفحه، هر تغییری که در داده ها صورت گرفته باشد را منعکس می کند. (نگران نباشید اگر با این نوع از قالب بندی ها آشنایی قبلی ندارد، تمام این ها را در مبانی آنگولار پوشش می دهیم.)

خوب به عنوان مثالی دیگر، چطور است که دو مقدار را با هم مقایسه کنیم، البته که این کار را می شود انجام داد!

 

 

اجرای مثال بالا، به ما نتیجه صحیح (true) را بر می گرداند. اگر از نتیجه حاصل شده شگفت زده شده اید، پس بهتر است که comparison operators را مطالعه کنید. حال در مثال بالا، == را به === تغییر دهید. (این نوع از مقایسه سخت گیرانه بهتر است نه؟)

در زیر مثالی را می بینیم که دو رشته را با هم دیگر الحاق یا concatenate می کند و همچنین نشان می دهد که ما می توانیم به توابع استاندارد داخل کتابخانه جاوا سکریپت مثل toUpperCase دسترسی داشته باشیم.

 

 

همانطور که در خروجی مشاهده می کنید، نتیجه AngularJS بر می گردد.

آیا این حس در شما به وجود آمده است که هر چه را که دوست دارید را می توانید بین عبارات قرار دهید؟ نه فعلا زیادی تند پیش می روید!

 

 

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

 

شما نه می توانید از alert استفاده کنید و نه از بسیاری از اشیا global جاوا سکریپت مثل Math، Number، Date و غیره.

سعی کنید به جای ("alert("Hello world در مثال بالا از ("1")parseInt یا ()Date.now یا Number.Nan و ()Math.random استفاده کنید. اگر هیچ خروجی به شما نشان داده نشد، به این معنی است که آنگولار از تجزیه کردن آنها خودداری کرده است.

اگر چه Angular محدودیت هایی را در عبارات می شود انجام داد مشخص کرده است، اما من شک دارم که شما بخواهید کدها و نشانه گذاری ها را قبل از در نظر گرفتن محدودیت های فریم روک ترکیب کنید. بیایید محدودیت هایی را با هم دیگر کاوش کنیم. آیا فکر می کنید می توانیم به آن متغیر اختصاص دهیم؟

 

 

بله، دیدم که در تنیجه عدد 2 ظاهر شد. امـــا، حال سعی کنید کلمه کلیدی var را قبل از نام متغیر اضافه کنید. آیا خطایی رخ می دهد یا نه؟ بله این بار خطایی رخ داده است. احساس بد به خود راه ندهید. دیدن خطاها باعث یادگیری می شود. بنابراین این فقط یک آزمایش است.

به عنوان مثال، من نمی دانستم که اگر متغیری را بین یک مجموعه جداکننده قرار دهم، می شود در دیگر هم استفاده کنم. چرا اصلا امتحان نکنیم؟!

 

 

نتیجه:

 

 

بله کار می کند. شاید بهتر باشد مثال زیر را هم تست کنیم:

 

 

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

 

نتیجه مثال بالا بصورت بالا می شود.

 

حالا، درباره عمگرهای افزایش چه؟ آیا می شود از آنها استفاده کرد؟

 

 

نتیجه: 

 

 

ظاهرا که نمی شود، در مورد حلقه ها چه؟

 

 

نتیجه:

 

 

حلقه بالا اجرا نخواهد شد. این اجرا باعث می شود تا یک خطای دستوری در کنسول مرورگر خود مشاهده کنید:

 

angular-error

 

ولی شاید به این فکر افتاده باشید که هیچ دلیلی ندارد که این خطا رخ دهد. برای آزمایش ابتدا کد زیر را در کنسول مرورگر خود وارد کنید:

 

 

همانطور که می بینیم دستور به درستی عدد 9 را نشان می دهد. در این دستور تعدادی محدودیت وجود دارد: عبارات یا همان expression آنگولار جاوا سکریپت نمی باشد. زبان ها expression از عبارات شرطی، حلفه ها یا throwing errors پشتیبانی نمی کنند.

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

خوب، امیدوارم تا اینجا از این پست راضی بوده باشید، در بخش بعدی با Directive آشنا می شویم.