با بررسی و مطالعهی فصول گذشته از سری مجموعه آموزشی فارسی انگولار ۲ با نحوهی ساخت یک پروژه مقدماتی آشنا شدید، سپس تکنیکها و فرآیندهای موردنیاز را برای ساخت فرم نظردهی مطالب بکار بردید. در نهایت امر در فصل ۲ آشنایی اجمالی و مفیدی از زبان برنامه نویسی تایپ اسکریپت بدست آوردید. حال در ادامه به معرفی سایر امکانات، ابزارها و دستورالعملها یا به عبارتی قواعد نگارشی این کتابخانه قدرتمند میپردازیم. انگولار ۲ تعدادی از دستورالعملهای Built-in را جهت اعمال دستورهای شرطی و منطقی فراهم کرده است. در این فصل هر یک از این دستورالعملها را به همراه یک مثال کاربردی مورد بررسی قرار میدهیم. در نظر داشته باشید دستورالعملهای Built-in به صورت خودکار و اتوماتیک درون کامپوننتهای شما فراخوانی (Import) میشوند. بنابراین برای استفاده نیازی به تزریق آنها نیست. با ما همراه باشید.
دستورالعمل NgIf
دستورالعمل NgIf هنگامیکه میخواهید یک المان را متناسب با شرایط خاصی مخفی کنید و یا نمایش بدهید، مورد استفاده قرار میگیرد. این دستورالعمل متناسب با شرطی که به آن انتساب داده خواهد شد، عمل میکند. درصورتیکه شرط برقرار نباشد مقدار false بازگردانده خواهد شد و در نتیجه المان موردنظر از DOM حذف میشود.
به مثالهای زیر توجه کنید:
دستورالعمل NgSwitch
در بعضی موارد نیاز داریم المانهایی متناسب با شرایط خاص خودشان را در خروجی نمایش دهیم. در این حالت از دستورالعمل ngSwitch استفاده میکنیم. به عبارتی دیگر، دستور ngSwitch، چندین بار دستور ngIf را تکرار میکند. به مثال زیر توجه کنید:
همانطور که مشاهده میکنید در مثال بالا ۳ بار از دستور ngIf با شروط مختلف استفاده شده است. حال درنظر بگیرید که عبارت معادل C را میخواهید به مجموعه دستورهای بالا اضافه کنید، در این صورت باید مجددا دستور ngIf را به کدهای بالا اعمال کرده و یک تگ div دیگر ایجاد کنید. اینگونه نمایش همواره برای برنامهنویسان دشوار است. بنابراین از دستور ngSwitchCase یا ngSwitchDefault استفاده میشود.
دستور ngSwitchCase برای تک تک Case ها و دستور ngSwitchDefault برای نمایش مقادیری بغیر از شروط بکار گرفته میشود. مثال زیر را دنبال کنید:
همانطور که مصتحضر هستید، میتوان شرط ngSwitchDefault را حذف کرد.
دستورالعمل NgStyle
با استفاده از این دستورالعمل، میتوان یک استایل خاصی را به یک المان منتسب کرد. یکی از سادهترین راهها برای استفاده از این دستورالعمل نوشتن عبارت style.<cssproperty> = “value” است. برای مثال داریم:
با اعمال دستورالعمل فوق ویژگی CSSای معادل background-color به مقدار yellow تغییر رنگ میدهد.
راهحل دیگر برای اعمال ویژگیهای CSS بیشتر برای یک المان استفاده کردن از key ها برای هر ویژگی است. به مثال زیر توجه کنید:
دستورالعمل بالا ویژگیهای color و background-color را متناسب با مقادیر سفید و آبی، اعمال میکند.
اما قدرت واقعی دستورالعمل NgStyle هنگامی نمود پیدا میکند که بخواهیم از مقادیر داینامیک یا پویا استفاده کنیم. در مثال زیر دو جعبه ورودی تعریف شده است:
و در نهایت استفاده کردن از این مقادیر برای ویژگیهای CSS سه المان مختلف. سایز فونت موردنظر را براساس ورودی دریافتی برای اولین المان به صورت زیر اعمال میکنیم:
در المان دوم رنگ را متناسب با ورودی دریافتی تغییر میدهیم. همچنین در المان سوم مجددا رنگ پس زمینه را تغییر داده و در کنار آن از یک استایل inline (درون خطی) استفاده کرده ایم.:
دستورالعمل NgClass
این دستورالعمل توسط صفت ngClass در قالب HTML شما کد میشود و اجازهی تغییر پویای کلاسهای CSS را برای یک المان DOM فراهم میکند.
یکی از روشهای استفاده از این دستورالعمل، ارسال یک شیء واقعی است. از این شیء انتظار میرود که یک key یا کلید به عنوان نام کلاس و یک مقدار یا value با مقدار true یا false جهت بکارگیری کلاس CSS یا عدم استفاده از آن، نمایش دهد. اجازه بدهید با استفاده از یک مثال این موضوع را روشنتر کنیم. درنظر بگیرید یک کلاس CSS با عنوان bordered در اختیار داریم که سرتاسر هر المان را با یک حاشیه (border) مشکی احاطه میکند. استایل CSS این کلاس به صورت زیر خواهد بود:
حال دو المان div اضافه میکنیم: یکی از این المانها از کلاس bordered پیروی میکند ولی دیگری هرگز از این کلاس بهره نمیبرد:
همواره درنظر داریم که داینامیک کردن یک کلاس CSS بسیار ارزشمندتر از استفاده ی استاتیک آن است. بنابراین برای داینامیک ساختن این کلاس یک متغییر به عنوان value شیء اضافه میکنیم:
روش دیگر نیز اضافه و تعریف کردن این کلاس داخل کامپوننت است که به صورت زیر امکانپذیر میباشد:
و استفاده از شیء تعریف شده به صورت مستقیم در المان موردنظر:
همچنین میتوان از چندین کلاس برای یک المان بهرهمند شد:
دستورالعمل NgFor
وظیفه و نقش این دستورالعمل تکرار یک المان یا مجموعه ای از المانها به دفعات مشخص است. این تعداد تکرار متناسب با مقادیر یک آرایه مشخص میشوند. همانگونه که مشاهده کردید در بخش ۵-۱ مثالی از حلقهی For برای ساخت فرم نظرسنجی مشابه سایت reddit بکار بردیم.
سینتکس و قواعد نحوی برای دستورالعمل تکرار به صورت زیر می باشد:
سینتکس let item یک متغیر مشخص است که هر یک از المانهای آرایهی items را دریافت میکند.
items مجموعهای از آیتمهای موجود درون کنترلر است.
برای فهم بیشتر یک مثال ارائه خواهیم داد. در این مثال مجموعهای از شهرها را درون یک متغییر به عنوان cities و داخل کنترلر تعریف میکنیم:
و در نهایت داخل قالب موردنظر کدهای HTML زیر را قرار میدهیم:
در نهایت خروجی این مثال شامل ۳ تگ div با مقدار c که همان اسامی شهرها می باشد.
همچنین میتوان آرایه ای از اشیاء را تکرار کرد. به مثال زیر توجه کنید:
و خروجی را به صورت جدولی برای مخاطبان به نمایش گذاشت:
از طرفی میتوان از آرایههای تودرتو استفاده کرد. جهت تفهیم این مورد مثال ذیل را دنبال کنید:
خروجی مورد استفاده در کدهای HTML میتواند به شکل زیر باشد:
دستیابی به یک ایندکس مشخص
برخی مواقع به index هر یک از آیتمهایی که در حلقه تکرار وجود دارند نیاز داریم. بنابراین برای دستیابی به آن از سینتکس let idx = index درون عبارت *ngFor استفاده خواهیم کرد.همچنین این عبارت با استفاده از علامت سیمیکالون ; (نقطه ویرگول) از عبارت قبلی جدا میشود. توجه داشته باشید که ایندکسها همواره از ۰ شروع میشوند.
تغییرات کوچکی در مثال فوق خواهیم داشت تا مبحث ایندکس درون حلقه ngFor را به شما آموزش دهیم:
دستورالعمل NgNonBindable
این دستورالعمل هنگامی مورد استفاده قرار میگیرد که بخواهیم یک بخش از صفحه را کامپایل یا بارگذاری نکنیم. به عنوان مثال ما میخواهیم یک متن داخل {{ content }} را درون قالب خود به نمایش بگذاریم. در حالت نرمال و عادی این متن درون متغییر content قرار گرفته است زیرا از سینتکس قالب {{}} استفاده کرده ایم. حال سوال اینجاست که چگونه میتوان دقیقا عبارت {{ content }} را در خروجی به نمایش گذاشت؟ در این صورت از دستورالعمل ngNonBindable استفاده میکنیم. به مثال زیر توجه کنید:
در نهایت با اعمال صفت ngNonBindable به کلاس span موردنظر، به انگولار ۲ اطلاع میدهیم که چگونه دستورهای داخل {{}} را عینا در خروجی به نمایش بگذارد.
همانگونه که ملاحظه کردید، در انگولار ۲، تنها تعداد محدودی از دستورها یا به عبارتی دستورالعملهای کنترلی و شرطی وجود دارد که در این بخش به تفصیل به همراه ذکر مثال آنها را شرح دادیم. در نظر داشته باشید با ترکیب این دستورها میتوان ساختارهای پویا و قدرتمندی برای نرم افزار تحت وب خود ایجاد کنید.
برای افزایش تمرکز کاربران عزیز و جلوگیری از طولانی شدن مطالب، هر بخش را به قسمتهای کوچکتری تبدیل کردهایم. در لیست زیر تمام بخشها و زیربخشهای آموزشی مجموعهی انگولار ۲ در اختیار شما قرار گرفته است.
توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را میتوانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)
فصل ۱
- بخش ۱-۱: معرفی مفاهیم اولیه به همراه آموزش فارسی نصب انگولار ۲
- بخش ۱-۲: برنامهنویسی و اجرای اولین پروژه با انگولار ۲
- بخش ۱-۳: کار با کامپوننتها و ارسال دادهها در انگولار ۲
- بخش ۱-۴: طراحی و برنامهنویسی سایت نظرسنجی با انگولار ۲
- بخش ۱-۵: طراحی پیشرفته سایت نظرسنجی با انگولار ۲
فصل ۲
- بخش ۲-۱: مقدمه و شروع کار با زبان TypeScript
- بخش ۲-۲: کار با کلاسها، متدها، ویژگیها و … در TypeScript
فصل ۳
فصل ۴
- بخش ۴-۱: آشنایی با فرمها (NgForm و NgModel) در انگولار ۲
- بخش ۴-۲: اعتبارسنجی FormBuilder و ngModel در انگولار ۲
فصل ۵
فصل ۶