آموزش انگولار (AngularJS)

دسته بندی: آموزش طراحی وب

آموزش انگولار جی اس

در این صفحه می خوانید :

انگولار جی اس چیست؟

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه پیدا کرده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (Single Page) هستید. فریمورک انگولار به خوبی معماری MVC را در سمت کلاینت (کاربر) پیاده سازی می کند. انگولار از اچ تی ام ال، Css و  جاوااسکریپت استفاده می کند و تقریبا می توان گفت که نقص های آن ها را برطرف می کند. با توجه به سرویس تجزیه و تحلیل جاوا اسکریپت (Libscore)، انگولار جی اس در وب سایت های Wolfram Alpha ،NBC ،Walgreens ،Intel ،Sprint ،ABC News و بسیاری سایت های دیگر مورد استفاده قرار می گیرد. AngularJS بخش فرانت اند از MEAN-Stack است که متشکل از پایگاه داده مانگو دی بی، اکسپرس جی اس، نود جی اس و خود انگولار جی اس می باشد.

فریم ورک AngularJS با خواندن صفحه اول HTML کار می کند، که دارای خصوصیات HTML اضافی است که در آن تعبیه شده است. AngularJS بر این عقیده ساخته شده است که برای ایجاد رابط کاربری و اتصال به مؤلفه های نرم افزار، باید از برنامه نویسی اعلانی استفاده شود، در حالی که برنامه نویسی ضروری بهتر برای تعریف منطق کاری یک برنامه مناسب است. این فریمورک، HTML سنتی را برای ارائه محتوای پویا از طریق اتصال داده دو طرفه که امکان همگام سازی خودکار مدل ها و نماها را فراهم می کند، سازگار و گسترش می دهد. در نتیجه، AngularJS با تأکید بر دستکاری صریح مدل شیء اسناد (DOM) با هدف بهبود قابلیت تست و عملکرد تأکید می کند.

اهداف طراحی AngularJS شامل موارد زیر است:

  • برای جدا کردن DOM از منطق برنامه. مشکل این امر به طرز چشمگیری تحت تأثیر نحوه ساخت کد قرار می گیرد.
  • برای جدا کردن سمت کلاینت برنامه از سمت سرور. این امر به پیشرفت موازی کارها کمک می کند و امکان استفاده مجدد از هر دو طرف را فراهم می آورد.
  • ارائه ساختار برای سفر در ساختن یک برنامه: از طراحی UI، از طریق نوشتن منطق کسب و کار، تا آزمایش.

AngularJS الگوی MVC را برای ارائه جداگانه، داده ها و اجزای منطق پیاده سازی می کند. با استفاده از تزریق وابستگی، Angular به طور سنتی سرویس های سمت سرور، مانند کنترل کننده های وابسته به مشاهده را به برنامه های وب سمت کلاینت ارائه می دهد. در نتیجه می توان بخش زیادی از بار سرور را کاهش داد.

تاریخچه انگولار جی اس

AngularJS در ابتدا در سال 2009 توسط Misko Hevery در Brat Tech LLC توسعه یافت. قبل از اینکه تصمیم به ترک ایده کسب و کار و انتشار Angular به عنوان یک کتابخانه منبع باز پیدا کنند , سرمایه گذاری در دامنه وب GetAngular.com قرار گرفت. نسخه 1.6 بسیاری از مفاهیم Angular را به AngularJS، از جمله مفهوم معماری نرم افزار Component-based اضافه کرد. در ژانویه 2018 اعلام شد پس از انتشار نسخه 1.7.0 توسعه فعال AngularJS تا 30 ژوئن 2018 ادامه خواهد یافت و بعد از آن  تا 30 ژوئن 2021 به عنوان پشتیبانی بلند مدت پشتیبانی خواهد شد.

ویژگی های انگولار جی اس چیست؟

