انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS

انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS

انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS

با مقاله انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS از وب سایت آموزش برنامه نویسی سورس باران در خدمت شما هستیم. Angular JS این روزها پرطرفدارترین فریمورک جاوا اسکریپت است. انگولار امکان ساخت اپلیکیشن برای وب, موبایل و دسکتاپ‌ را فراهم می‌کند و به خاطر سرعت و کارآیی زبان زد است. میلیون‌ها کاربر در سرتاسر جهان دارد و گوگل به خوبی آن‌ را پشتیبانی می‌کند. در ایران, توانایی کارکردن با انگولار به یکی از پایه‌ای ترین توانایی‌های توسعه دهندگان تبدیل شده است.

انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS

فریم ورک انگولار یا Angular JS یک چهارچوب Open Source است که برای ساختن وب اپلیکیشن های پویا مورد استفاده قرار می گیرد. به بیان دیگر، انگولار چهارچوبی برای ساختن صفحات وب می باشد و موجب آن می شود که کدهای صفحات وب را به صورت بهینه و حرفه ای بنویسید.
از آنجایی که هسته چهارچوب انگولار جی اس جاوا اسکریپت می باشد، کاربر ملزم است برای ساخت محتویات این چهارچوب از جاوا اسکریپت استفاده نماید. فریم ورک انگولار توسط مهندسین گوگل ساخته شده و به صورت رایگان قابل دانلود می باشد. همین ویژگی سبب محبوبیت هرچه بیشتر فریم ورک انگولار گشته است.

انگولار تا نسخه یک AngularJS نامیده می شد. اما بعد از نسخه ۲ صرفا آن را Angular می نامند هرچند که نام AngularJS همچنان کاربرد دارد و خیلی از افراد همچنان از این واژه استفاده می کنند. انگولار از نسخه ۲ به بعد کاملا متحول شده است و آخرین نسخه آن تا این تاریخ نسخه ۵ می باشد.

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

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

بنابراین در یک برنامه‌ی واقعی که چیزی شبیه به این می باشد شما یک صفحه index.html دارید که می توانید ببینید چقدر کوتاه است. برای اینکه بدانید برنامه شما چطور ممکن است به نظر برسد از قسمتی استفاده کنید که نه تنها سند اصلی بلکه قسمتی از داده‌هایی که شما نیاز دارید در برنامه ی خود استفاده کنید را نشان می دهد و با کلیک بر روی هر یک از این گزینه‌ها جزئیات برای شما نمایان خواهد شد و با کلیک بر روی هر یک از آیکن‌ها به داده های مورد نظر برسید.

حتما بخوانید ۱ : فیلم آموزش AngularJS برای تازه کاران به زبان اصلی

حتما بخوانید ۲ : فیلم آموزشی تست اپلیکیشن های AngularJS

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

ویژگی‌های مهم Angular JS

یکی از موارد مهم استفاده از انگولار جی اس را موارد بالا شرح دادیم اما در ادامه این مقاله سعی داریم تا ویژگی‌های مهم دیگری که این فریم‌ورک دارد را به شما معرفی کنیم:

۱- امکان اتصال داده به صورت دوطرفه در انگولار جی اس

یکی از خصوصیاتی که انگولار جی اس دارد این است که بر پایه الگوی طراحی MCV نوشته‌ شده است. M مخفف model و V مخفف view است. درواقع model کاری که انجام می‌دهد این است که اطلاعات و داده‌ها را از منابع بازیابی می‌کند و view نیز به‌عنوان یک نمایشگر به من و یا شما که مخاطب یک وب‌سایت هستیم، این اطلاعات را نشان می‌دهد که بسیار در رابط کاربری یا UI کاربردی است.
نکتهای که اینجا وجود دارد این است که زمانی که شما تغییری را در model انجام می‌دهید باید در view هم تغییراتی را اعمال کنید که این کار می‌توانید در دادههای زیاد، کاری بسیار وقت‌گیر باشد لذا اگر از انگولار جی اس استفاده می‌کنید نباید نگران این موضوع باشید چراکه انگولار جی اس هر داده را به view مشخص مرتبط کرده و در هنگام تغییرات، این view است که به‌صورت خودکار آپدیت می‌شود.

