آموزش انگولار

مزایای عمده استفاده از انگولار در وب‌اپلیکیشن‌ها به شرح زیر است:

• انگولار به جای افزودن کد HTML داخلی خاص خود، به صورت مستقیم DOM صفحه را دست‌کاری می‌کند که به مراتب سریع‌تر است.
• «اتصال داده» (Data Binding) در زمان هر تغییر در کنترل یا مقدار رخ نمی‌دهد. بدین ترتیب چیزی به نام «شنونده تغییر» (Change Listener) وجود ندارد، بلکه در نقاط خاصی از اجرای جاوا اسکریپت این رصد تغییرات انجام می‌یابند. این موضوع موجب بهبود چشمگیری در عملکرد می‌شود، چون یک به‌روزرسانی منفرد دسته‌ای Model/View جایگزین صدها رویداد تغییر داده آبشاری می‌شود.
• هیچ نیازی به استفاده از تابع‌های observable وجود ندارد. انگولار DOM صفحه را تحلیل می‌کند و اتصال‌ها را بر مبنای خصوصیت‌های عنصر خاص انگولار می‌سازد. این امر نیازمند کدنویسی کمتری است یعنی کد منسجم‌تر است، درک آن آسان‌تر است و خطاهای کمتری دارد.
• امکان بسط قابلیت‌هایی از قبیل تزریق وابستگی، مسیریابی، انیمیشن، کپسوله‌سازی نما و موارد دیگر وجود دارد.
• از سوی IDE-های IntelliJ IDEA و Visual Studio.NET پشتیبانی می‌شود.
• از سوی گوگل و جامعه توسعه‌دهندگان عالی آن پشتیبانی می‌شود.
• انگولار راه‌حلی عالی برای توسعه سریع در سمت فرانت است. این کتابخانه به هیچ پلاگین یا فریمورک دیگری نیاز ندارد.
• انگولار آمادگی تست unit را دارد و این یکی از بهترین مزیت‌های این فریمورک است.

چرا انگولار را فریمورک می‌نامیم؟

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

تاریخچه انگولار

نخستین نسخه انگولار از سوی شخصی به نام «میشکو هیوِری» (Miško Hevery) که یک توسعه‌دهنده در گوگل بود، ‌در سال‌های 2008 و 2009 ایجاد شد. او یک فریمورک برای تسهیل ساخت وب‌اپلیکیشن‌ها طراحی کرده بود. این فریمورک نه برای توسعه‌دهندگان وب، بلکه برای استفاده طراحان وب ارائه شده بود که اطلاعات فنی کمی از دانش برنامه‌نویسی داشتند. به این ترتیب اگر یک وب‌سرور استاتیک داشتید، می‌توانستید یک وب‌اپلیکیشن ساده بسازید. «آدام آبرونز» (Adam abrons) یکی از همکاران میشکو پیشنهاد کرد نام این پروژه انگولار یعنی زاویه‌دار باشد، زیرا HTML شامل «براکت‌های زاویه‌دار» (Angular) است.

در این زمان مدیر میشکو در شرکت گوگل به نام «براد گرین» (Brad Green) از وی خواست که روی یکی از ابزارهای داخلی گوگل به نام «Google Feedback» کار کند. گوگل یک فریمورک به نام GWT داشت که با جاوا نوشته شده بود و به منظور توسعه ابزارهای داخلی این شرکت مورد استفاده قرار می‌گرفت. دو توسعه‌دهنده دیگر به همراه میشکو 17000 خط کد را در طی 6 ماه نوشتند. دلیل این زمان طولانی آن بود که تست کردن این کد کار دشواری بود. برای افزودن یک برچسب در HTML باید کد آن در جاوا نوشته و کامپایل شده به جاوا اسکریپت HTML انتقال می‌یافت تا در مرورگر وب نمایش یابد. میشکو ادعا کرد که می‌تواند کل این پروژه را در طی 2 هفته با استفاده از ابزاری که خود به نام انگولار توسعه داده است، بنویسد.

با این که وی نتوانست ادعای خود را اجرا کند و این کار را در طی 3 هفته انجام داد، اما حجم کد به 1500 خط کاهش یافت. با این حال این پروژه از سوی مدیران ارشد گوگل حمایت نشد و لذا به صورت یک کتابخانه متن-باز منتشر شد و کار از سوی توسعه‌دهندگان خارج از گوگل ادامه یافت.

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