معماری انگولار جی اس

  • Data-Binding دو طرفه: در حالت عادی هنگامی که مدل تغییر می کند برنامه نویس باید به صورت دستی تغییرات را بر روی المان ها و DOM انجام دهد. اما هنگامی که برنامه نویس از انگولار استفاده می کند این دو با هم به صورت تعاملی رفتار می کنند و تغییرات به صورت خودکار انجام می شود.
  • Templates: در انگولار تمپلیت ها فقط یک Html ساده محسوب می شوند، در مرورگر این تمپلیت ها به DOM تبدیل می شوند و انگولار دقیقا از همین DOM استفاده می کند.
  • Directives: دایرکتیو ها جذاب ترین بخش انگولار هستند. با دایرکتیو ها می توان دست به خلق تگ های دلخواه به جای تگ های معمولی در Html زد و آن ها می توانند به عنوان Widget های جدید عمل کنند.
  • Dependency injection: این قسمت این امکان را به شما می دهد تا به جای ساخت و یا جستجو وابستگی ها، آنها را از انگولار فراخوانی کنید. برای مثال شما می گویید که من به Y نیاز دارم و dependency injection آن را در اختیار شما قرار می دهد.
  • Controller: کنترل کننده با استفاده از دستور ng-controller تعریف می شود. این برنامه به طور عمده بر اساس کنترلر ها برای کنترل جریان داده در برنامه ها کاربرد دارد. کنترل کننده، یک شیء جاوا اسکریپت است که دارای ویژگی ها,خواص و توابع است. هر کنترل کننده scope$ را به عنوان یک پارامتر که به برنامه و ماژول اشاره دارد را می پذیرد.
  • Services: سرویس ها چیزی جز عملکرد توابع جاوا اسکریپت نیستند. آنها مسئول انجام وظایف خاص هستند که این موضوع باعث می شود که آنها منحصر به فرد ,دارای قابلیت نگهداری و سنجش باشند.
  • Filters: فیلتر ها زیر مجموعه ای از آرایه را انتخاب می کنند و یک آرایه جدید را باز می گرداند. یک فیلتر Angular قبل از معرفی آن به کاربر داده ها را تغییر می دهد. ما می توانیم از این فیلتر ها همراه عبارات و دستورالعمل ها استفاده کنیم. یک فیلتر معمولا یک کلمه کلیدی از پیش تعریف شده است، که با نماد "|" استفاده می شود.

قابلیت تست داخلی

  • تزریقی: تزریق وابستگی در AngularJS به شما اجازه می دهد تا به صورت بی نظیری نحوه سیمی شدن برنامه خود را توصیف کنید. این بدان معنی است که برنامه شما به هیچ روش اصلی () که معمولاً یک آشفتگی غیرقابل حفظ است ، نیازی ندارد. تزریق وابستگی نیز هسته ای برای AngularJS است. این بدان معنی است که هر مؤلفه ای که متناسب با نیاز شما نباشد به راحتی قابل تعویض است.
  • قابل آزمایش: AngularJS از پایه طراحی شد تا قابل آزمایش باشد. این جداسازی رفتار را تشویق می کند و از تزریق وابستگی نهایی استفاده می کند.

معماری انگولار جی اس

AngularJS از اصطلاح "حوزه" به شکلی مشابه اصول علم کامپیوتر استفاده می کند. حوزه در علوم کامپیوتر توصیف می کند که چه موقع در این برنامه لازم است که صحت خاصی انجام شود. مشخصات ECMA-262 حوزه را به این شرح تعریف می کند: یک محیط واژگانی که در آن یک شیء عملکرد در اسکریپت های وب سمت کلاینت اجرا می شود. به عنوان بخشی از معماری "MVC"، حوزه "Model" را تشکیل می دهد و به کلیه متغیرهای تعریف شده در دامنه می توان به "مشاهده" و همچنین "کنترل" دسترسی پیدا کرد. دامنه به عنوان یک چسب رفتار می کند و "نمایش" و "کنترل کننده" را به هم متصل می کند. در AngularJS، "حوزه" نوعی شیء خاص است که خودش می تواند در هر قسمت معین از برنامه، با هر یک از شیء های دیگر، محدوده یا خارج از محدوده باشد. هنگامی که اصطلاح "Scope" در زیر استفاده می شود، به موضوع حوزه Angular اشاره می شود و نه حوزه اتصال به یک نام.

معماری MVC

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

آیا این نوشته را دوست داشتید؟