Angular + PrimeNG 安装配置
PrimeNG是Angular一个比较完善的控件库，下面就根据这几天的学习（踩坑）过程，来梳理一下其基本操作安装流程。
1.安装NodeJs
首先作为Angular的语言支持，要先安装nodejs，到以下网址，根据自己的操作平台来进行下载安装。https://nodejs.org/en/download/（安装过程中，除了可以根据自己的需求，修改安装目录之外，其他步骤一直next就可以了）
补充(选做)：此处也可以修改自己npm的全局安装存放目录：
1.在nodejs安装目录下（以D:\nodejs为例），新建node_cache和node_global两个文件夹；
2.cmd执行：npm config set cache "D:\nodejs\node_cache"
npm config set prefix "D:\nodejs\node_global"
3.修改系统环境变量：
新建变量名：NODE_PATH
新建内容：D:\nodejs\node_global\node_modules
追加变量名：PATH
2.查看NodeJs安装成功与否
查看nodejs是否安装成功：进入cmd，输入node -v和npm -v出现对应安装版本号即可；
3.安装Angular-cli
cmd中，输入：npm install -g @angular/cli --save-dev 进行安装，输入：ng -v查看安装成功与否；
4.新建Angular项目
前一步骤安装完成后，即可新建一个Angular工程，输入：ng new MyFirstAngular进行工程创建；
5.确认项目创建是否成功
进入新建的工程下面：cd MyFirstAngular
输入：ng serve 等待启动成功后，在浏览器输入：localhost:4200进行查看。（默认4200端口，也可以通过：ng server --port 4201，来自定义端口）
6.安装PrimeNG以及相关的依赖库
1.前面正常安装后，需要在刚创建的工程下，安装PrimeNG：npm install primeng --save-dev
2.相关依赖库的安装：①npm install @angular/animations ②npm install font-awesome
3.修改对应配置文件：
①angular.json(Angular低版本称为：.angular-cli.json)：在“style”里面添加对应的主题库：
"styles": [
"src/styles.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/font-awesome/css/font-awesome.css"
],
②app.module.ts
追加新加的模块并导入，如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
7.修改HTML模板
此时基本的库以及安装完成，下面可以对HTML模板进行一些处理来看看效果了。
修改app.component.html:
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<h3 class="first">Addons</h3>
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input type="text" pInputText placeholder="Username">
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">$</span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">www</span>
<input type="text" pInputText placeholder="Website">
</div>
</div>
</div>
<h3>Multiple Addons</h3>
<div class="ui-g">
<div class="ui-g-12">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span>
<span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span>
<input type="text" pInputText placeholder="Price">
<span class="ui-inputgroup-addon">$</span>
<span class="ui-inputgroup-addon">.00</span>
</div>
</div>
</div>
启动服务查看效果（步骤5），正常显示后，则一个基本的Angular + PrimeNG项目就搭建好了。
补充：
问题一：自己在学习的过程中，遇到过一些menu控件绑定不上数据的状况；
解决办法：最后发现，是没有导入一些包而导致的。在app.module.ts中添加依赖包，如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PrimeNGModule } from './primeng.module';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PrimeNGModule,
BrowserAnimationsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
问题二：对于在IE中无法访问，需要注意的问题点
解决步骤：1.修正/src/polifills.ts文件：
1.创建新项目时，该文件下关于IE的处理，默认是被注释了的，现在只需要将对应的IE注释解除掉。
2.注释解除过后，若直接执行ng serve来启动项目，会报没有对应js文件的错误。这时候需要导入对应的包即可。项目路径下执行一下命令,安装两个依赖包：
npm install --save classlist.js
npm install --save web-animations-js
2.上述执行成功后，修改/src/index.html文件：
在头部加上：<meta http-equiv="X-UA-Compatible" content="IE=edge">
3.ng serve启动项目，即可在IE中访问了。
