AngularJS

AngularJS — مرجع (Reference)

آخرین بروزرسانی: 1404/08/23
قبلی: گواهینامه (Certificate)

مرجع (Reference)

این صفحه مثل یک برگه تقلب برای تو است؛ یک مرجع AngularJS که دستورها، فیلترها و توابع مهم را یک جا کنار هم می آورد تا وسط پروژه سریع پیدا کنی چه چیزی کجا استفاده می شود.

مرجع AngularJS برای دستورهای ng- روی تگ ها

در منبع یک جدول بزرگ از Directive های AngularJS داریم. Directive یعنی ویژگی خاص با پیشوند ng- روی تگ HTML که رفتار تگ را هوشمند می کند؛ مثلا فرم را پویا می کند یا متن را از روی داده پر می کند.

مثلا ng-app ریشه برنامه را مشخص می کند. ng-model مقدار کنترل ها را به داده وصل می کند. همچنین ng-click می گوید وقتی روی دکمه کلیک شد، کدام تابع اجرا شود.

نمونه کد ساده با چند Directive مهم

حالا یک مثال کوچک می زنیم تا این مرجع AngularJS خشک نباشد. در این مثال از ng-model، ng-show و فیلتر uppercase استفاده می کنیم.

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Reference Example</title>
  </head>
  <body>
    <div ng-init="name = 'Amir'; show = true">
      <p>
        Name:
        <input type="text" ng-model="name" />
      </p>
      <p ng-show="show">
        Hello {{ name | uppercase }}
      </p>
      <button ng-click="show = !show">
        Toggle text
      </button>
    </div>
  </body>
</html>

مشاهده در ادیتور

اینجا ng-model مقدار ورودی را در متغیر name نگه می دارد. ng-show مشخص می کند پاراگراف سلام فقط وقتی دیده شود که show درست باشد. همچنین فیلتر uppercase متن را با حروف بزرگ نشان می دهد.

دستورهای AngularJS روی تگ های HTML خاص

در جدول دوم منبع، AngularJS روی چند تگ HTML رفتاری ویژه دارد. مثلا تگ های <a>، <form>، <input>، select و <textarea> با AngularJS کمی متفاوت عمل می کنند.

برای نمونه، فرم ها با کمک AngularJS راحت تر اعتبارسنجی می شوند. ورودی ها هم با ترکیب ng-model و دیگر دستورها رفتار پویا می گیرند. بنابراین هنگام کار با این تگ ها حواست باشد که AngularJS ممکن است رفتار پیش فرض مرورگر را عوض کند.

فیلترهای AngularJS برای قشنگ کردن داده ها

در بخش «AngularJS Filters» یک جدول از فیلترها داریم. فیلتر (Filter) ابزاری است که قبل از نمایش داده، آن را فرمت یا مرتب می کند؛ شبیه این است که قبل از نشان دادن نمره، آن را خواناتر بنویسی.

فیلتر currency عدد را به فرمت پولی تبدیل می کند. date تاریخ را در قالب دلخواه نشان می دهد. فیلتر filter بخشی از آرایه را برمی گرداند. در ادامه lowercase و uppercase حروف را کوچک یا بزرگ می کنند. توضیحات کامل در صفحه AngularJS Filters آمده است.

ویژگی های اعتبارسنجی فرم در AngularJS

منبع یک بخش کوتاه برای Validation دارد. Validation یعنی بررسی درست بودن مقدار ورودی ها؛ مثل چک کردن این که نمره بین صفر تا بیست باشد.

  • $dirty یعنی کاربر مقدار فیلد را عوض کرده است.
  • $invalid یعنی مقدار با قوانین تنظیم شده سازگار نیست.
  • $error یعنی آبجکت خطا که جزئیات خطاها را نگه می دهد.

منبع برای جزئیات بیشتر به صفحه AngularJS Validation لینک داده است. آن جا مثال ها و توضیح های بیشتری می بینی.

توابع سراسری AngularJS (Global API)

در انتهای منبع، جدول های Global API آمده اند. Global API یعنی توابع عمومی که با angular. شروع می شوند و در کل برنامه کاربرد دارند؛ مثل تبدیل متن، چک کردن نوع داده یا ساخت ماژول.

توابع تبدیل و پیمایش داده ها

در جدول Converting توابع angular.lowercase() و angular.uppercase() رشته را کوچک یا بزرگ می کنند. angular.copy() یک کپی عمیق از آبجکت یا آرایه می سازد؛ یعنی نسخه ای جدا که تغییر در آن روی نسخه اصلی اثر ندارد.

تابع angular.forEach() روی هر عضو آرایه یا هر کلید آبجکت، یک تابع اجرا می کند. این شبیه این است که روی لیست دانش آموزان کلاس حرکت کنی و برای هر نفر یک کار مشخص انجام دهی.

توابع تشخیص نوع و مقایسه

در جدول Comparing توابعی مثل angular.isArray() و angular.isDate() قرار دارند. این توابع کمک می کنند بفهمی مقدار واقعا آرایه است یا تاریخ.

علاوه بر این ها، توابع angular.isDefined()، angular.isElement()، angular.isFunction()، angular.isNumber()، angular.isObject()، angular.isString() و angular.isUndefined() نیز وضعیت نوع داده را مشخص می کنند. در آخر هم angular.equals() برای مقایسه دو مقدار از نظر محتوا استفاده می شود.

توابع JSON و توابع پایه ماژول

در جدول JSON دو تابع مهم داریم. angular.fromJson() یک رشته JSON را به آبجکت جاوااسکریپت تبدیل می کند. برعکس آن، angular.toJson() یک آبجکت جاوااسکریپت را به رشته JSON تبدیل می کند.

در جدول Basic سه تابع کلیدی وجود دارد. angular.bootstrap() برنامه را به صورت دستی شروع می کند. angular.element() یک عنصر HTML را شبیه jQuery بسته بندی می کند. همچنین angular.module() ماژول جدید می سازد یا آن را برمی گرداند. منبع برای توضیح بیشتر به صفحه AngularJS API اشاره کرده است.

تمرین قدم به قدم با مرجع AngularJS

برای این که فقط جدول حفظ نکنی، بهتر است با این مرجع AngularJS تمرین عملی انجام دهی. این مراحل ساده را اجرا کن.

  1. از جدول Directive ها سه مورد انتخاب کن؛ مثلا ng-click، ng-show و ng-model.
  2. حالا به صفحه هر کدام در منبع برو و مثال ها را ببین.
  3. سپس همان مثال ها را ترکیب کن و یک فرم کوچک بساز.
  4. بعد از بخش Filters یک فیلتر مثل uppercase یا currency اضافه کن.
  5. در آخر چند تابع Global API مثل angular.isArray() را در کنسول تست کن.

نکته: اگر تازه با AngularJS شروع کرده ای، قبل از استفاده سنگین از این مرجع، یک مرور کوتاه روی صفحه های آموزشی پایه انجام بده؛ مثلا صفحه معرفی دستورها در آموزش دستورهای AngularJS تا جدول ها برایت واضح تر شوند.

جمع بندی سریع

  • این صفحه یک مرجع AngularJS برای Directive ها، فیلترها و Global API است.
  • دستورهای ng-* رفتار تگ های HTML را هوشمند و پویا می کنند.
  • فیلترها داده را قبل از نمایش تمیز و خواناتر نشان می دهند.
  • ویژگی های اعتبارسنجی مثل $invalid وضعیت درست بودن فرم را ساده نشان می دهند.
  • توابع angular.* ابزارهای کمکی برای تبدیل، تشخیص نوع و ساخت ماژول هستند.
قبلی: گواهینامه (Certificate)