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

آموزش Angular 7

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

پیش نیازها

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

نصب Angular CLI

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

npm install -g @angular/cli

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

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

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

ng new my-app

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

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

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

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

اجرای پروژه

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

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

cd my-app
ng serve --open

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

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

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

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

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

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

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

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

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

کد کامل مثال

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

مرحله بعد

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

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

نوشته آموزش Angular 7 (آنگولار ۷) اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.