Angular یک فریمورک javascript است. این فریمورک می تواند به وسیله ی یک تگ <script> به یک صفحه HTML اضافه شود.
Angular خصوصیت های HTML را به وسیله ی دستورات (directives) توسعه می دهد و به وسیله ی عبارات (Expressions)، داده ها را به HTML تحویل می دهد.
در این آموزش شما با سیر کردن در ساخت یک سایت فروشگاهی ساده با قابلیت هایی از قبیل کاتالوگ محصولات، سبد خرید و فرم بررسی نهایی، با اساس و پایه Angular آشنا می شوید. این آموزش از محیط توسعه آنلاین StackBlitz استفاده می کند، بنابراین شما می توانید خیلی راحت شروع به کار کنید. این مقاله آموزشی از StackBlitz Generator استفاده می کند تا یک برنامه ساده و آماده را به شما نشان دهد که می توانید با آن تعامل پیدا کرده و بخش های مختلف برنامه را بررسی کنید. در توسعه واقعی شما معمولاً از Angular CLI ، که ابزاری قدرتمند برای خط فرمان است استفاده می کنید. ابزار Angular CLI به شما امکان می دهد تا برنامه ها را تولید و اصلاح نمایید.
ایجاد یک پروژه جدید با انگولار
برای ایجاد یک پروژه جدید روی StackBlitz کلیک نمایید. StackBlitz یک برنامه Angular ساده ایجاد می کند که شامل یک نوار در بالای سایت و یک عنوان برای لیست محصولات است.
وارد StackBlitz شوید تا بتوانید کار خود را ذخیره و از سر بگیرید. اگر حساب GitHub دارید، می توانید از طریق آن حساب وارد StackBlitz شوید. اگر صفحه پیش نمایش StackBlitz آنچه را که انتظار دارید نشان نمی دهد، کد خود را ذخیره کنید و سپس بر روی دکمه تازه سازی کلیک کنید. StackBlitz به طور مداوم در حال بهبود است، بنابراین ممکن است اختلافاتی جزئی در کد تولیدی وجود داشته باشد، اما رفتار برنامه یکسان خواهد بود.
در این بخش با بهبود بخش "محصولات" ، نحو طراحی Template را توضیح می دهیم.
- در پوشه product-list ، قالب فایل product-list.component.html را باز کنید.
- برای نمایش لیستی از نام محصولات، قالب product-list را تغییر دهید.
- هر محصول موجود در لیست، یکی پس از دیگری به یک شکل در صفحه نمایش داده می شود. برای تکرار در لیست از پیش تعریف شده محصولات، دستورالعمل ngFor* را درون تگ آغازین <div> به شکل زیر قرار دهید:
اتصال داده ها (Data Binding)از همان نسخه های ابتدایی Angular در دسترس بوده است. به منظور اتصال داده ها از {{}} استفاده می شود که این فرآیند درج (interpolation) نامیده می شود. در ادامه برای نمایش لیست نام محصولات، از Data Binding استفاده می کنیم.
بعد از تغییر کد، صفحه پیش نمایش بلافاصله به روز رسانی می شود تا نام هر محصول در لیست نمایش داده شود. ngFor* یک structural directive است. structural directive ساختار DOM را به طور معمول با افزودن، حذف و دستکاری عناصری که به آن ها وصل می شوند تغییر شکل می دهند. هر دستور همراه با یک * یک structural directive است.
- برای اینکه هر نام محصول به پیوندی با جزئیات محصول پیوند بخورد، تگ < a > را اضافه کرده و عنوان آن را با استفاده از Data Binding به نام محصول تنطیم کنید.
در صفحه پیش نمایش، نشانگر موس را روی یکی از نام محصولات نگه دارید تا مقدار خاصیت نام را ببینید، که نام محصول به اضافه کلمه "details" است. Interpolation {{}} به شما امکان می دهد مقدار property را به عنوان متن تفسیر کنید. Product Binding [] به شما امکان می دهد از مقدار property در یک عبارت الگو استفاده کنید.
توضیحات محصول را با استفاده از تگ p اضافه کنید. درون تگ p از دستورالعمل *ngIf استفاده کنید تا Angular فقط برای محصولاتی که توضیحات دارند تگ p را ایجاد کند.
برنامه اکنون نام و توضیحاتی برای هر محصول در لیست نشان می دهد. نکته اینکه محصول نهایی پاراگراف توضیحی ندارد. زیرا ویژگی توصیف محصول خالی است و Angular عنصر p را که شامل توضیحاتی برای محصول است ایجاد نمی کند.
