AngularJS

AngularJS — سرفصل دوره (Syllabus)

آخرین بروزرسانی: 1404/08/23
قبلی: مثال ها (Examples) بعدی: برنامه مطالعه (Study Plan)

سرفصل دوره (Syllabus)

توی این صفحه سرفصل دوره (Syllabus) و برنامه آموزشی AngularJS را می بینی. همه چیز مرحله به مرحله است تا از مقدمات تا ساخت اپلیکیشن بروی.

معرفی برنامه آموزشی AngularJS

این برنامه آموزشی AngularJS بر اساس آموزش W3Schools تنظیم شده است. محتوا برای مبتدی ها طراحی شده و فقط کمی HTML، CSS و JavaScript لازم دارد.

درس ها کوتاه هستند تا خسته نشوی. بنابراین هر بخش مثل یک لقمه کوچک است که راحت می توانی هضمش کنی.

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

خروجی هایی که از دوره می گیری

بعد از تمام شدن این برنامه آموزشی، چند مهارت مهم به دست می آوری. این مهارت ها مستقیم در پروژه های واقعی به درد می خورند.

  • درک می کنی AngularJS چیست و چطور کار می کند.
  • می توانی با عبارت ها (Expressions) داده را روی صفحه نمایش دهی.
  • کد را با ماژول ها (Modules) و کنترلرها مرتب و سازمان دهی می کنی.
  • با دستورات (Directives) HTML را هوشمندتر و قابل برنامه نویسی می کنی.
  • فرم ها را می سازی و ورودی کاربر را کنترل و بررسی می کنی.
  • با فیلترها (Filters) ظاهر داده را زیباتر و خواناتر می کنی.
  • با سرویس ها (Services) داده را بین بخش های مختلف صفحه به اشتراک می گذاری.
  • با HTTP به سرور وصل می شوی و اطلاعات را می خوانی.

این دوره برای چه موضوعاتی مفید است؟

اگر به ساخت سایت و اپلیکیشن وب علاقه داری، این برنامه آموزشی AngularJS حسابی مناسب تو است.

  • توسعه وب: برای ساخت وب سایت های مدرن و تعاملی.
  • فرانت اند: برای طراحی رابط کاربری (UI) شیک و پویا.
  • اپلیکیشن تک صفحه ای (SPA): برای سایت هایی که بدون رفرش صفحه کار می کنند.
  • اپلیکیشن سازمانی: برای سیستم های بزرگ اداره ها و شرکت ها.
  • وب اپ پیش رونده (PWA): برای اپ هایی که شبیه اپ موبایل رفتار می کنند.
  • توسعه موبایل محور: وقتی اول روی موبایل و بعد روی دسکتاپ فکر می کنی.
  • چندسکویی: وقتی می خواهی روی چند پلتفرم یک جا هدف گذاری کنی.

پیگیری پیشرفت در برنامه آموزشی AngularJS

در منبع اصلی، امکان ساخت حساب کاربری و پیگیری پیشرفت وجود دارد. این کار کمک می کند بدانی تا کجا آمده ای و چه بخش هایی مانده است.

معمولا چنین حساب هایی امکاناتی مثل مسیرهای یادگیری، دستاوردها و تمرین های بیشتر دارند. می توانی از این ایده ها برای ساخت سیستم پیشرفت در سایت خودت هم الهام بگیری.

مرور ماژول های اصلی دوره AngularJS

در این سرفصل، ماژول های مهم AngularJS پشت سر هم فهرست شده اند. هر ماژول روی یک موضوع مشخص تمرکز دارد.

  • مقدمات و معرفی AngularJS و مفهوم Expression.
  • ماژول ها، دستورات و مدل ها برای ساخت هسته اپلیکیشن.
  • دیتابایندینگ (Data Binding)، کنترلرها و Scope برای اتصال داده و صفحه.
  • فیلترها، سرویس ها و Http برای کار با داده و سرور.
  • جدول ها، Select، SQL و DOM برای کار با رابط و دیتا.
  • رویدادها (Events)، فرم ها و Validation برای مدیریت رفتار کاربر.
  • API، W3.CSS، Includes، انیمیشن ها، Routing و Application نهایی.

نکته: می توانی همین ترتیب را به عنوان نقشه راه یادگیری AngularJS در نظر بگیری و هر بخش را با مثال ها در صفحه مثال ها تمرین کنی.

تمرین در سندباکس؛ بخش مهم برنامه آموزشی AngularJS

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

مثال زیر یک نمونه خیلی ساده است که نام را می گیرد و همان را با Hello نمایش می دهد.

  1. کد را در ادیتور آنلاین باز کن.
  2. در input یک نام دلخواه بنویس.
  3. ببین h1 هم زمان مقدار را با Hello نشان می دهد.
<!DOCTYPE html>
<html lang="en-US">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <body>
    <div ng-app="">
      <p>
        Name :
        <input type="text" ng-model="name">
      </p>
      <h1>
        Hello {{name}}
      </h1>
    </div>
  </body>
</html>

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

اینجا ng-app باعث می شود AngularJS روی آن div فعال شود. همچنین ng-model مقدار input را به متغیر name وصل می کند و در h1 نمایش می دهد؛ مثل یک آینه زنده.

گواهی پایان دوره و مسیر برای مدرس ها

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

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

جمع بندی سریع برنامه آموزشی AngularJS

  • این صفحه نقشه کلی برنامه آموزشی AngularJS را نشان می دهد.
  • موضوعات از مقدمات تا ساخت اپلیکیشن نهایی مرتب شده اند.
  • روی مفاهیم اصلی مثل ماژول، کنترلر، فرم و Http تمرکز می کند.
  • یک مثال ساده سندباکس برای تمرین سریع معرفی شد.
  • ایده هایی برای آزمون پایانی و تدریس AngularJS هم مطرح شده است.
قبلی: مثال ها (Examples) بعدی: برنامه مطالعه (Study Plan)