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

　　　　　　　　追加內容：D:\nodejs\node_global

 

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中訪問了。