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

برای تسلط بر این فریمورک و تبدیل شدن به یک توسعه دهنده‌ی انگولار، شما علاوه بر یادگیری html، css، جاوااسکریپت و تایپ اسکریپت بایستی با مفاهیم خاص این فریمورک و ویژگی‌های آن آشنا شوید. در ادامه این مقاله به منظور آشنایی بیشتر با مفاهیم انگولار به بررسی اجمالی آن پرداخته‌ایم.

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

انگولار یک فریمورک مبتنی بر جاوااسکریپت است که با زبان TypeScript نوشته شده است. شرکت گوگل پدیدآورنده‌ی این فریمورک بوده و هدف اصلی آن توسعه‌ی اپلیکیشن‌های تک صفحه‌ای یا single-page می‌باشد. این فریمورک با استفاده از ساختارهای استاندارد برنامه‌نویسی، امکان توسعه‌ی سریع  اپلیکیشن در سمت فرانت‌اند را برای توسعه‌دهندگان فراهم کرده است.

فریمورک یک چارچوب نرم‌افزاری است که مجموعه‌ای از کدها، توابع، اشیا، کتابخانه‌ها و ... را فراهم کرده است و کاربر با نوشتن برنامه‌ی خود در قالب این چارچوب نرم‌افزاری می‌تواند از امکانات از پیش تعریف شده‌ی این چارچوب استفاده کند و کارکردهای پیچیده‌تر با کدنویسی ساده‌تر به برنامه‌ی خود بیفزاید.

اگر علاقمند به طراحی، ساخت و آموزش برنامه‌­نویسی وب هستید، باید به دنبال یادگیری زبان‌های تگ نویسی  html و css برای ساخت چارچوب و ظاهر صفحات وب باشید و اگر خواهان ایجاد یک صفحه‌ی تعاملی به همراه ویژگی‌های بصری بیشتر و نیز ارسال و دریافت داده‌های پویا با کاربران صفحات وب هستید قطعاً باید زبان جاوااسکریپت را یاد بگیرید تا بتوانید وارد حوزه‌ی کاری فرانت‌اند شوید. البته در بازار کار فعلی برای تبدیل شدن به یک فرد متخصص در حوزه‌ی فرانت‌اند نیاز به یادگیری فریمورک‌های جاوا اسکریپت برای ایجاد صفحات وب دارید. یکی از فریمورک‌های مشهور مبتنی بر جاوااسکریپت انگولار (Angular) است.

تاریخچه‌ی فریمورک انگولار

شرکت گوگل در سال 2010 فریمورکی تحت عنوان انگولار جی اس (AngularJS) را ابداع کرد که بر مبنای زبان جاوااسکریپت بود. می‌توان گفت تمامی ورژن‌های نسخه‌ی 1.x.x انگولار جی اس مبتنی بر زبان جاوااسکریپت‌اند و تنها جاوااسکریپت را پشتیبانی می‌کنند. بعدها در سال 2016  گوگل نسخه‌ی دوم انگولار جی اس را با نام انگولار عرضه کرد که در اصل مبتنی بر تایپ اسکریپت (TypeScript) است و البته جاوااسکریپت را هم پشتیبانی می‌کند. اما برای بهره‌گیری کامل از امکانات این فریمورک بهتر است زبان تایپ اسکریپت را آموخت.

پس می‌توان گفت انگولار نسخه‌ی به روز شده‌ی انگولار جی اس است که تغییرات اساسی در آن ایجاد شده و در مقایسه با انگولار جی اس امکانات بهتری همچون سازگاری با اپلیکیشن‌های موبایل و انواع سیستم عامل‌ها، پشتیبانی از سئو و ابزار واسط خط فرمان داخلی (built-in CLI) را دارد.

انگولار  و معماری MVC

انگولار  یک فریمورک مبتنی بر MVC است. Model View Controller که به اختصار آن را MVC می‌نامند یک الگوی طراحی نرم‌افزاری است که در توسعه‌ی برنامه‎های کاربردی وب از آن پیروی می‌کنند تا کدنویسی تمیزتر انجام شود و اعمال تغییرات جدید آسان‌تر باشد. الگوی طراحی MVC از سه جز اصلی تشکیل شده است:

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

View: این قسمت مسئول نمایش داده‌ها به کاربر نهایی اپلیکیشن است.

Controller: کدهای نرم‌افزاری که تعامل میان View و Model را فراهم می‌کند. کنترلر تمامی درخواست‌های رسیده به اپلیکیشن را دریافت می‌کند. سپس در همکاری با Model آنچه را که برای نمایش توسط View نیاز است، آماده می‌کند.

ویژگی‌های اصلی انگولار

در زیر به برخی از مهم‌ترین ویژگی‌های اصلی فریم ورک انگولار اشاره می‌کنیم:

ایجاد ویوی برنامه در قالب html

از  مفاهیم مهم در انگولار تمپلیت (Template) یا قالب است. منظور از تمپلیت یا قالب، همان viewهای رندر شده (نمایش داده شده در قالب گرافیکی برای کاربر) است که محتوا و داده‌های آن به کمک model و controller ایجاد می‌شوند. این فریمورک به شما این امکان را می‌دهد که html را به عنوان زبان قالب یا همان تمپلیت خود در نظر بگیرید و به کمک انگولار بتوانید ساختار قالب htmlای خود را گسترش دهید و کامپوننت‌های مختلف و کارایی‌های گوناگون را با سرعت بیشتری به آن اضافه کنید.

پیوند داده و تزریق وابستگی

