انگولار یا انگولار جی اس فریمورکی برای توسعه ی فرانت اند وب و براساس زبان جاوااسکریپت است که با تایپ اسکریپت توسعه داده شده است. این فریمورک از مؤلفه‌ها یا همان کامپوننت‌های مجزایی براساس معماری 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 است که کار کدنویسی، نگهداری وخطایابی را ساده‌تر و سریع‌تر می‌کند.

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