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:

Welcome to {{title}}!

Addons

$ .00
www

Multiple Addons

$ .00

  启动服务查看效果(步骤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文件:

          在头部加上:

       3.ng serve启动项目,即可在IE中访问了。

 

转载于:https://www.cnblogs.com/zxstart1995/p/9469977.html

你可能感兴趣的:(Angular + PrimeNG 安装配置)