آموزش متریال ها در انگولار ۶

آموزش متریال ها در انگولار ۶

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش متریال ها در انگولار ۶ خواهیم پرداخت.

متریال ها (Materials) ماژول های داخلی زیادی را برای پروژه شما ارائه می دهد. ویژگی هایی مانند تکمیل خودکار، تاریخ انتخاب، لغزنده، منوها، شبکه ها و نوار ابزار برای استفاده با متریال در انگولار ۶ در دسترس هستند.

برای استفاده از متریال، باید بسته را وارد کنیم. انگولار ۲ همچنین دارای تمام ویژگی های فوق است اما آنها به عنوان بخشی از ماژول @angular/core در دسترس هستند. انگولار ۶ با یک ماژول جداگانه @angular/materials.. این به کاربر کمک می کند تا متریال مورد نیاز را وارد کند.

برای شروع استفاده از متریال، باید دو بسته – Material و cdk را نصب کنید. اجزای متریال برای ویژگی های پیشرفته به ماژول انیمیشن بستگی دارد، از این رو شما به بسته انیمیشن برای همان، یعنی @angular/animations نیاز دارید.

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

اجازه دهید اکنون package.json را ببینیم. @angular/material و @angular/cdk نصب شده اند.

{
  "name": "angular6-app",
  "version": "0.0.0",
  "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   "private": true, "dependencies": {
      "@angular/animations": "^6.1.0",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/material": "^6.4.7",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "core-js": "^2.5.4",
      "rxjs": "^6.0.0",
      "zone.js": "~0.8.26"
   },
   "devDependencies": {
      "@angular-devkit/build-angular": "~0.7.0",
      "@angular/cli": "~6.1.3",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "~2.7.2"
   }
}

ما پکیج هایی را که برای کار با متریال نصب شده اند برجسته کرده ایم.

اکنون ماژول ها را در ماژول والد – app.module.ts مطابق شکل زیر وارد می کنیم.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      FormsModule,
      MatSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

در فایل فوق ماژول های زیر را از @angular/materials ایمپورت کرده ایم.

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

و همانطور که در زیر نشان داده شده است در آرایه واردات استفاده می شود

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   FormsModule,
   MatSidenavModule
]

app.component.ts مطابق شکل زیر است –

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

اجازه دهید اکنون پشتیبانی material-css را در styles.css اضافه کنیم.

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

اجازه دهید اکنون مطالب را در app.component.html اضافه کنیم.

<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu = "matMenu">
   <button mat-menu-item>
      File
   </button>
   <button mat-menu-item>
      Save As
   </button>
</mat-menu>
<mat-sidenav-container class = "example-container">
   <mat-sidenav #sidenav class = "example-sidenav">
      Angular 6
   </mat-sidenav>
   <div class = "example-sidenav-content">
      <button type = "button" mat-button  (click) = "sidenav.open()">
         Open sidenav
      </button>
   </div>
</mat-sidenav-container>

در فایل فوق Menu و SideNav را اضافه کرده ایم.

منو

برای افزودن منو، <mat-menu></mat-menu> استفاده می شود. فایل و موارد Save As به دکمه زیر mat-menu اضافه می شوند. یک دکمه اصلی منو اضافه شده است. مرجع همان با استفاده از [matMenuTriggerFor]=”menu” و استفاده از منو با # در <mat-menu> به <mat-menu> داده می شود.

SideNav

برای افزودن sidenav به <mat-sidenav-container></mat-sidenav-container> نیاز داریم. <mat-sidenav></mat-sidenav> به عنوان یک کودک به ظرف اضافه می شود. Div دیگری اضافه شده است که با استفاده از (click)=”sidenav.open()” sidenav را فعال می کند. در زیر نمایش منو و sidenav در مرورگر − است

با کلیک بر روی opensidenav، نوار کناری را مانند شکل زیر نشان می دهد –

با کلیک بر روی Menu، دو مورد File و Save As را مطابق شکل زیر دریافت خواهید کرد

اجازه دهید اکنون با استفاده از مواد، یک تاریخ‌چین اضافه کنیم. برای افزودن datepicker، باید ماژول های مورد نیاز برای نمایش datepicker را وارد کنیم.

در app.module.ts، ماژول زیر را مطابق شکل زیر برای datepicker وارد کرده ایم.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

در اینجا، ما ماژول هایی مانند MatDatepickerModule، MatInputModule و MatNativeDateModule را وارد کرده ایم.

اکنون، app.component.ts مانند شکل زیر است –

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   myData: Array<any>;
   constructor() {}
}

app.component.html مطابق شکل زیر است –

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date">
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

به این صورت است که datepicker در مرورگر نمایش داده می شود.

منبع.

لیست جلسات قبل آموزش انگولار ۶

1. آموزش انگولار ۶
2. آموزش مقدمه انگولار ۶
3. آموزش راه اندازی محیط انگولار ۶
4. آموزش راه اندازی پروژه در انگولار ۶
5. آموزش کامپوننت ها در انگولار ۶
6. آموزش ماژول در انگولار ۶
7. آموزش اتصال داده در انگولار ۶
8. آموزش اتصال رویداد در انگولار ۶
9. آموزش تمپلیت ها در انگولار ۶
10. آموزش دستورالعمل ها در انگولار ۶
11. آموزش پایپ ها در انگولار ۶
12. آموزش مسیریابی در انگولار ۶
13. آموزش سرویس ها در انگولار ۶
14. آموزش سرویس Http در انگولار ۶
15. آموزش Http Client در انگولار ۶
16. آموزش فرم ها در انگولار ۶
17. آموزش انیمیشن ها در انگولار ۶