آموزش انگولار دو: پروژه محور #1

آموزش انگولار دو: پروژه محور  #1

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

تور قهرمانان: ساخت یک اپ با انگولار دو و تایپ اسکریپت

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

تور قهرمانان هسته اصلی انگولار را پوشش می دهد. ما از directive های توکار برای نمایش/ پنهان کردن عناصر و همچنین نمایش لیست داده های قهرمان استفاده خواهیم کرد. یک کامپوننت برای نمایش قهرمان و دیگری را برای نمایش آرایه ای از قهرمانان می سازیم. ما از انقیاد داده یک طرفه ( one-way data binding) برای داده های فقط خواندنی استفاده خواهیم کرد. فیلد های قابل ویرایش را با انقیاد دو طرفه (two-way data binding) برای به روزرسانی یک مدل بکار خواهیم گرفت. و سایر ویژگی ها:

  • انقیاد تابع های کامپوننت به رویداد های کاربر مثل زدن کلید یا کلیک ها
  • انتخاب یک قهرمان از لیست قهرمانان در صفحه اصلی و ویرایش در صفحه جزییات
  • فرمت کردن داده ها با pipe ها
  • ساخت یک سرویس مشترک را برای فراهم کردن داده قهرمانان
  • استفاده از مسیریابی (routing) برای گردش بین ویو های مختلف کامپوننت ها

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

دمو

نمایی از پروژه پایانی

اینجا تصویری از ایده این تور است که با یک داشبورد که قهرمان ترین قهرمانان را نمایش می دهد, شروع می شود.
Output of heroes dashboard
با کلیک روی یک قهرمان به نام Magneta :
Details of hero in app
همچنین در قسمت قهرمانان لیستی از قهرمانان را خواهید دید.

Output of heroes list app
همچنین تمام ناوبری های ممکن را در عکس زیر مشاهده می کنید.
View navigations

این هم دمو برنامه در عمل:
Tour of Heroes in Action

قسمت بعدی

ما تور قهرمانان را قدم به قدم با هم می سازیم. در هر قدم حس انگیزه و هیجان را با یک نیازمندی که در هزاران پروژه با آن مواجه می شوید ایجاد می کنیم. هر چیزی یک دلیل دارد.

البته با تعداد زیادی از اصول هسته انگولار دو در این راه آشنا خواهیم شد.

  • Kami Re

    اینجوری که پروژه داره جلو میره همه متخصص انگولار 2 میشیم :))

    • سلام
      متاسفانه تا 3-4 ماهی وقت ندارم. ان شاالله بعدش شروع می کنم ادامه دوره رو .
      البته خودتونم می تونیم بخش آموزش مستندات انگولار رو تو angular.io بخونید 🙂