آموزش Angular 7

مباحث پایه Angular 7

آموزش Angular 7 (آنگولار ۷)

angular 7 tutorial 5471 تصویر

آموزش Angular 7

Angular پلتفرم مبتنی برای TypeScript است که به شما کمک می کند تا برنامه های مدرن و قدرتمند وب، موبایل و دسکتاپ ایجاد کنید.

پیش نیازها

قبل از شروع آموزش Angular 7 مطمئن شوید که بر روی محیط توسعه ای که از آن استفاده خواهید کرد، Node.js و npm (Node Package Manager) نصب شده باشد.

نکته! Angular به نسخه ۸٫x یا ۱۰٫x نود جی اس نیاز دارد. به منظور فهمیدن نسخه Node.js دستور node –v را در کنسول ویندوز یا ترمینال وارد کنید. همچنین برای دانلود Node.js به سایت Node.js مراجعه کنید.

نکته! Angular و برنامه های نوشته شده با آن به قابلیت ها و امکانات ارائه شده در کتابخانه های موجود در بسته های npm وابسته هستند. بنابراین برای دانلود نصب بسته های لازم نیاز ابتدا باید npm را نصب کنید. اگر Node.js را بر روی سیستم خود نصب کرده باشید، احتمالا سیستم مدیریت بسته npm نیز بر روی سیستم شما نصب شده است.

نصب Angular CLI

به منظور Angular CLI کنسول یا ترمینال را اجرا باز کرده و دستور زیر را در آن وارد کنید:

با اجرای دستور فوق Angular CLI به صورت سراسری نصب خواهد شد.

ایجاد فضای کاری (Workspace) و آماده سازی برنامه

منظور از Workspace، فولدری است که شامل فایل های مختلف مربوط به برنامه است. برای ایجاد پروژه جدید و آماده سازی برنامه از دستور زیر استفاده کنید:

 دستور ng new اطلاعاتی را در مورد ویژگی هایی که در هنگام ایجاد پروژه جدید به آن اضافه می شوند را از شما می خواهد. کلید enter را برای قبول حالت پیشفرض وارد کنید. Angular CLI بسته های و ویژگی هایی که به منظور ایجاد پروژه جدید لازم هستند را نصب خواهد کرد و این موضوع ممکن است چند دقیقه ای طول بکشد.

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

  • ایجاد یک فولدر root به عنوان فضای کاری با نامی که برای پروژه انتخاب کرده اید (مانند my-app)
  • ایجاد اسکلت اولیه پروژه در داخل فولدر root
  • ایجاد یک پروژه e2e به منظور تست پروژه
  • ایجاد فایل های پیکربندی مربوطه

پروژه اولیه شامل یک برنامه خوش آمد گویی ساده برای اجرا است.

اجرای پروژه

خود Angular 7 سروری دارد که به شما این امکان را می دهد تا برنامه های خود را به صورت local اجرا کنید. برای استفاده از این سرور مراحل زیر را دنبال کنید:

  1. به فولدر workspace بروید (my-app).
  2. با استفاده از دستور ng serve و گزینه –open سرور را اجرا کنید.

دستور ng serve سرور را اجرا کرده و فایل های پروژه را بر اساس تغییراتی که شما بر روی آن ها اعمال کرده اید، آماده اجرا می کند. سپس گزینه –open یا به طور مختصرتر -o به صورت خودکار مرورگر پیش فرض را باز می کند و به آدرس http://localhost:4200 می رود.

اگر مراحل فوق را انجام داده باشید، بعد از اجرا برنامه همچین صفحه ای را مشاهده خواهید کرد:

angular 7 tutorial 5471 1 تصویر

ویرایش اولین Angular component

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

به عنوان بخشی از برنامه اولیه، CLI اولین Angular component را به عنوان component ریشه (root) برای شما ایجاد کرده است.

  1. فایل ./src/app/app.component.ts را با ویرایشگر خود باز کنید.
  2. پراپرتی title را از “my-app”به “My First Angular App” تغییر دهید.

بعد از ذخیره تغییرات مرورگر به طور خودکار refresh خواهد شد.

  1. فایل ./src/app/app.component.css را با ویرایشگر باز کنید و style زیر را به آن اضافه کنید.

برنامه شما به شکل زیر تغییر می یابد:

angular 7 tutorial 5471 2 تصویر

کد کامل مثال

شما می توانید کد کامل پروژه ای که در این بخش ایجاده شد را از لینک زیر دانلود کنید (دانلود پروژه my-app).

توجه! اکثر بخش های این آموزش شامل کد کامل مثال ارائه شده هستند. همچنین می توانید کدهای موجود را با استفاده از http://www.stackblitz.com به صورت آنلاین اجرا کنید.

مرحله بعد

با مشاهده این بخش شما با مفاهیم اولیه برنامه های Angular 7 و Angular CLI آشنا شدید. مواردی که در ادامه این آموزش یاد خواهید گرفت:

  • بدست آوردن و نمایش لیستی از آیتم ها
  • ویرایش جزئیات آیتم انتخاب شده
  • جا به جایی بین view های مختلف
  • مفهوم ماژول ها، کامپوننت ها، سرویس ها و تزریق وابستگی (DI)

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است