Açısal Malzeme 7 - Ortam Kurulumu

Bu eğitim, Angular Framework ve Angular Material ile çalışmanıza başlamak için bir geliştirme ortamının nasıl hazırlanacağı konusunda size rehberlik edecektir. Bu bölümde, Angular 6 için gerekli Ortam Kurulumunu tartışacağız. Angular 6'yı kurmak için aşağıdakilere ihtiyacımız var -

• Nodejs
• Npm
• Açısal CLI
• Kodunuzu yazmak için IDE

Nodejs 8.11'den büyük olmalı ve npm 5.6'dan büyük olmalıdır.

Nodejs

Nodejs'nin sisteminizde kurulu olup olmadığını kontrol etmek için yazın node -vterminalde. Bu, sisteminizde şu anda yüklü olan nodej'lerin sürümünü görmenize yardımcı olacaktır.

C:\>node -v
v8.11.3

Herhangi bir şey yazdırmazsa, sisteminize nodejs yükleyin. Nodejs yüklemek için ana sayfaya gidinhttps://nodejs.org/en/download/ nodejs ve işletim sisteminize göre paketi yükleyin.

Nodejs ana sayfası aşağıdaki gibi görünecektir -

İşletim sisteminize bağlı olarak gerekli paketi kurun. Nodejs kurulduktan sonra, npm de onunla birlikte kurulacaktır. Npm'nin kurulu olup olmadığını kontrol etmek için terminale npm -v yazın. Npm'nin sürümünü görüntülemelidir.

C:\>npm -v
5.6.0

Angular 6 kurulumları, açısal CLI yardımıyla çok basittir. Ana sayfayı ziyaret edinhttps://cli.angular.io/ komutun referansını almak için açısal.

Tür npm install -g @angular/cli, sisteminize açısal cli kurmak için.

Angular CLI kurulduktan sonra, yukarıdaki kurulumu terminalinizde alacaksınız. İstediğiniz herhangi bir IDE'yi kullanabilirsiniz, yani WebStorm, Atom, Visual Studio Code, vb.

Açısal Malzemeyi Takın

Oluşturulan projede Angular Material modülünü ve ilgili bileşenlerini kurmak için aşağıdaki komutu çalıştırın.

materialApp>npm install --save @angular/material @angular/cdk @angular/animations hammerjs

+ @angular/[email protected]
+ @angular/[email protected]
+ @angular/[email protected]
+ [email protected]
added 4 packages and updated 1 package in 39.699s

App.module.ts dosyasına aşağıdaki girişi ekleyin

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [
    ...
   FormsModule,
   ReactiveFormsModule,
   BrowserAnimationsModule
],

Bir temayı almak için aşağıdaki girişi styles.css dosyasına ekleyin.

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

Malzeme simgeleri desteği almak için index.htm dosyasına aşağıdaki girişi ekleyin.

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