معرفی فریم ورک انگولار جی اس – AngularJS

معرفی فریم ورک انگولار جی اس – AngularJS

فریم ورک انگولار جی اس ( angularJS ) یک فریم ورک نرم افزاری تحت وب متن باز مبتنی بر جاوا اسکریپت است که توسط گوگل و گروهی از افراد و شرکت ها نگهداری می شود تا بسیاری از چالش های توسعه برنامه های تک صفحه ای را رفع کند. مولفه های جاوا اسکریپت، فریم ورک پاچی کوردوا را تکمیل می کنند که فریم ورکی است که برای توسعه برنامه های موبایل میان پلتفرمی مورد استفاده قرار می گیرد. هدف آن ساده کردن توسعه و تست چنین برنامه هایی با فراهم کردن یک فریم ورک برای ساختارهای Model-View-Controller (MVC) و Model-View-Viewmodel (MVVM) و همچنین مولفه هایی که عموما در برنامه های غنی اینترنتی استفاده می شوند، است.

محصولات آموزشی مرتبط با این مقاله :

– صفر تا صد آموزش انگولار جی اس ۲

– صفر تا صد آموزش جی کوئری

– محصولات آموزشی مرتبط با برنامه نویسی

– محصولات آموزشی مرتبط با طراحی وب

فریم ورک انگولار جی اس در ابتدا صفحه HTML را می خواند که خصیصه های tag  اضافه ای در آن تعبیه شده است. انگولار آن خصیصه ها را به عنوان directive تفسیر می کند تا قسمت های وروردی و خروجی صفحه را به مدلی پیوند بزند که توسط متغیرهای استاندارد جاوا اسکریپت نمایش داده شده اند. مقادیر آن متغیرهای جاوا اسکریپت را می توان به طور دستی در کد قرار داد یا از منابع JSON استاتیک یا دینامیک گرفت.

طبق سرویس تحلیلی جاوا اسکریپت Libscore، از انگولار جی اس در وبسایت های Wolfram Alpha، NBC، Walgreens، Intel، Sprint، ABC News و تقریبا 12000 سایت دیگر از میان 1 میلیون سایت تست شده در اکتبر 2016، استفاده شده است.

انگولار جی سی بخش جلویی MEAN Stack  است که حاوی پایگاه داده MongoDB، فریم ورک سرور برنامه تحت وب Express.js، خود Angular.js و محیط اجرای Node.js می باشد.

انگولار جی اس

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

اهداف طراحی فریم ورک انگولار جی اس شامل موارد زیر است:

• برای جداسازی دستکاری DOM از منطق برنامه. دشواری این کار بشدت تحت تاثیر نحوه ساختاربندی کد قرار دارد.
• برای جداسازی سمت مشتری برنامه از سمت سرور. این کار اجازه می دهد کار توسعه به صورت موازی انجام شود و می تاون از هر دو سمت مجددا استفاده کرد.
• برای فراهم کردن ساختار برای فرایند ساخت یک برنامه: از طراحی رابط کاربری تا نوشتن منطق تجاری و تست کردن.

انگولار از الگوی MVC برای جداسازی نمای بصری، داده و مولفه های منطقی استفاده می کند. انگولار با استفاده از تزریق وابستگی، سرویس های سمت سرور سنتی مانند کنترلرهای وابسته به نما را به برنامه های سمت مشتری وارد می کند. در نتیجه بار سنگینی را می توان از روی دوش سرور برداشت.

Scope

در فریم ورک انگولار جی اس از عبارت Scope به طور مشابه با اصول علوم رایانه استفاده می شود.

منظور از Scope در علوم رایانه این است که در یک برنامه، اتصال خاصی صحت داشته باشد. در مشخصات ECMA-262، عبارت Scope  به این صورت توصیف شده است: یک محیط واژه ای که در آن یک شی تابع در اسکریپت های وب سمت مشتری اجرا شده است. همانگونه که Scope  در حساب لاندا تعریف شده است.

Scope  در ساختار “MVC”، Model را تشکیل می دهد و می توان به تمام متغیرهای تعریف شده در Scope  از طریق View و همچنین Controller  دسترسی داشت. Scope به عنوان یک رابط عمل می کند و View و Controller را به هم متصل می کند.

در فریم ورک انگولار جی اس، Scope نوع خاصی از شی است که خود می تواند در هر بخشی از برنامه در داخل و یا خارج از Scope باشد و از قوانین رایج Scope متغیرها در جاوا اسکریپت مانند هر شی دیگری تبعیت می کند. وقتی در این متن از کلمه Scope استفاده می شود، به شی Scope در انگولار اشاره دارد، نه به Scope  از یک اتصال نام. انگولار روش ساده ای برای اتصال داده در HTML DOM است.

Bootstrap

کارهای انجام شده توسط Bootstrapper در انگولار بعد از لود شدن DOM در سه مرحله رخ می دهد:

1. ساخت یک Injector جدید
2. کامپایل کردن directive های که DOM را تزئین می کنند
3. متصل کردن تمام directive ها به Scope

