在这篇文章中，我们将学习如何用primeng设置一个Angular项目，并使用Angular cli。
重要的是，本教程适用于所有最新的Angular版本，包括10、11、12。
使用primeng组件学习Angular。
Angular Cli是一个从头开始生成angular项目的工具。它是Angular项目的文件夹结构的代码生成器。使用cli的好处，可以节省大量的时间，而不是从头开始写代码，而且容易出错，因为它生成的是配置所需的文件
首先，你需要用这个命令在全球范围内安装angular cli。
npm install @angular/cli -g
一旦安装了cli，请发出以下命令来检查版本
B:\angularclidemo>ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.0.1
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1200.1 (cli-only)
@angular-devkit/core 12.0.1 (cli-only)
@angular-devkit/schematics 12.0.1 (cli-only)
@schematics/angular 12.0.1 (cli-only)
typescript 4.2.0
这表明angular cli已经安装了最新的angular 6版本。下一步是用CLI工具创建一个Angular项目。
ng new myapp
这将创建一个带有所有初始配置、主要模块和初始组件的Angular原型。接下来，进入你的项目目录，使用以下命令安装依赖项
B:\angularclidemo\myapp\ npm install
一旦你安装了依赖项，使用下面的CLI命令启动Web服务器
ng serve
这就启动了监听4200的服务器。访问这个http://localhost:4200/，你会得到如下截图的页面 
用Angular 6安装primeng
下一步是安装primeng的依赖项，安装primeng时需要Font awesome。进入项目目录，运行以下命令
npm install primeng --save
npm install font-awesome --save
这将在项目中安装所需的依赖项。这个命令创建/修改了以下内容--在package.json的依赖项下添加了这个条目
"dependencies": {
//...
"font-awesome": "^4.7.0",
"primeng": "^6.0.2",
},
它创建并安装了以下文件夹中的依赖项
myapp\node_modules\font-awesome
myapp\node_modules\primeng
全局样式配置
你需要使用配置文件在angular应用程序中配置primeng样式。Angular 6以下的版本，配置文件是angular-cli.json 对于Angular 6及以上的版本，配置文件是angular.json文件 Angular-cli.json是一个项目级的配置文件，包含全局配置的变化。在angular.json文件的样式部分下添加这个东西
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/primeng/resources/primeng.css",
我们添加了Omega的主题，有很多主题（Redmond, rocket, darkness ...）可以在primeng安装时使用。请看完整的主题列表
在修改angular.json文件后需要重新启动以反映变化 在Angular代码中使用组件之前，需要启用动画模块
添加BrowserAnimationsModule
为了获得更好的体验，很多组件都需要加入angular动画模块。动画模块位于 @angular/animations模块 中。你需要安装这个依赖项。
npm install @angular/animations --save
一旦安装了动画模块，在primeng.module.ts中导入BrowserAnimationModule，如下所示。 primeng.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; // added this
@NgModule({
declarations: [
PrimengComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule // added this
],
providers: [],
bootstrap: [PrimengComponent]
})
export class PrimengAppModule { }
如果你正在设计输入表单，你需要做的是声明--从'@angular/forms'中导入{ FormsModule }，如BrowserAnimationModule接下来是添加primeng模块。我们要添加一个显示Hello World信息的简单按钮。我们需要在我们的应用程序中添加ButtonModule，如下所示
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PrimengComponent} from './primeng.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/components/button/button';// added this
@NgModule({
declarations: [
PrimengComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
ButtonModule// added this
],
providers: [],
bootstrap: [PrimengComponent]
})
export class PrimengAppModule { }
并在primeng.component.html文件中添加按钮
<div style="text-align:center">
<h1>
Primeng Angular 6 Demo
</h1>
</div>
<h4>
<p-button label="p-button" (onClick)="clickEvent()"></p-button>
<button pButton type="button" label="Normal Button" (click)="clickEvent()" ></button>
</h4>
Clicks Count: {{count}}
在primeng.component.ts中添加点击事件方法。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './primeng.component.html',
styleUrls: ['./primeng.component.css']
})
export class PrimengComponent {
count: number = 0;
clickEvent() {
this.count++;
}
}
第一个按钮p-button是primeng按钮，它有onClick事件处理程序，周围有大括号。第二个按钮是一个普通的HTML按钮，它添加了pButton作为属性，使其成为primeng按钮，这里的事件是普通的点击事件，周围有大括号。请注意，每个primeng组件总是以p为前缀。这个应用程序的输出显示如下
Primeng Aot生产支持
ng serve这个命令创建了开发包，在启动Web服务器的同时进行构建和部署。ng build -prod - 这个为生产代码构建包。ng build -prod -aot在启用aot标志的情况下，为生产代码构建捆绑包。aot是一个提前编译器，用于将HTML和typescript转换为高效的javascript，primeng也添加了对aot生产部署的支持。
