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

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

انگولار جی اس

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

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

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 به عنوان پشتیبانی بلند مدت پشتیبانی خواهد شد.

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

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

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

Data-Binding دو طرفه: در حالت عادی هنگامی که مدل تغییر می کند برنامه نویس باید به صورت دستی تغییرات را بر روی المان ها و DOM انجام دهد. اما هنگامی که برنامه نویس از انگولار استفاده می کند این دو با هم به صورت تعاملی رفتار می کنند و تغییرات به صورت خودکار انجام می شود.

Templates: در انگولار تمپلیت ها فقط یک Html ساده محسوب می شوند، در مرورگر این تمپلیت ها به DOM تبدیل می شوند و انگولار دقیقا از همین DOM استفاده می کند.

Directives: دایرکتیو ها جذاب ترین بخش انگولار هستند. با دایرکتیو ها می توان دست به خلق تگ های دلخواه به جای تگ های معمولی در Html زد و آن ها می توانند به عنوان Widget های جدید عمل کنند.

Dependency injection: این قسمت این امکان را به شما می دهد تا به جای ساخت و یا جستجو وابستگی ها، آنها را از انگولار فراخوانی کنید. برای مثال شما می گویید که من به Y نیاز دارم و dependency injection آن را در اختیار شما قرار می دهد.

Controller: کنترل کننده با استفاده از دستور ng-controller تعریف می شود. این برنامه به طور عمده بر اساس کنترلر ها برای کنترل جریان داده در برنامه ها کاربرد دارد. کنترل کننده، یک شیء جاوا اسکریپت است که دارای ویژگی ها,خواص و توابع است. هر کنترل کننده scope$ را به عنوان یک پارامتر که به برنامه و ماژول اشاره دارد را می پذیرد.

Services: سرویس ها چیزی جز عملکرد توابع جاوا اسکریپت نیستند. آنها مسئول انجام وظایف خاص هستند که این موضوع باعث می شود که آنها منحصر به فرد ,دارای قابلیت نگهداری و سنجش باشند.

Filters: فیلتر ها زیر مجموعه ای از آرایه را انتخاب می کنند و یک آرایه جدید را باز می گرداند. یک فیلتر Angular قبل از معرفی آن به کاربر داده ها را تغییر می دهد. ما می توانیم از این فیلتر ها همراه عبارات و دستورالعمل ها استفاده کنیم. یک فیلتر معمولا یک کلمه کلیدی از پیش تعریف شده است، که با نماد "|" استفاده می شود.

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

برخی از مفاهیم مهم AngularJS عبارتند از:

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

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

  • ایجاد یک injector جدید
  • تدوین دستورالعمل هایی که DOM را تزئین می کنند
  • پیوند دادن همه دستورات به Scope

فریمورک AngularJS به پنج قسمت عمده تقسیم می شود:

ng-app: این  دستورالعمل برنامه AngularJS را به HTML تعریف و پیوند میدهد.

ng-model: این دستورالعمل، مقادیر داده های برنامه AngularJS را به کنترل های ورودی HTML متصل می کند.

ng-bind: این دستور دیگری است که دادههای برنامه AngularJS را به تگهای HTML متصل می کند.

ng-init:این دستورالعمل است که داده های نرم افزار را مقدار دهی اولیه می کند.

ng-repeat: این دستورالعمل عناصر Html را برای هر آیتم در یک مجموعه تکرار می کند.

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

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