فریمورک انگولار به کمک دو مفهوم پیوند داده یا Data Binding و تزریق وابستگی  یا Dependency Injection این امکان را فراهم می‌کند کدهای شما کوتاه‌تر و کاراتر باشند.

 پیوند داده به معنای همگام کردن خودکار داده بین کامپوننت‌های model و view است. به مفهوم ساده‌تر متغیرهایی که در ساختار html (view) صفحه‌ی وب خود قرار می‌دهید، به محض اینکه تغییری در مقادیر آن‌ها (در واقع توابع و عملیات model) پدید آمد، به روز رسانی شده و به صورت همگام مقادیر به روز رسانی‌شده برای کاربر نمایش داده می‌شود.

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

مفاهیم پیوند عمیق یا Deep Linking

پیوند عمیق یا Deep Linking در انگولار این امکان را فراهم می‌‍‌کند که وضعیت فعلی برنامه‌ی کاربردی را در URL ذخیره کنیم. این حالت به برنامه کاربردی اجازه می‌دهد که برنامه را از جاییکه متوقف شده و وضعیت آن ذخیره شده، ادامه ‌دهد.

مسیریابی یا Routing در انگولار

مسیریابی یا Routing در انگولار امکان جابجایی بین صفحات و viewهای مختلف در صورت لزوم را فراهم می‌کند. به طور مثال حین بارگذاری شدن اپلیکیشن کدام صفحه ابتدا نمایش داده شود و یا با کلیک بر روی دکمه‌ای چگونه از صفحه‌ای به صفحه‌ی دیگر رفت.

انطباق‌پذیری با مرورگرهای مختلف

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

جامعه‌ی آماری بالای توسعه‌دهندگان

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

انگولار و مفهوم اپلیکیشن تک صفحه‌ای

انگولار امکان توسعه اپلیکیشن وب را می‌تواند به شکل تک صفحه‌ای نیز فراهم می‌کند. اپلیکیشن تک صفحه‌ای یا SPA (Single Page Application) همان‌طور که از نامش پیداست تک صفحه‌ای است که در آن  بسیاری از اجزای صفحه ثابت می‌مانند و تنها بخش‌هایی از صفحه تغییر می‌کنند که به روز رسانی شده و تغییر یافته‌اند. برای مثال صفحه‌ی ایمیل خود را در نظر بگیرید که میان پیام‌های دریافتی خود در حال چرخیدن هستید. صفحه‌ی ایمیل اجزای ثابتی مانند نوار کناری و هدر دارد و تنها محتوایی که در صفحه تغییر می‌کند محتوای ایمیل‌هاست.

در معماری SPA در هر درخواست از سرور تنها اجزای جدید صفحه ارسال می‌شوند، در نتیجه بر خلاف روش معمول تعداد درخواست‌ها و داده‌های ارسالی میان وب سرور و مرورگر کاهش یافته و سرعت تغییر و بارگذاری کاهش می‌یابد. همچنین مقیاس‌پذیری اپلیکیشن و نیز قابلیت استفاده مجدد کامپوننت‌ها در بخش کدنویسی فرانت‌اند افزایش می‌یابد.

دستورالعمل‌های انگولار

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

ng-app: این دستورالعمل برای تعریف و ایجاد ارتباط میان اپلیکشین مبتنی بر انگولار و html است.

ng-model: این دستوالعمل میان داده‌های ورودی اپلیکیشن انگولار و ورودی‌های کنترلی html ارتباط ایجاد می‌کند.

ng-bind: این دستورالعمل میان داده‌های اپلیکیشن انگولار و تگ‌های html ایجاد ارتباط می‌کند.

مزایای انگولار

انگولار از زمان ظهور اولین نسخه‌اش از سال 2016 نسخه‌های بروزرسانی زیادی ارائه کرده است که هرکدام از این نسخه‌ها ویژگی‌هایی را برای کارآمدی بیشتر این فریمورک ارائه کرده اند. مزایای این فریمورک شامل موارد زیر است:

• کامپوننت‌های سفارشی

انگولار نه تنها قابلیت انطباق‌پذیری با کامپوننت‌های وب را دارد، بلکه توسعه‌دهندگان قادرند تا کامپوننت‌های مورد نیاز خود را با قابلیت استفاده‌ی مجدد ایجاد کنند.

• پیوند داده

با ایجاد اتصال میان متغیرهای جاوااسکریپتی و مقادیر تگ‌های htmlای این امکان را فراهم می‌کند تا بدون نوشتن کدهای اضافه یه صفحه‌ی وب تعاملی با کاربر را ساخت.

• تزریق وابستگی

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

• قابلیت تست کردن

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

• جامعیت

انگولار یک فریمورک کامل است که راه‌حل‌های بسیار جامعی برای ارتباط با سرور و مسیریابی در درون اپلیکیشن را فراهم می‌آورد.

• سازگاری با مرورگر

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

محدودیت‌های انگولار

اگرچه Angular JS دارای مزایای فراوانی است اما محدودیت‌هایی هم دارد که مهم‌ترین آن‌ها شامل موارد زیر است:

• یادگیری این فریمورک در مقایسه با سایر فریمورک‌ها کمی زمانبرتر است و مفاهیم بیشتری را در بر می‌گیرد.
• استفاده از فریم ورک انگولار به دلیل قابلیت Single Page Application اختلال شدیدی در کرالینک توسط موتور‌های جستجو ایجاد کرده و همین امر سبب می‌شود که سئو سایت شما با مشکل مواجه شود.

نتیجه‌گیری

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

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