بخش مقالات آکادمی | Articles
آخرین آموزش ها

شاید تا بحال هنگام رجوع به سایت هایی نظیر Gmail از خودتون پرسیدین که “چطوری این سایت وقتی که برروی ایمیل های خودتون کلیک میکنید ،بدون بارگذاری مجدد یا منتقل شدن به صفحه دیگه ایمیلتون رو مشاهده میکنید؟ “… این سوال برای طراحان وبی که با AJAX آشنا هستند پیش پا افتادست. و حالا ما میخوایم در مورد چگونگی این کار صحبت کنیم.

AngularJS چیست؟

برای اینکه با AngularJS اشنا بشین ابتدا باید کمی درمورد SPA ها بدونید. SPA مخفف شده عبارت Single Page Application به معنی برنامه تک صفحه ایی می باشد. این برنامه ها امکانی رو بوجود میارن که نیازی به بارگذاری مجدد صفحات برای انجام بعضی درخواست ها و همینطور جابجا شدن بین صفحات نیست که پیاده سازی این کار توسط AJAX زیاد کار سختی نیست. کتابخانه ایی که توسط محققان شرکت گوگل در سال 2009 شروع به ایجاد شدن کرد، فریم ورک AngularJS بود و در سال 2012 نسخه 1.0 اون رو. انتشار کردند. این فریم ورک متن باز و ایجاد شده با زبان JavaScript  می باشد.

Angular بااضافه کردن امکاناتی به HTML اونو از یک زبان نشان گذاری ساده خارج کرده و محیطی رو برای ایجاد کردن یک نرم افزار داده محور به ساده ترین شکل ممکن ایجاد میکنه.
همجنین توسط AngularJS به راحتی قادر به برنامه نویسی MVC باشین. یعنی اینکه در یک صفحه وب به چندین پایگاه داده مجزا توسط چندین برنامه مجزا دسترسی داشته باشین و اطلاعات رو دریافت و ارسال کنید. از مزیت های دیگه استفاده از این فریم ورک میتوان به ویژگی Data Binding دو طرفه، وجود سیستم Routing قدرتمند و ازهمه مهمتر متن باز بودن آن اشاره کرد.

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

<scriptsrc=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

برای گسترش کد های HTML به AngularJS باید از دستورات زیر استفاده کنید:

  • ng-directives: برای گسترش HTML به AngularJS
  • ng-app: تعریف برای جهت دهی به AngularJS
  • ng-model: متصل کردن داده های ارزشمند نظیر ورودی ها،انتخاب و… به داده های برنامه
  • ng-bind: جهت دهی داده های برنامه به صفحه نمایش HTML

کد مثال زیر نمونه کوچکی از استفاده AngularJS می باشد.

<!DOCTYPE html>
<html>
<scriptsrc=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>
<div ng-app=””>

  <p>Name: <input type=”text”ng-model=”name”></p>
  <p ng-bind=”name”></p>
</div>
</body>
</html>

امیدوارم مطالب این مقاله بدردتون خورده باشه.

تاریخ ارسال
11 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

شما هم نظری بدهید
هنوز دیدگاهی ثبت نشده
توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.