前言：

   隨著元件庫的發展，前端的開發速度也提升許多，在最佳實踐中，前端框架Angular可以與primeNG整合，讓前端開發效率提高。預知細節如何，請聽小編分解。

正文：

        what's the primeNG

   PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.

How to use the primeNG

以圖表為例

Download it to your project

npm install primeng --save

explanation:

npm代表預設從國外網站上下載元件庫primeNG，cnpm代表從國內網站上下載，如果網速夠可以的話，可以選擇npm來進行一系列的工作

--save代表此句命令會將primeNG自動寫入package.json檔案中，package.json相當於要安裝的東西介紹，包括名稱和版本，身為前端架構師要重點關注，可以瞭解專案的整體框架和機制。

Import

在你所想要實現的元件的module.ts檔案中引入：

import {ChartModule} from 'primeng/primeng';

import {GrowlModule} from 'primeng/primeng';

@NgModule({
  declarations: [
   
  ],
  imports: [
    ChartModule,
    GrowlModule
  
  ],
  providers: []
  
})

<p-growl [value]="msgs"></p-growl>

<p-chart type="line" [data]="data" (onDataSelect)="selectData($event)"></p-chart>
 

Import:

import { Message } from "../../node_modules/[email protected]@primeng/primeng";

export class AppComponent {
  
  data: any;
  
  msgs: Message[];

  constructor() {
      this.data = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
              {
                  label: 'First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: '#4bc0c0'
              },
              {
                  label: 'Second Dataset',
                  data: [28, 48, 40, 19, 86, 27, 90],
                  fill: false,
                  borderColor: '#565656'
              }
          ]
      }
  }

  selectData(event) {
      this.msgs = [];
      this.msgs.push({severity: 'info', summary: 'Data Selected', 'detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
  }
}

完成元件庫的引用只需要四步走戰略，便可自由使用primeNG元件庫的資源。

結語：

       其實沒有難，不信你試試。