انگولار فریم ورک قدرتمندی است که بر پایهی MVC ایجاد شده و از آن جهت تولید نرمافزارهای مدرن در سطح وب، موبایل و دسکتاپ، استفاده میکنند.
این فریم ورک به زبان برنامهنویسی جاوا اسکریپت نوشته شده است. به صورت تخصصی تر باید ذغان داشت که از انگولار به عنوان یک ابزاری برای ساخت نرمافزارهای تک صفحهای یا (Single Page Apps)SPA استفاده میشود.
این سوال برای شما پیش میآید که SPA یا نرمافزارهای تک صفحهای چیست؟ نرمافزارهای مبتنی بر وب یا موبایل که با تکنولوژی SPA ساخته میشوند بدین صورت عمل میکنند که به هنگام کلیک کردن روی یک لینک در این نرمافزارها، صفحه بدون رفرش شدن به صفحه جدیدی منتقل میشود. یعنی بدون اینکه صفحهی وب سایت شما از صفر و مجددا بارگذاری شود، کاربر به صفحه جدیدی منتقل خواهد شد.
همچنین این صفحات دارای حافظه ماندگار بوده و کاربر پس از کلیک روی دکمههای Back یا Next در مرورگر به صفحات قبل یا بعد بدون refresh شدن (بارگذاری مجدد) صفحه انتقال پیدا میکند.
Gmail مثال بسیار مناسبی به عنوان یک نرمافزار تک صفحهای یا SPA است. با انگولار میتوانید دنیای برنامهنویسی خود را تغییر داده و نرمافزارهایی با سرعت اجرایی فوق العاده بالا مثل اپلیکیشنهای موبایل در بستر اینترنت ایجاد کنید.
انگولار ۱ تحت عنوان AngularJs در سال ۲۰۰۹ توسط کمپانی قدرتمند گوگل زیر نظر آقای Misko Hevery ارائه گردید. این نسخه از انگولار در مدت زمان بسیار کوتاهی با استقبال بی نظیر برنامه نویسان سمت کاربر، روبهرو شد. زیرا به عنوان یکی از فریم ورک های سریع برای تولید نرمافزارهای تحت وب و بر پایه JavaScript وارد دنیای برنامهنویسان شده بود و آنها را به شدت تحت تاثیر قرار داد.
انگولار ۲ به عنوان یک بازنویسی مجدد از انگولار ۱ ایجاد شد این نسخه از فریمورک قدرتمند انگولار در سال ۲۰۱۶ و پس از ۶ سال تلاش مداوم مجموعهی گوگل تولید و ارائه شد. این نسخه بسیار متفاوت تر از نسخه ۱ بود و هیچگونه شباهت ساختاری با آن نداشت، هوش بالاتر و ارائهی تکنیکهای منحصر بفرد، این فریمورک را در بالاترین ردهی جهانی نگه داشت.
همچنین پس از این تغییرات عظیم نام اصلی از AngularJs به Angular 2 تغییر پیدا کرد.
انگولار ۴ به عنوان یک ویرایش قدرتمندتر از انگولار ۲ ایجاد شد. این نسخه در سال ۲۰۱۷ روانه دنیای برنامهنویسان گردید. نکتهی قابل توجه این است که تغییرات خیلی وسیعی در این نسخه نسبت به انگولار ۲ ایجاد نشد بلکه ساختار قبلی ویرایش و امکانات جدیدی به آن اضافه شد.
شاید این سوال برای شما پیش بیاید که انگولار ۳ چرا منتشر نشد؟ نسخه ۳ به عنوان یک ویرایش مقدماتی از نسخه ۲ نادیده و بنا به تشخیص کمپانی گوگل تولید مطرح نشد.
سپس انگولار نسخه ۵ در تاریخ ۱ نوامبر سال ۲۰۱۷ در اختیار توسعه دهندگان قرار گرفت. این نسخه یک نقطه عطف در انگولار به حساب می آید زیرا تغییراتی در زمینه کار با httpClient ها ایجاد شد.
در ۴ ام ماه می سال ۲۰۱۸ نسخه ۶ انگولار وارد دنیای برنامه نویسان شد. با بروز شدن انگولار به نسخه ۶ تغییرات خیلی زیادی انجام نگرفت. بلکه بیشتر محوریت تغییرات روی مفاهیم پلتفرم rxjs بود.
نسخه ۷ انگولار نیز در در پاییز سال ۲۰۱۸ ارائه شد.
هم اکنون نیز نسخه 8 انگولار با ویژگی های فوق العاده وارد بازار شده است.
در معماری mvc دادههای شما به عنوان یک مدل شناخته می شود. اطلاعاتی که لازم داریم ممکن است از یک ساختار دادهای خارجی و یا یک داکیومنت json خارجی و حتی یک پایگاه داده بدست آمده باشد.
هر زمان که در مورد Views در MVC شنیدید در جریان باشید که یک قالب برای نمایش دادههای شما اختصاص داده خواهد شد.
کنترلها برچسبی هستند که می توانند دادهها، مدل ویو یا قالب شما را به هم وصل کنند. کنترلرها در جاوا اسکریپت نوشته می شوند اما برای اجرای Views ها و دادهها شما باید از انگولار استفاده کنید.
مقایسه ی بین react و angular کار چندان مناسب و معقولی نیست چرا که react (ریکت) یک کتابخانه یا به بیانی دیگر یک library از زبان جاوا اسکریپت است در حالی که Angular (انگولار) یک چارچوب برنامه نویسی یا یک فریمورک به حساب می آید.
اما به هر حال این مقایسه را تا حدی که ممکن است انجام میدهیم تا اگر قصد یادگیری هرکدام از آنها را دارید بتوانید راحت تر انتخاب کنید و مسیر درستی را انتخاب کنید. React یا Angular؟
اگر میخواهید که یک فریم ورک برای طراحی پروژه های متوسط و بزرگ یاد بگیرید که کار با آن راحت باشد میتوانید به سراغ React بروید و از آن استفاده کنید، ولی اگر قصد یادگیری یک فریمورک برای پروژه های بزرگ و سازمانی را دارید از Angular استفاده کنید چرا که امکانات بالایی را در اختیار شما قرار میدهد.
لطفا اگر در مورد استفاده از هر یک از این فریم ورک های تجربه یا اطلاعاتی دارید در پایین همین پست کامنت کنید تا دیگر دوستان هم از آن استفاده کنند.
انگولار هر صفحه از وبسایت ما را به یک یا چند کامپوننت تقسیم میکند.
هر کدام از این بخش ها یا کامپوننت ها که توسط انگولار پیاده سازی می شوند، خود از سه بخش تشکیل شده اند.
بخش اول قالب یا template آن کامپوننت است که خروجی رندر گرفته شده از انگولار در قالب html می باشد.
بخش دوم کلاس (class) است که متشکل از متغیر ها و توابع جاوا اسکریپت و دستورات انگولار است و خروجی را به template میفرستد. بخش سوم Meta data نام دارد که به بیان ساده مشخص میکند که کدام class و کدام template کامپوننت ما را تشکیل میدهد.
در meta data سلکتور هایی وجود دارد که مانند تگ های html هستند و برای اپلیکیشن ما که با Angular نوشته شده است، مشخص میکند کدام کامپوننت باید اجرا شود. فریم ورک انگولار زبان html را برای ما به نوعی قدرتمند تر میکند و ما با استفاده از آن قادر خواهیم بود تا در دستورات html خود از دستورات شرطی، حلقه ها و data binding استفاده کنیم.
- برای مثال وقتی میخواهید برنامه ای را اجرا کنید زمان زیادی از وقت شما تلف می شود. از ویژگی های یک موتور خوب این است که قالب های با تگ(tag) های خاص مثل html بنویسد:angular این تگ هارا با داده جابه جا میکند.
- Angular مجبورتان نمیکند که قالب را جداگانه بسازید. مانند بقیه کتاب خانه قالب شما یک بخش جدایی ناپذیر ازhtml است. بنابراین خیلی راحت میتوانید از کتاب خانه هایی مثل handle Dom استفاده کنید.
- یکی دیگر از ویژگی هایhtml طریقه کارش با مدل document abject است در برنامه های قدیمی شما باید نگران به وجود امدن رویداد باشید ولی با انگولار داده ها به طور مستقیم به قالب شما وابسته هستند.
- انگولار همچنین شامل دستوراتی برای بارگیری داده های خارجی با داشتن قابلیت توابع ajax است پس به راحتی می توانید document های ajax را بارگذاری کنید.
- برنامه های مدرن جاوا اسکریپت از روشی برای برنامه نویسی استفاده می کنند که به طور معمول به عنوان یک mvc شناخته میشود.
- Models در معماری mvc داده هایتان به عنوان یکModels شناخته میشوند. اطلاعاتی که لازم داریم ممکن است از یک ساختار داده خارجی یا یک document jeson خارجی و حتی یک پایگاه داده خارجی بدست بیاید.
- Views و یا نحوه نمایش مدلتان است. هر زمانی که در مورد views در mvc شنیدید بدانید که یک قالب برای نمایش داده ها اختصاص داده خواهد شد.
Controllers ها می توانند داده ها، مدل ها و یا نحوه نمایش قالبتون را به هم وصل کنند.
- Angular از directives استفاده می کند که می توانید آن را درhtml استفاده کنید و می توانید به صورت پراکننده در سرتاسرhtml تان استفاده شود. این دستورات به انگولار میگویند که چه کاری انجام دهند. این دستورات با ng_ شروع میشوند هر زمانی که چیزی را با حرف g دیدید که شروع می شود بدانید که directives است.
- Data binding: اتصال داده ها باعث کارآمد شدن قالب میشود.
- استفاده ازfilter برای سازماندهی داده ها در قالب استفاده میشود. انگولار یک زبان فیلترینگ دارد که می تواند به یک روش خاص داده ها را سازماندهی کند.
- Modules: بجای استفاده ازکدهای جاوا اسکریپت می توانید از Modules استفاده کنید. Modulesها راحت تر از کدهایشان محافظت می کنند.
- Routes: مسیر ها درهسته ی برنامه های تک صفحه ای قراردارند که به شما امکان می دهند تا قالبتان رو به چند قسمت تقسیم کنید.
- Controllers: روشی هستند که میتوانید مدل ها و مسیر هارا به هم متصل کنید. یک پوشه جدا برای آن خواهیم داشت و عملکرد views ها با این controllers ها کنترل می شوند و پس از آن سازمان دهی میکند.
- الگوهای template: یکی از نکات مهمی که در طراحی وب وجود دارد، بحث قالبها است یعنی همان شکل کلی که از یک وبسایت مشاهده میکنیم. انگولار جی اس با ابزارهای قدرتمند خود ازجمله الگوی طراحی mcv، دایرکتیوها و … توانسته است به آسانی طراحی قالب را بر عهده خود داشته باشد.
- پشتیبانی قدرتمند از فریم ورک Angular: فریم ورک انگولار توسط گوگل منتشر شده است و بهترین متخصصین از سر تا سر جهان در این شرکت بزرگ فعالیت میکنند. همین باعث شده که به روز ترین دانش در توسعه ی محصولات این شرکت استفاده شود. فریم ورک Angular js هم از این موضوع بی نصیب نیست. این فریمورک به سرعت در حال بروز رسانی است و در زمانهای خیلی کوتاه نسخه های جدید از آن منتشر می شود. نسخه ی angular2 به دلیل ضعف هایی که در برخی موارد داشت باعث شد تا حد کمی از محبوبیت انگولار کاسته شود اما از بعد از انتشار نسخه ی Angular 4، دوباره این فریم ورک روند صعودی را در پیشرفت و جذب جامعه ی برنامه نویسان را در پیش گرفت.
آخرین نکتهای که در این مقاله باید به آن اشاره کنیم این است که Angular یکی از پرطرفدارترین فریم ورکهای Open Source جاوا اسکریپت هست که در طراحی سایت برای ساخت انواع اپلیکیشن های تحت وب بکار میره.
تیم Google که روی این پروژه کار کرده سعی کرده یک فریمورک کاملا جدید و متفاوت ارایه بده و اینکارو با استفاده از دانش و تجربه هایی که از ورژن AngularJs کسب کرده بود انجام داد.
کار کردن با Angular راحت تر شده , باگ های ورژن قبلی برطرف شده و بسیاری از ویژگی های جدید هم اضافه شده که Angular رو تبدیل به یک فریمورک تمام عیار برای Front-End کرده است.