Angular Highcharts - Ortam Kurulumu

Bu eğitim, Highcharts ve Angular Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız 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 yüklenecektir. 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.

Highcharts'ı yükleyin

Oluşturulan projede highchart modülünü kurmak için aşağıdaki komutu çalıştırın.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Oluşturulan projede highchart sarmalayıcı modülünü kurmak için aşağıdaki komutu çalıştırın.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

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

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],