نصب انگولار متریال در انگولار 7 – آموزش انگولار متریال

چهارشنبه ۷ فروردین ۱۳۹۸
بازدید ۲,۲۰۱ نفر
یعثوب سیفی زاده
(24 امتیاز از 5 رای)
Loading...

تصویر angular-material-7-environment-setup_6287 نصب انگولار متریال در انگولار 7 - آموزش انگولار متریال

نصب انگولار متریال در انگولار 7

در این بخش نحوه آماده سازی یک محیط توسعه برای کار با فریم ورک انگولار و Angular Material را آموزش خواهیم داد. توجه داشته باشید که ما محیط انگولار 7 را آماده می کنیم. برای نصب انگولار 7 به موارد زیر نیاز داریم.

Nodejs
Npm
Angular CLI
IDE (یا یک ویرایشگر متن ساده مثل Notepad)

توجه! نسخه نود جی اس شما باید بیشتر از 8.11 و همچنین نسخه npm هم باید بیشتر از 5.6 باشد.

نصب Nodejs

برای بررسی اینکه آیا Nodejs قبلا بر روی سیستم شما نصب شده است یا خیر، دستور node –v را در خط فرمان وارد کنید. اگر نصب شده باشد، نسخه آن و در غیر این صورت پیامی مبنی بر شناسایی نشدن دستور وارد شده به شما نمایش داده می شود.

C:\>node -v
v8.11.3

1 2	C:\>node -v v8.11.3

اگر Nodejs بر روی سیستم شما نصب نشده باشد، می توانید آن را از سایت Nodejs دانلود کرده و نصب کنید.

بعد از نصب شدن نود جی اس، npm نیز همراه با آن نصب خواهد شد. مانند نود جی اس برای بررسی نصب بودن npm می توانید از دستور npm –v استفاده کنید:

C:\>npm -v
5.6.0

1 2	C:\>npm -v 5.6.0

نصب انگولار با استفاده از Angular CLI بسیار راحت است. در سایت انگولار نحوه نصب آن گفته شده است. دستور npm install -g @angular/cli را در خط فرمان وارد کنید تا انگولار بر روی سیستم شما نصب شود.

حال انگولار بر روی سیسم شما نصب شده است و می توانید با استفاده از یک ویرایشگر متن مانند Atom و Visual Studio Code کد های خود را بنویسید.

نصب Angular Material

دستور زیر برای نصب شدن ماژول ها و کامپوننت های مربوط به Angular Material اجرا کنید.

npm install --save @angular/material @angular/cdk @angular/animations

1	npm install --save @angular/material @angular/cdk @angular/animations

حال باید BrowserAnimationsModule را به فایل app.module.ts اضافه کنید:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
imports: [
    ...
   FormsModule,
   ReactiveFormsModule,
   BrowserAnimationsModule
],

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [

...

FormsModule,

ReactiveFormsModule,

BrowserAnimationsModule

سپس فایل CSS مربوط به طراحی متریال را در فایل styles.css اضافه کنید:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

1	@import "~@angular/material/prebuilt-themes/indigo-pink.css";

فایل src/main.ts را باز کرده و دستور زیر را به آن اضافه کنید:

import 'hammerjs';

1	import 'hammerjs';

و در آخر هم کد زیر را به index.html اضافه کنید:

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">

1	<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">

جهت استفاده از انگولار متریال می توانید به شکل زیر عمل کنید:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }