前言

• 这里列出了目前angular4的ui框架,最终选择PrimeNG作为web端ui框架.因为PrimeNG组件相对丰富,开发起来更省心
• 万事开头难,在网上找到的PrimeNG起步使用教程都比较粗糙.现在详细记录下.

环境配置

• 安装nodejs
• 配置cnpm
• 安装angular cli
  cnpm install -g @angular/cli
  

使用angular cli创建项目

ng new primeng-demo..........其中primeng-demo是我的项目名
cd primeng-demo................进入刚创建项目的目录
cnpm i.............................安装依赖,也就是下载node_modules

运行项目

• 使用ng serve启动项目..............默认启动地址为http://localhost:4200
  

  

• 在浏览器访问http://localhost:4200,输出如下说明项目已经创建启动ok
  

  

配置PrimeNG

• 分别执行下面三条命令安装PrimeNG依赖

cnpm i primeng --save
cnpm i font-awesome --save
cnpm i @angular/animations --save

PrimeNG使用font-awesome作为字体图标.
Angular4把animations作为单独的模块了,所以这里也需要单独安装

• 在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提供了许多主题,建议用默认的omega主题

• 最后.在src/app/app.module.ts文件中导入BrowserAnimationsModule模块
  import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

使用PrimeNG

• 组件的使用官网已经很全了.我这里简单演示一下
• 以button为例

在src/app/app.module.ts文件中导入button模块
import {ButtonModule} from 'primeng/primeng';

在src/app/app.component.html文件中写上最简单的button html
<button pButton type="button" label="Click"></button>

使用ng serve运行项目.如果已经运行,页面会自动刷新.如下图,可以看到button已经显示ok

• 以dialog为例

导入DialogModule

写上最简单的dialog HTML,给按钮添加showDialog()单击事件

<p-dialog header="Title" [(visible)]="display">
  <div>6666666666666666666666666</div>
  <div>6666666666666666666666666</div>
</p-dialog>

效果图

• 现在可以试试其他主题是什么样子了
• PrimeNG的起步教程已经说完了,下来就由各位自由发挥了