Directive های انگولار جی اس به توسعه دهنده اجازه می دهند عناصر اختصاصی و HTML مانند و قابل استفاده مجدد و همچنین خصیصه هایی که اتصالات داده و رفتار مولفه های بصری را مشخص می کنند، را تعیین کند. برخی از پر کاربردترین directive ها به شرح زیر هستند:

ng-app

عنصر ریشه یک برنامه انگولار جی اس را اعلان می کند که تحت آن می توان از directive ها برای اعلان کردن اتصالات و تعیین رفتار، استفاده کرد.

ng-bind

متن یک عنصر DOM را برابر با مقدار یک عبارت قرار می دهد. برای مثال عبارت <span ng-bind=”name”></span>  مقدار “name” در داخل عنصر Spawn را نمایش می دهد. هر تغییری در متغیر “name” در Scope برنامه فورا در DOM  مشخص می شود.

ng-model

مشابه ng-bind است، اما یک اتصال داده دو طرفه بین View و Scope  ایجاد می کند.

ng-model-options

برای آپدیت شدن مدل تنظیمات فراهم می کند.

ng-class

اجازه می دهد خصیصه های کلاس به صورت دینامیک لود شوند.

ng-controller

یک کلاس کنترلر جاوا اسکریپت مشخص می کند که عبارات HTM را ارزیابی می کند.

Ng-repeat

یک عنصر را یک بار برای هر آیتم از یک مجموعه نمونه سازی می کند.

ng-show و ng-hide

یک عنصر را به طور شرطی نمایش داده یا مخفی می کند که بستگی به مقدار یک عبارت Boolean دارد. نمایش دادن و مخفی کردن با تنظیم سبک نمایش CSS انجام می شود.

ng-switch

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

ng-view

Directive مبنا که مسئول کار با مسیرها است که قبل از اجرای قالب های گرفته شده از کنترلرهای تعیین شده، مشکل JSON  را بر طرف می کند.

ng-if

عبارت directive ساده if  که اگر شرایط برآورده شده باشد، اجازه نمایش دادن عنصر زیر را می دهد. زمانی که شرط False باشد عنصر از DOM  حذف می شود. وقتی True باشد، یک کپی از عنصر کامپایل شده دوباره وارد می شود.

ng-aria

یک ماژول برای پشتیبانی از قابلیت دسترسی خصیصه های رایج ARYA.

ng-animate

یک ماژول که از جاوا اسکریپت، انتقال CSS3 و انیمیشن Keyframe CSS3 پشتیبانی می کند، به directiveهای اصلی و اختصاصی متصل میشود.

ng-table

یک جدول ساده با قابلیت های دسته بندی و فیلتر کرن در فریم ورک انگولار جی اس.

به علت اینکه خصیصه های ng- در مشخصات HTML معتبر نیستند، از data-ng همچنین می توان به عنوان یک پیشوند استفاده کرد. برای مثال، ng-app  و data-ng-app در انگولار جی اس معتبر هستند.

اتصال داده دو طرفه

اتصال داده دو طرفه فریم ورک انگولار جی اس، مهم ترین ویژگی آن است که وظایف قالب بندی را از روی دوش سرور برمی دارد. به جای آن، قالب ها بر اساس داده های موجود در یک Scope که در مدل تعریف شده است، به صورت HTML  ساده رندر می شوند. سرویس $scope در انگولار تغییرات در بخش model را شناسایی می کند و عبارات HTML را از طریق یک کنترلر در View اصلاح می کند. به همین شکل، هر تغییراتی که در view صورت بگیرد، در model  مشخص می شود. این کار نیاز به دستکاری فعالانه DOM را از بین می برد و bootstrapping  و نمونه سازی سریع برنامه های وب را تقویت می کند. انگولار جی اس با مقایسه کردن مقادیر کنونی با مقادیر ذخیره شده در فرایند dirty-checking، تغییرات مدل را تشخیص می دهد، برخلاف Ember.js و Backbone.js که وقتی مقادیر مدل تغییر می کنند، Listenerها را فعال می کنند.

تاریخچه توسعه

فریم ورک انگولار جی اس در ابتدا در سال 2009 توسط Miško Hevery در شرکت Brat Tech LLC به عنوان نرم افزار مربوط به یک سرویس ذخیره سازی آنلاین JSON برای ساخت برنامه های ساده تولید شد که در ازای هر مگابایت قیمت گذاری میشد. این سرویس در دامنه وب GetAngular.com قرار داشت و تعدادی مشترک داشت تا اینکه تصمیم گرفتند ایده کسب و کار را رها کنند و انگولار را به عنوان یک کتابخانه کد باز عرضه کنند.

نسخه های عرضه شده

انگولار 2 یک بازنویسی ناسازگار از انگولار 1 است. انگولار 1 و انگولار 2 هر دو مورد پشتیبانی قرار می گیرند.

انگولار 1

نسخه پایدار کنونی از انگولار 1، نسخه 1.6.1 است.

انگولار 2

