مثال ها (Examples)

توی این صفحه چندین مثال ساده از AngularJS را می بینی. با همین مثال ها می توانی کم کم منطق «مثال های AngularJS» را بفهمی.

اولین مثال از مثال های AngularJS

بیایید با یک مثال خیلی کوچک شروع کنیم. در این مثال، یک input داریم که نام را می گیرد و همان متن را پایین نشان می دهد. این کار با ng-model انجام می شود. ng-model یعنی ورودی را به یک متغیر (Variable) در AngularJS وصل کن.

<div ng-app="">
  <p>
    Name:
    <input type="text" ng-model="name">
  </p>
  <p>
    You wrote:
    {{ name }}
  </p>
</div>

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

این یعنی هر حرفی که در input می نویسی، بلافاصله در {{ name }} دیده می شود. شبیه وقتی است که در چت تایپ می کنی و هم زمان پیش نمایش پیام را می بینی.

مثال ها برای مبانی AngularJS

بخش AngularJS Basics چند مثال پایه ای دارد. این مثال ها چیزهایی مثل دستورها (Directives)، عبارت ها (Expressions) و کنترلرهای ساده را نشان می دهد. مثلا «اولین دستور AngularJS» یا «اولین کنترلر AngularJS».

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

مثال ها برای عبارت های AngularJS

در بخش AngularJS Expressions مثال های زیادی برای عبارت ها می بینی. عبارت (Expression) یعنی یک تکه کد کوچک که مقدار برمی گرداند. مثلا جمع دو عدد یا نمایش یک متن.

اینجا مثال هایی با عددها، رشته ها (Strings)، آرایه ها (Arrays) و شیءها (Objects) هست. همچنین می بینی چطور با ng-bind همین مقدارها را بدون آکولاد نمایش بدهی.

نکته: برای تمرین، همان مثال ها را باز کن و مقدارها را عوض کن. مثلا عددها را بزرگ تر کن یا متن ها را فارسی بنویس.

گروه مثال ها: ماژول، دستور، مدل و کنترلر

چند بخش پشت سر هم، مثال های ماژول ها، دستورات، مدل ها و کنترلرها را نشان می دهند. هرکدام یک مفهوم مهم در AngularJS هستند.

• Modules: ظرف بزرگ اپلیکیشن هستند.
• Directives: تگ ها و ویژگی های ویژه AngularJS روی HTML هستند.
• Models: داده هایی هستند که با صفحه در ارتباط اند.
• Controllers: توابعی هستند که منطق صفحه را مدیریت می کنند.

برای هرکدام چند دکمه «Try it Yourself» وجود دارد. روی آن ها کلیک کن و کد را کم کم دستکاری کن تا رفتار اپلیکیشن را بهتر بفهمی.

مثال ها برای Scope، فیلترها و HTTP

در بخش Scope مثال هایی داری که نشان می دهند داده ها چگونه بین HTML و کنترلر هماهنگ می مانند. Scope یعنی محدوده ای که داده ها داخل آن معتبر هستند؛ شبیه حیاط یک مدرسه برای یک کلاس خاص.

بخش Filters مثال هایی برای فیلترها دارد. فیلترها متن را uppercase یا lowercase می کنند، پول را به شکل currency نشان می دهند یا لیست ها را مرتب می کنند.

در بخش XMLHttpRequest و SQL چند مثال برای خواندن داده از JSON و دیتابیس MySQL و SQL Server وجود دارد. این مثال ها برای زمانی مفیدند که می خواهی AngularJS را به سرور وصل کنی.

مثال ها برای جدول ها، DOM و رویدادها

بخش Tables مثال هایی دارد که نشان می دهد چطور جدول ها را با AngularJS نمایش دهی. می توانی مرتب سازی، استایل دهی و استفاده از index یا even/odd را ببینی.

بخش HTML DOM روی رفتارهای ng-show، ng-hide و ng-disabled تمرکز دارد. DOM یعنی ساختار درختی عناصر صفحه. این مثال ها شبیه خاموش و روشن کردن چراغ ها در یک بازی هستند.

در بخش Events هم مثال هایی برای ng-click و رویدادهای دیگر هست. رویداد (Event) یعنی اتفاقی مثل کلیک یا تغییر ورودی که باعث اجرای کد می شود.

مثال ها برای فرم ها، API و W3.CSS

در بخش Forms مثال هایی برای فرم ها و اعتبارسنجی (Validation) می بینی. اعتبارسنجی یعنی بررسی کنیم ورودی کاربر درست است یا نه؛ مثلا ایمیل شکل درست دارد یا خیر.

بخش AngularJS API چند مثال کوچک برای توابع آماده AngularJS دارد. مثل angular.lowercase یا angular.isNumber. این ها کمک می کنند نوع داده را سریع بررسی کنی.

در بخش W3.CSS هم مثالی هست که AngularJS را با استایل های W3.CSS ترکیب می کند. این بخش نشان می دهد چطور منطق AngularJS و ظاهر زیبا کنار هم قرار می گیرند.

مثال ها برای include، انیمیشن و اپلیکیشن ها

در بخش Includes می بینی چطور تکه های HTML را از فایل های جداگانه بارگذاری کنی. این کار شبیه این است که بخش های مختلف یک جزوه را از چند دفتر جدا جمع کنی.

بخش Animations مثال هایی برای انیمیشن ها دارد. این مثال ها یا از کتابخانه انیمیشن AngularJS استفاده می کنند یا از CSS3 Transitions و Animations کمک می گیرند.

در انتها، بخش Applications دو مثال کاربردی دارد: یادداشت ها (Note App) و لیست کارها (ToDo App). می توانی آن ها را باز کنی و ببینی چطور از تمام مفاهیم قبلی کنار هم استفاده شده است. برای مرور این دو نمونه، صفحه اپلیکیشن AngularJS هم کمک خوبی است.

جمع بندی سریع مثال ها

• صفحه مثال ها پر از «مثال های AngularJS» آماده است.
• تقریبا برای هر مبحث، یک دکمه «Try it Yourself» وجود دارد.
• اول با مثال های Basics و Expressions شروع کن.
• بعد سراغ جدول ها، فرم ها و فیلترها برو.
• در پایان مثال های اپلیکیشن، همه چیز را کنار هم نشان می دهند.