primeng使用步驟

1，選擇路徑，使用cli新建項目

選擇要創建項目的文件夾路徑D:\primeNG files

地址欄打開cmd輸入ng new KW2后回車

2，確認創建成功

啟動服務器

注意：如果創建成功，用cmd啟動KW2路徑下的ng server后，在瀏覽器地址欄輸入localhost:4200即可看到

3，安裝primeng及其組件

cd到新建的目錄下D:\primeNG files\KW2依次安裝primeng及相關組件

D:\primeNG files>KW2>npm install primeng

D:\primeNG files>KW2>npm install font-awesome

D:\primeNG files>KW2>npm install @angular/animations

4，配置.angular-cli.json

打開D:\primeNG files\KW2目錄下找到.angular-cli.json，在styles中加入以下代碼：

"../node_modules/primeng/resources/primeng.min.css",

"../node_modules/primeng/resources/themes/omega/theme.css",

"../node_modules/font-awesome/css/font-awesome.min.css",

5，配置app.module根模塊

找到D:\primeNG files\KW2\src\app目錄下的app.module.ts文件並添加代碼：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { InputTextModule, ButtonModule } from 'primeng/primeng';

以及imports對應如下幾項：

BrowserAnimationsModule,

InputTextModule,

ButtonModule,

6，配置app.component.html

找到D:\primeNG files\KW2\src\app目錄下的app.component.html文件並加入代碼：

<input type="text" [(ngModel)]="name" pInputText>

<button type="button" pButton label="Click" icon="fa fa-check" (click)="onClick($event)"></button>

<div>{{message}}</div>

7，配置app.component.ts

找到D:\primeNG files\KW2\src\app目錄下的app.component.ts在export class AppComponent中加入代碼：

constructor( ) { }

name: string;

message: string;

onClick() {

  this.message = "Hello , " + this.name;

}

8，刷新ng server

關閉之前的命令行，用cmd再次啟動KW2路徑下的ng server后，在瀏覽器地址欄輸入localhost:4200即可運行加載后的樣式