انگولار 2 در کنفرانس ng-Europe در 22 و 23 سپتامبر سال 2014 معرفی شد. تغییرات چشمگیر در نسخه دوم باعث ایجاد بحث های بسیاری در بین توسعه دهندگان شد. در 30 آوریل سال 2015، توسعه دهندگان انگولار اعلام کردند که انگولار 2 از حالت آلفا به حالت پیش نمایش توسعه دهنده درآمد. انگولار 2 را می توان از وبسایت رسمی آن دانلود کرد. انگولار 2 در دسامبر سال 2015 وارد نسخه بتا شد و اولین عرضه آن در می سال 2016 انجام شد. ورژن نهایی در 14 سپتامبر سال 2016 عرضه شد. انگولار 2 یک به روزرسانی ورژن نیست، بلکه یک بازنویسی کامل است. مهمترین تفاوت های انگولار 2 با انگولار 1 به شرح زیر هستند:

• انگولار 2 استفاده از زبان TypeScript مایکروسافت را توصیه می کند که پیشرفت های آن به شرح زیر است:
  • برنامه نویسی شی گرای مبتنی بر کلاس
  • تایپ استاتیک
  • Genericها
  • Lambdaها
• تنها مرورگرهای مدرن – عدم نیاز به پیدا کردن راه حل برای سازگاری مرورگر.
• ماژولار بودن – بسیاری از قابلیت های اصلی به ماژول های مختلف انتقال یافته اند و یک هسته سبک تر و سریع تر ایجاد شده است.
• توسعه موبایل – وقتی مشکلات عملکرد موبایل در ابتدا رفع شوند، توسعه برای دسکتاپ بسیار آسان تر است.
• TypeScript یک Superset از ECMAScript 6 است و با ECMAScript 5(مثلا JavaScript) سازگاری معکوس دارد. انگولار 2 همچنین شامل مزایای ES6 است:
  • Iteratorها
  • Loop های For/Of
  • Generatorهای سبک Python
  • Reflection

• تزریق وابستگی بهبود یافته – با اتصال داده، می توان وابستگی ها نام گذاری کرد.
• بارگیری دینامیک
• کامپایل کردن ناهمگام قالب
• مسیردهی ساده تر
• Logکردن js – می سنجد که زمان در کجا صرف شده است تا مشکلات را شناسایی کند
• جایگزین کردن کنترلرها و $scope با مولفه ها و directive ها – مولفه، یک directive به همراه یک قالب است.
• پشتیبانی از برنامه نویسی واکنش گرا با استفاده از RxJS.

انگولار 4

در 13 دسامبر سال 2016، انگولار 4 معرفی شد و شماره 3 را رد کردند تا موجب سردرگمی نشود، زیرا یک بسته NPM تحت نام v3.3.0 توزیع شده بود.

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

ورژن های 1.2 و بالاتر فریم ورک انگولار جی اس از internet Explorer ورژن های 6 و 7 پشتیبانی نمی کنند. در ورژن های 1.3 و بالاتر انگولار جی اس دیگر از Internet Explorer 8  پشتیبانی نمی شود.

افزونه مرورگر Chrome

در جولای سال 2012، تیم انگولار یک افزونه برای مرورگر Google Chrome  به نام Batarang ساختند که تجربه عیب یابی برنامه های وبی که با انگولار ساخته شده اند را بهبود می دهد. هدف این افزونه، شناسایی آسان مشکلات اجرایی است و یک GUI برای عیب یابی برنامه ها ارائه می کند. برای مدتی در اواخر سال 2014 و اوایل 2015 این افزونه با نسخه های جدید انگولار (بعد از ورژن 1.2x) سازگار نبود. در حال حاضر هنوز با تمام ورژن های انگولار کار می کند (البته از ماه مارس سال 2016 به بعد هنوز آپدیتی برای آن عرضه نشده است).

عملکرد فریم ورک انگولار جی اس

انگولار 1 الگوی یک چرخه digest را ایجاد می کند. این چرخه را می توان یک Loop در نظر گرفت که طی آن انگولار بررسی می کند که آیا شانسی برای تمام متغیرهایی که توسط $scopes  تحت نظر قرار دارن، وجود دارد یا خیر. بنابراین اگر $scope.myVar  در یک کنترلر تعریف شده باشد و این متغیر برای تحت نظارت قرار گرفتن علامت گذاری شده باشد، انگولار تغییرات myVar را در هر دور از Loop بررسی می کند.

زمانی که انگولار متغیرهای زیادی را در $scope  در هر چرخه بررسی می کند، این رویکرد احتمالا منجر به رندرهای آهسته خواهد شد Hevery توصیه می کند که کمتر از 2000 Watcher  در هر صفحه وجود داشته باشد.

منابع: ویکی پدیا انگلیسی ، وبسایت AngularJS ، آریا گستر و …

توصیه می کنیم دوره های جامع فارسی مرتبط با این موضوع آریاگستر را مشاهده کنید:

– صفر تا صد آموزش انگولار جی اس ۲

– صفر تا صد آموزش جی کوئری

– محصولات آموزشی مرتبط با طراحی وب

– محصولات آموزشی مرتبط با برنامه نویسی

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

دوره های آموزشی مرتبط