شروع کار با فریم ورک Angular 2

شروع کار با فریم ورک Angular 2

آنچه می خوانید:

  1. معرفی انگولار 2
  2. نوشتن hello world
  3. نصب و نوشتن یک کامپوننت ساده
  4. منابع بیشتر و پیشنهاد ها

 

Angular 2  با شعار یک فریم ورک برای دسکتاپ و موبایل وارد رقابت با سایر فریم ورک ها و کتابخانه های جاوااسکریپتی شد. این بار انگولار با تغییرات زیاد ضمن بهبود سرعت و کارایی یادگیری آن را نیز هیجان بخش تر و بسیار آسان تر کرده است. اگر هیچ آشنایی هم با انگولار 1 نداشته باشید می توانید همین الان یادگرفتن انگولار دو را شروع کنید! اما یک سوال چرا انگولار 2؟

 

  1. یادگیری آسان تر نسبت به نسخه 1
  2. استفاده از Typescript که هم قابلیت های ES6ES7 و خیلی چیزای دیگه تو خودش داره!
  3. با استفاده از یک کد می توانید اپ های دسکتاپ (الکترون) و موبایل (Ionic, Nativecript) و وب موبایل (Mobile ToolKit) داشته باشید!
  4. وجود محیط و ابزار های کارا مانند Visual Studio Code برای توسعه و رابط خط فرمان (Command Line Interface) انگولار Angular CLI که سرعت کد نویسی را خیلی بالا می بره
  5. پشتیبانی قوی و جامعه کاربری گسترده
  6. دارا بودن کامپوننت های زیبا و غنی Material

 

سلام به انگولار دو !

به جای هیجان انگیز کار رسیده ایم از این لحظه به بعد عاشق انگولار دو خواهید شد 😍! اپ های انگولار از یک سری کامپوننت تشکیل شده اند و هر کامپوننت هم از یک تمپلیت Html و یک کلاس درست شده اند که نمایش یک بخش صفحه را کنترل می کنند. مثلا اینجا یک کامپوننت داریم که یک رشته را نمایش می دهد.

 

خروجی در مرورگر: Hello Angular

دمو

 

ابتدا ماژول کامپوننت را از انگولار ایمپورت می کنیم. سپس توسط تابعی به نام کامپوننت (که دکوریتور نامیده می شود) خاصیت هایی به نام selector,template رو به کلاس بعدش که AppComponent نام دارد اضافه می کند. درون خاصیت template کد های Html قرار می گیرد که البته می توان به متغییر های تعریف شده در داخل کلاس با {{}} دسترسی پیدا کرد. که در اینجا name = 'Angular' است. حال ممکن است برایتان سوال باشد چرا کامپوننت؟ اصلا کامپوننت چی هست؟

 

وب کامپوننت

واقعیت این است که تمام فریم ورک های حال حاضر مثل Ember.js, React.js, Vue.js و خود انگولار 2 رویکردی کامپوننت گرا دارند به معنی که سعی می کنند برنامه نویس ها رو در ساخت کامپوننت هایی با قابلیت استفاده مجدد کمک کنند درست مثل تگ a یا audio و… شما هم یک کامپوننت با نام مثلا <havij> رو داشته باشید که همه پروژه هاتون بتونید ازش استفاده کنید! در کد بالا برای کامپوننت مون مقدار selector را 'my-app' قرار داده ایم تا هر جا لازم شد فقط تگ <my-app> رو باز و بسته کنیم دقیقا شبیه a یا هر تگ دیگه.

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

ساختار درختی کامپوننت ها در انگولار 2

 

1…2…3… آتش !

  1. برای شروع یک پروژه جدید انگولار دو دستور ترمینال وارد کنید (با فرض نصب nodeو npm بر سیستم تان). npm i -g angular-cli
  2. سپس ng new myApp به جای myApp هر اسم دیگر دلخواه می توان گذاشت. خودش کد های لازم را برای شروع تولید و وابستگی ها را دانلود می کند. سپس با دستور cd myApp به فولدر پروژه می رویم
  3. ng serve … تبریک 🎉 همه چیز آماده است و نتیجه را در مرورگر خود می توانید ببینید!

نتیجه کامپایل کد های تایپ اسکریپت

اگر پروژه را ویژوال استودیو کد باز کنید می بینید که تعدادی زیاد فایل برای مان تولید کرده است.

ویژوال کد

اگر در مسیر my-app/src/app فایل app.component.ts را باز کنید بسیار مشابه به کد hello Angular! استبا این تفاوت که دکوریتور آن مسیر تمپلیت Html  و مسیر Style ها را داده ایم.

خب بیایید یک کامپوننت با نام baboon بسازیم که لیست نویسندگان سایت را نمایش دهد. ابتدا ng set defaults.styleExt scss به cli انگولار می گوییم که فایل های استایلی که تولید می کند از نوع scss باشید سپس با دستور ng g component baboon فایل های لازم در پوشه baboon ساخته می شود. 

آموزش angular 2

 

حال در فایل baboon.component.ts و درون کلاس آرایه ای از نام های نویسندگان سایت می سازیم. و آن را درون تابع ngOnInit مقدار دهی می کنیم. این تابع بلافاصله بعد از تابع سازنده اجرا می شود در و در واقع هنگامی که کامپوننت می خواهد رندر شود اجرا می شود.

سپس در قسمت html لیست نویسندگان توسط حلقه for نمایش می دهیم:

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

جالب است بدانید که با یک دستور می توان خروجی بهینه را بر استقرار برنامه تان در سرور داشته باشید یا آن را گیت هاب نمایش دهید (مثل کد های پروژه) برای این کار مستندات cli انگولار را بخوانید.

deplywhoooo

منابع یادگیری انگولار 2

  1. بی شک به شما می گویم از خواندن مستندات سایت انگولار دو لذت خواهید برد چرا که کاملا مفاهیم را به شکلی کاملا پروژه محور ب شما یاد می دهد. خب یک شروع سریع را تجربه کنید !
  2. اگر می خواهید همیشه از بهترین منابع و ابزار های انگولار دو مطلع شوید مخزن awesome-angular2 را از دست ندهید
  3. دوره های ES6 , Typescript, Angular 2 به زبان فارسی

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