۲-  دایرکتیوها در انگولار جی اس

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

۳-  dependency injection یا تزریق وابستگی در انگولار جی اس

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

۴- الگوهای template در انگولار جی اس

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

۵- Controller در انگولار جی اس

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

۶- Services در انگولار جی اس

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

۷- Filters در انگولار جی اس

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

۸- Data binding در انگولار جی اس

اتصال داده‌ها باعث کارآمد شدن قالب می‌شود شما می‌توانید مکانی را برای ایجاد محتوا ایجاد کنید و بعد از آن به اطلاعات داده مربوط می‌شود .

۹- Filters در انگولار جی اس

انگولار یک زبان فیلترینگ دارد که می‌تواند به یک روش خاص داده‌ها را سازمان دهی کند یا به راحتی با عناصر فرم تغییر بدهد.

۱۰- Modules در انگولار جی اس

به جای ایجاد یک داکیومنت جاوا اسکریپت حجیم می توانید قابلیت‌های خود را به ماژول ها تجزیه کنید ماژول ها راحت تر از کدها محافظت می کنند.

۱۱- Routes در انگولار جی اس

مسیرها در هسته برنامه‌ی تک صفحه ای قرار دارند که به شما این امکان را می‌دهند که قالب خود را به چند قسمت تقسیم کنید این قابلیتی است که در قسمت های مختلف برنامه شما وجود دارد.

دلایل استفاده از Angular JS

  1. توسعه‌ی وب اپلیکیشن‌های پیشرو

  2. امکان توسعه‌ی اپلیکیشن‌های بومی(native)

  3. امکان ساخت اپلیکیشن‌های دسکتاپ

  4. تولید کدهای بهینه شده از تمپلیت‌ها

  5. جامعه‌ی کاربری بالا

  6. نیاز فراوان بازار

 

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

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>
پیشنمایش

امیدواریم که مقاله انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS مورد توجه دوستان عزیز قرار گرفته باشد.

مشاهده جلسات قبل معرفی زبان های برنامه نویسی

  1. زبان برنامه نویسی سی و سی پلاس پلاس
  2. معرفی زبان برنامه نویسی پایتون
  3. Ruby چیست؟ بررسی زبان برنامه نویسی روبی
  4. زبان برنامه نویسی PHP چیست؟
  5. زبان برنامه نویسی Lua چیست؟
  6. کاتلین (Kotlin) چیست؟ توضیح زبان برنامه نویسی کاتلین
  7. Ada چیست؟ معرفی زبان برنامه نویسی Ada
  8. زبان برنامه نویسی COBOL چیست؟ شرح کامل COBOL
  9. معرفی زبان برنامه نویسی Cython
  10. زبان برنامه نویسی Elixir چیست؟ معرفی کامل Elixir (الیکسیر)
  11. کاملترین معرفی زبان برنامه نویسی Groovy
  12. زبان برنامه نویسی Rust چیست؟ کاملترین معرفی زبان برنامه نویسی Rust
  13. زبان برنامه نویسی Scala چیست؟ معرفی،ویژگی ها و کاربرد Scala
  14. معرفی زبان برنامه نویسی Haskell
  15. معرفی زبان برنامه نویسی Lisp (لیسپ)
  16. کاملترین معرفی زبان برنامه نویسی جاوا
  17. معرفی کامل زبان برنامه نویسی Perl و نمونه کد Perl
  18. WinJS چیست؟ معرفی کتابخانه WinJS
  19. SignalR چیست؟
  20. Orchard چیست؟

The post انگولار جی اس چیست؟ معرفی کامل فریم ورک متن باز Angular JS appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

درباره نویسنده: administrator

ممکن است دوست داشته باشید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *