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

erfan molaei
3 سال پیش
آموزش متریال ها در انگولار 4

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

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

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

 

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

 

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

 

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

 

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

{
   "name": "angularstart",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
   },
   
   "private": true,
   
   "dependencies": {
      "@angular/animations": "^4.0.0",
      "@angular/cdk": "^2.0.0-beta.8",
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.8",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
   },
   
   "devDependencies": {
      "@angular/cli": "1.2.0",
      "@angular/compiler-cli": "^4.0.0",
      "@angular/language-service": "^4.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.0.1",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.1",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      
      "protractor": "~5.1.2",
      "ts-node": "~3.0.4",
      "tslint": "~5.3.2",
      "typescript": "~2.3.3"
   }
}

 

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MdButtonModule,
      MdMenuModule,
      FormsModule,
      MdSidenavModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

 

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

import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';

 

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

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MdButtonModule,
   MdMenuModule,
   FormsModule,
   MdSidenavModule
]

 

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 اضافه کنیم.

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
   <button md-menu-item>
      File
   </button>
   <button md-menu-item>
      Save As
   </button>
</md-menu>

<md-sidenav-container class="example-container">
   <md-sidenav #sidenav class="example-sidenav">
      Angular 4
   </md-sidenav>
      
   <div class="example-sidenav-content">
      <button type="button" md-button  (click)="sidenav.open()">
         Open sidenav
      </button>
   </div>
</md-sidenav-container>

 

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

 

منو

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

 

SideNav

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

Open Sidenav Menu

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

Open Sidenav Side Bar

با کلیک روی منو ، دو مورد File و Save As را مانند شکل زیر دریافت خواهید کرد –

Click Open Sidenav Shows Item

اجازه دهید اکنون با استفاده از متریال، تاریخ گیر را اضافه کنیم. برای افزودن 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 { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      MdDatepickerModule,
      MdInputModule,
      MdNativeDateModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

 

در اینجا ما ماژول هایی مانند MdDatepickerModule، MdInputModule و MdNativeDateModule را وارد کرده ایم.

اکنون، 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 مطابق شکل زیر است –

<md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
   <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>

<md-datepicker #picker></md-datepicker>

 

نحوه نمایش datepicker در مرورگر به این صورت است –

Datepicker Is Displayed

 

منبع.

 

 

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

  1. آموزش انگولار ۴
  2. بررسی اجمالی انگولار ۴
  3. آموزش تنظیمات محیط انگولار ۴
  4. آموزش راه اندازی پروژه در انگولار ۴
  5. آموزش کامپوننت ها در انگولار ۴
  6. آموزش ماژول در انگولار ۴
  7. آموزش اتصال داده ها در انگولار ۴
  8. آموزش اتصال رویداد در انگولار ۴
  9. آموزش الگوها در انگولار ۴
  10. آموزش دستورالعمل ها در انگولار ۴
  11. آموزش پایپ ها در انگولار ۴
  12. آموزش مسیریابی در انگولار ۴
  13. آموزش سرویس ها در انگولار ۴
  14. آموزش سرویس Http در انگولار ۴
  15.  آموزش فرم ها در انگولار ۴
  16. آموزش انیمیشن ها در انگولار ۴
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه