《Angular与primeNG结合》

前言:

   随着组件库的发展,前端的开发速度也提升许多,在最佳实践中,前端框架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.

        《Angular与primeNG结合》_第1张图片

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: []
  
})


html文件中编写:





component.ts文件:

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组件库的资源。

结语:

       其实没有难,不信你试试。

你可能感兴趣的:(ITOO前端研究,前端工程化)