انگولار Angular چیست؟ + مزایا و معایب آن (جامع)

انگولار یا Angular یک فریم ورک جاوا اسکریپت به شکل متن باز (Open source) است که در سال 2009 توسط گوگل به وجود آمده است. انگولار به شما کمک می کند تا اپلیکیشن های تک صفحه ای (single-page-applications = SPA) ایجاد کنید. اپلیکیشن های تک صفحه ای که فقط از طرف مشتری به HTML، CSS و جاوا اسکریپت نیاز دارند.

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

به طور کلی Angular راه را برای توسعه وب تغییر داده است. اکنون می توانید با استفاده از قدرتمندترین و سازگارترین فریم ورک جاوا اسکریپت یعنی انگولار، وبسایت خود را توسعه دهید. بدون شک، فریم ورک های جاوا اسکریپت مانند AngularJs، Ember و غیره آینده توسعه وب هستند.

 

ویژگی های کاربردی و مهم انگولار

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

1. امکان اتصال داده به صورت دو طرفه : یکی از ویژگی هایی که AngularJS دارد این است که بر پایه الگوی طراحی MCV نوشته‌ شده است. این الگوی طراحی می گوید بجای اینکه کد قسمت های مختلف لایه presentation (مانند کامپوننت ها، فرم ها و …) یکجا نوشته شوند، بر اساس وظیفه به سه دسته model ، view و controller تقسیم شوند. این سه دسته کد بصورت زیر با یکدیگر تعامل می کنند :

1. وظیفه view نمایش اطلاعات درون مدل به کاربر و انتقال فرمان های کاربر به controller است.
2. وظیفه controller ارتباط با سایر لایه ها ( برای مثال business logic) و بروز رسانی model است.
3. وظیفه model حمل داده ها و اطلاع رسانی به view در صورت اعمال تغییر در model توسط controller است.

2. دایرکیتو (directive) ها: در AngularJS هر جا سخن از سفارشی سازی و بکار گیری ابزار جدید به میان می آید، نام directive ها می درخشد. directive ها در Angular JS ، همان attribute های المان های HTML هستند که انگولار به ما اجازه می دهد آن ها را توسعه دهیم . Angular بسیاری از directive ها را به صورت تعبیه در هسته خود دارد.

 

3. Dependency injection یا تزریق وابستگی: فرض کنید در خانه خود نشسته اید و در حال تعمیر یک وسیله برقی هستید که ناگهان پیچی را گم می کنید. دوست داشتید در خانه شما یک سیستم وجود داشت که به‌ جای دنبال کردن و پیدا کردن پیچ، به آن سیستم دستور می دادید تا طبق تعریفی که قبلاً برای آن داشته‌ اید، به شما مشابه آن پیچ را تحویل دهد.

این دقیقا امکانی است که ویژگی Dependency injection در اختیار شما می گذارد. در واقع Dependency injection یک الگوی طراحی نرم افزار است که در آن object ها به عنوان وابستگی ها (dependency) ارسال می شوند. این به ما کمک می کند تا وابستگی های کدگذاری شده سخت را حذف کرده و وابستگی های قابل تغییر را ایجاد کنیم. با استفاده از Dependency Injection می توانیم کامپوننت های قابل نگهداری، قابل تست و قابل استفاده مجدد ایجاد کنیم.

 

Dependency Injection به دلایل زیر مورد نیاز است :

• روند ایجاد و مصرف dependency ها را از هم جدا می کند.
• اجازه می دهد تا  dependency های مستقل ایجاد کنیم و توسعه دهیم.
• زمانی که لازم باشد می توانیم وابستگی ها را تغییر دهیم.
• اجازه می دهد که Object های ساختگی را به عنوان وابستگی ها برای تست، تزریق کنیم.

4. الگوهای template : یکی از نکات مهمی که در طراحی وب وجود دارد، بحث قالب‌ ها است یعنی همان شکل کلی که از یک سایت مشاهده می کنیم. AngularJS با ابزارهای قدرتمند خود از جمله الگوی طراحی mcv، دایرکتیوها و … توانسته است به‌ آسانی طراحی قالب را بر عهده خود داشته باشد.

 

تفاوت های Angularjs با سایر فریم ورک های جاوا اسکریپت

• ساختار کنترل DOM برای تکرار، پنهان کردن و نشان دادن قطعات
• استفاده از objectهای قدیمی جاوا اسکریپت
• استفاده از dependency injection یا تزریق وابستگی که در قسمت قبلی توضیح دادیم.

 

معایب AngularJS

بزرگترین نقص فریم ورک Angular این است که راه های بسیاری برای انجام یک کار وجود دارد. وقتی که شما از انگولار برای پروژه های نسبتا بزرگ استفاده می کنید، یافتن بهترین راه برای انجام کارها بسیار دشوار خواهد بود. همچنین باید بسیار مراقب باشید که اگر از رویدادها و المان های DOM به روشی به جز Angular استفاده می کنید، آنها را پاکسازی کنید تا دچار نشت حافظه  memory leakنشوید.

محیط توسعه انگولار

• Visual Studio 2012/2013 Express or higher
• Eclipse
• WebStorm
• Sublime Text
• TextMate

برای شروع به کار می توانید به سایت plnkr.co مراجعه کنید. روی تب Editor  کلیک کنید و وارد ادیتور شوید.

در این قسمت می توانید سورس ها و اسکریپت های مورد نظر خود را از سمت چپ ویرایش گر اضافه کنید و بر روی Run کلیک کنید و در نهایت برنامه نویسی خود را شروع کنید.