第一：搭建一個新的Angular 2項目

1、新創建一個Angular CLI項目(PC安裝好node,npm Angular CLI ,通過百度查找安裝方法)

? 使用webstorm創建新的angular CLI項目，依次點擊 New -->project---> 選中Angular CLI

?

其中Location是項目將要保存的問題，Node interpreter是node.js安裝的位置，Angular CLI:是angular CLI安裝的位置，我安裝在全局global路徑下。一般第一項需要指定路徑之外，其余不需要改變。然后點擊create就可以。

2、生成的文件如下：

?

angular-cli.json ：angular-cli的配置文件，

測試配置文件：karma.conf.js，

typescript的lin：t配置文件，

端到端的測試配置文件：protractor.conf.js，

導入es6模塊的配置文件：polyfills.ts，

angular工程的main.ts引導啟動文件，

全局樣式style.css，

typescript配置文件：ts.config.json;

typescript的聲明文件：typings.d.ts,

angular組建 app.components相關的css，html，ts。

3、當需要創建新的組件的時候可直接在點擊一的app文件夾，

?

直接可新建一個組件，并且會自動配置好CSS，html 和ｔｓ文件，同時在app.modul.ts文件中會自動導入（如果要刪除，需要手動刪除該文件中導入的包）.

第二： 開始搭建使用prime NG環境

4、至此已經新建完成一個完整的angular2項目，下面開始搭建如何使用primeNG

cd 到項目所在目錄，

使用以下命令依次安裝：

npm install primeng --save

npm install @angular/animations --save

npm install font-awesome@4.7.0 --save

安裝過程中可能會出現錯，根據提示信息進行修改。一般都能解決

5、修改：angular-cli.json文件中的“styles”: 如下：

"styles": [

"styles.css",

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

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

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

],

如圖：

?

6、在app.module.ts中添加以下模塊（如果有其他需要，還可以添加）

import {FormsModule} from "@angular/forms";

import {HttpModule} from "@angular/http";

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

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,

BrowserAnimationsModule,

InputTextModule,

ButtonModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

注意：不要重復添加，上下要一致

我在使用過程中添加了其他組件

7、在app.component.ts中添加

import {Component} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor( ) { }

name: string;

message: string;

onClick() {

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

}

}

?

8、在app.component.html中添加

?

第三：進行測試

在以上都完成之后，npm install? ，然后，npm start? 本地環境通過localhost:4200，一般是4200 ，在瀏覽器進行查看就可以

當需要其他primeNG組件（引用了其組件，但是沒有導入相應的包，會報錯），找到相應組件，然后導入依賴包就可以

作者：騎行的技術渣
鏈接：https://www.jianshu.com/p/bb7e18563ccb
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

總結

以上是生活随笔為你收集整理的primeNG组件库在Angular2上的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。