پیش‌نیازهای آموزش انگولار

برای توسعه یک اپلیکیشن در انگولار باید پیش‌نیازهای زیر را نصب و پیکربندی کنیم.

• جدیدترین نسخه Node.js
• نصب جدیدترین نسخه تایپ اسکریپت
• نصب یک IDE مانند VSCode یا ویژوال استودیو
• همچنین باید Angular CLI را نصب کنیم تا بتوانیم پروژه انگولار را اجرا کنیم.

برای توسعه اپلیکیشن‌های انگولار از زبان برنامه‌نویسی تایپ اسکریپت استفاده می‌شود. تایپ اسکریپت یک زبان برنامه‌نویسی رایگان و متن-باز است که از سوی مایکروسافت توسعه یافته و نگهداری می‌شد. تایپ اسکریپت یک سوپرست نحوی صریح از جاوا اسکریپت محسوب می‌شود که قابلیت نوع‌بندی استاتیک اختیاری را به این زبان افزوده است. «آندرس هیلزبرگ» (Anders Hejlsberg) که رهبر معماری زبان #C و خالق زبان‌های دلفی، توربوپاسکال بوده است، روی توسعه تایپ اسکریپت کار کرده است.

شما برای کار روی اپلیکیشن‌های انگولار باید با زبان تایپ اسکریپت آشنا باشید و از آن بهره بگیرید.

ایجاد پروژه جدید با Angular CLI

اگر بخواهیم یک پروژه جدید در انگولار ایجاد کنیم، می‌توانیم از دستورهای CLI بهره بگیریم. به این منظور باید گام‌های زیر را طی کنیم:

1. برنامه Command Prompt را باز کرد‌ه و یک پوشه ایجاد کنید.
2. دستور  ng new AngularDemo- را اجرا کنید.
3. در زمانی که از شما سؤال شود آیا می‌خواهید مسیریابی انگولار به این پروژه اضافه شود، مخالفت خود را با وارد کردن حرف N اعلام کنید.
4. نوع استایل‌شیت را به صورت CSS انتخاب کرده و دکمه اینتر را بزنید.

بدین ترتیب Angular CLI فیلد‌های لازم برای اجرای پروژه‌های انگولار را همراه با پکیج‌های مرتبط که در پوشه node_modules دانلود می‌شوند ایجاد می‌کند.

ساختار پروژه‌های انگولار

Angular CLI در زمان ایجاد پروژه انگولار، پوشه جدیدی با نام پروژه ایجاد می‌کند. اینک می‌توانید پروژه را در هر ادیتور کدی مانند Visual Studio Code (+) یا Microsoft Visual Studio باز کنید. این پوشه پروژه شامل ساختار زیر است:

پروژه ایجاد شده شامل پوشه‌های زیر است:

1. e2e – این پوشه به منظور تست «سربه‌سر» (end to end) استفاده می‌شود و شامل فایل‌های پیکربندی مرتبط با اجرای تست unit پروژه‌ها است.
2. node_modules – این پوشه شامل پکیج‌های دانلود شده بسته به پیکربندی است.
3. Src – این پوشه شامل سورس کد اصلی پروژه است و سه زیرپوشه دارد:
   1. app – پوشه app شامل فایل‌های مرتبط با پروژه انگولار مانند کامپوننت‌ها، فایل‌های HTML و غیره است.
   2. assets – پوشه assets شامل هر نوع فایل استاتیک از قبیل تصاویر، استایل‌شیت، فایل‌های کتابخانه‌های خاص جاوا اسکریپت و غیره است.
   3. environments – پوشه environments شامل فایل‌های مرتبط با محیط است که در زمان توسعه یا بیلد کردن پروژه‌ها مورد نیاز هستند.

فایل‌های متفاوت پیکربندی

هرزمان که یک پروژه مبتنی بر انگولار را با استفاده از Angular CLI می‌سازیم، 3 فایل مختلف پیکربندی ایجاد می‌شوند که به پیکربندی پروژه‌ها و وابستگی‌ها کمک می‌کنند. این فایل‌ها به شرح زیر هستند.