معرفی
در این مقاله قصد داریم با اصول Angular Components آشنا شویم. ما می خواهیم یاد بگیریم که دقیقاً چه چیزی یک کامپوننت را تشکیل می دهد و چگونه می توانیم یک کامپوننت جدید را با کمک Angular CLI به برنامه Angular خود اضافه کنیم.
پیش نیازها
- HTML، CSS و JS
- مبانی TypeScript.
اجازه دهید یک نمونه TestApp ایجاد کنیم. برای این کار باید ابزارهای زیر را برای محیط توسعه نصب کرده باشید.
- گره
- Npm (هنگامی که گره را نصب می کنید می آید)
- CLI زاویه ای.
- ویرایشگر متن
برای ایجاد یک برنامه جدید، دستور زیر را در هر مکانی اجرا کنید.
> ng TestApp جدید
هنگامی که دستور شما تکمیل شد، یک پوشه TestApp در داخل پوشه نمونه خود خواهید داشت.
اکنون، پوشه پروژه خود را به نام "TestApp" ایجاد خواهید کرد.
توجه داشته
باشید اگر می خواهید نصب و مقدمه را از ابتدایی ترین روش یاد بگیرید و با اجرای نمونه برنامه شروع کنید،مقاله قبلی من " شروع با Angular CLI " را ببینید.
این قطعه از 3 قسمت تشکیل شده است.
- محتوای HTML قالبی
که به مرورگر ارائه می شود. - کلاس
A چیزی نیست جز بلوک کدی که View را پشتیبانی می کند. کلاس توسط TypeScript ایجاد می شود. مانند سایر زبان های برنامه نویسی، یک کلاس حاوی Data and Methods در داخل آن است. - فراداده کامپوننت
همچنین حاوی ابرداده های متصل به آن است. این در اختیار داشتن اطلاعاتی است که Angular برای تصمیم گیری در مورد اینکه آیا کلاس در واقع یک جزء Angular است یا فقط یک کلاس معمولی به آن نیاز دارد. از ویژگی تایپ اسکریپت برای تزئین ابرداده استفاده کرد. دکوراتور فقط تابعی است که اطلاعات کلاس متصل به آن را ارائه می کند.
بنابراین، وقتی قالب، کلاس و ابرداده را قرار می دهیم، کامپوننت Angular را دریافت می کنیم.
دکوراتور کامپوننت
این اساساً تابعی است که دقیقاً در زیر آن به کلاس متصل می شود. در این مثال، درست زیر کلاس پیوست شده است. وقتی دکوراتور کامپوننت را تعریف می کنیم، فقط به Angular می گوییم که این یک کلاس هواپیما نیست بلکه یک جزء است. تزیین کننده کامپوننت شامل متادیتا و الگویی است که نمای را نشان می دهد. بنابراین، به عنوان بخشی از ابرداده، یک انتخابگر، templateUrl و styleUrl داریم. انتخابگر فقط یک تگ HTML سفارشی است که مؤلفه را نشان می دهد. وقتی انتخابگر را در HTML خود مشخص می کنیم، Angular کامپوننت را در جای خود رندر می کند.
در برنامه نمونه خود، از <app-root></app-root> به عنوان انتخابگر استفاده می کنیم و همان تگ سفارشی در index.html ما استفاده می شود. Angular وقتی با این قالب app-root مواجه می شود، الگوی AppComponent را رندر می کند. الگوی دقیق این انتخابگر مؤلفه <app-root></app-root> با استفاده از templateUrl تعریف شده است. app.component.html تعریفشده حاوی HTML است که از ویژگیهای AppComponent استفاده میکند و در index.html تحت انتخابگر مؤلفه <app-root></app-root> ارائه میشود. اکنون، ما متادیتای styleUrl داریم که به فایل های سبک با پسوند css اشاره می کند.
این اساساً مؤلفه ای است که ما ایجاد کرده و در برنامه Angular خود استفاده می کنیم. اجازه دهید یک کامپوننت جدید ایجاد کنیم و تغییراتی در آن کامپوننت جدید انجام دهیم. ما قصد داریم کامپوننت جدید را با استفاده از Angular CLI اضافه کنیم.
ترمینال یکپارچه را باز کنید و دستور زیر را اجرا کنید.