前言
- 這里列出了目前angular4的ui框架,最終選擇PrimeNG作為web端ui框架.因?yàn)镻rimeNG組件相對豐富,開發(fā)起來更省心
- 萬事開頭難,在網(wǎng)上找到的PrimeNG起步使用教程都比較粗糙.現(xiàn)在詳細(xì)記錄下.
環(huán)境配置
- 安裝nodejs
- 配置cnpm
- 安裝angular cli
cnpm install -g @angular/cli
使用angular cli創(chuàng)建項(xiàng)目
ng new primeng-demo..........其中primeng-demo是我的項(xiàng)目名
cd primeng-demo................進(jìn)入剛創(chuàng)建項(xiàng)目的目錄
cnpm i.............................安裝依賴,也就是下載node_modules
運(yùn)行項(xiàng)目
-
使用
ng serve啟動(dòng)項(xiàng)目..............默認(rèn)啟動(dòng)地址為http://localhost:4200
-
在瀏覽器訪問
http://localhost:4200,輸出如下說明項(xiàng)目已經(jīng)創(chuàng)建啟動(dòng)ok
配置PrimeNG
- 分別執(zhí)行下面三條命令安裝PrimeNG依賴
cnpm i primeng --save
cnpm i font-awesome --save
cnpm i @angular/animations --save
PrimeNG使用font-awesome作為字體圖標(biāo).
Angular4把a(bǔ)nimations作為單獨(dú)的模塊了,所以這里也需要單獨(dú)安裝
- 在
src/styles.css文件中配置css文件
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeng/resources/themes/omega/theme.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";
PrimeNG提供了許多主題,建議用默認(rèn)的omega主題
- 最后.在
src/app/app.module.ts文件中導(dǎo)入BrowserAnimationsModule模塊
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
使用PrimeNG
- 組件的使用官網(wǎng)已經(jīng)很全了.我這里簡單演示一下
- 以button為例
在
src/app/app.module.ts文件中導(dǎo)入button模塊
import {ButtonModule} from 'primeng/primeng';
在src/app/app.component.html文件中寫上最簡單的button html
<button pButton type="button" label="Click"></button>
使用ng serve運(yùn)行項(xiàng)目.如果已經(jīng)運(yùn)行,頁面會(huì)自動(dòng)刷新.如下圖,可以看到button已經(jīng)顯示ok
- 以dialog為例
導(dǎo)入DialogModule
寫上最簡單的dialog HTML,給按鈕添加showDialog()單擊事件
<p-dialog header="Title" [(visible)]="display">
<div>6666666666666666666666666</div>
<div>6666666666666666666666666</div>
</p-dialog>
效果圖
- 現(xiàn)在可以試試其他主題是什么樣子了
- PrimeNG的起步教程已經(jīng)說完了,下來就由各位自由發(fā)揮了
