PrimeNG01 angular集成PrimeNG

匿名 (未验证) 提交于 2019-12-03 00:39:02

 

1 开发环境

  本博文基于angular5

  

 

2 步骤

  2.1 创建angular5项目

    详情参见百度

  2.2 下载PrimeNG依赖

npm install primeng --save npm install primeicons --save

  2.3 在Angular项目中引入PrimeNG样式

    修改 angular-cli.json配置文件

      

{   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",   "project": {     "name": "hello-angular"   },   "apps": [     {       "root": "src",       "outDir": "dist",       "assets": [         "assets",         "favicon.ico"       ],       "index": "index.html",       "main": "main.ts",       "polyfills": "polyfills.ts",       "test": "test.ts",       "tsconfig": "tsconfig.app.json",       "testTsconfig": "tsconfig.spec.json",       "prefix": "",       "styles": [         "styles.scss",         "../node_modules/primeicons/primeicons.css",         "../node_modules/primeng/resources/themes/omega/theme.css",         "../node_modules/primeng/resources/primeng.min.css"       ],       "scripts": [],       "environmentSource": "environments/environment.ts",       "environments": {         "dev": "environments/environment.ts",         "prod": "environments/environment.prod.ts"       }     }   ],   "e2e": {     "protractor": {       "config": "./protractor.conf.js"     }   },   "lint": [     {       "project": "src/tsconfig.app.json",       "exclude": "**/node_modules/**"     },     {       "project": "src/tsconfig.spec.json",       "exclude": "**/node_modules/**"     },     {       "project": "e2e/tsconfig.e2e.json",       "exclude": "**/node_modules/**"     }   ],   "test": {     "karma": {       "config": "./karma.conf.js"     }   },   "defaults": {     "styleExt": "scss",     "component": {}   } }
View Code

  2.4 引入动效依赖

npm install @angular/animations --save

    引入依赖后,在跟模块引入相关模块

import {BrowserModule} from @angular/platform-browser; import {BrowserAnimationsModule} from @angular/platform-browser/animations;
{   "name": "hello-angular",   "version": "0.0.0",   "license": "MIT",   "scripts": {     "ng": "ng",     "start": "ng serve",     "build": "ng build --prod",     "test": "ng test",     "lint": "ng lint",     "e2e": "ng e2e"   },   "private": true,   "dependencies": {     "@angular/animations": "^5.2.11",     "@angular/common": "^5.2.0",     "@angular/compiler": "^5.2.0",     "@angular/core": "^5.2.0",     "@angular/forms": "^5.2.0",     "@angular/http": "^5.2.0",     "@angular/platform-browser": "^5.2.0",     "@angular/platform-browser-dynamic": "^5.2.0",     "@angular/router": "^5.2.0",     "bootstrap": "^3.3.7",     "core-js": "^2.4.1",     "primeicons": "^1.0.0-beta.9",     "primeng": "^6.0.0",     "rxjs": "^5.5.6",     "zone.js": "^0.8.19"   },   "devDependencies": {     "@angular/cli": "~1.7.0",     "@angular/compiler-cli": "^5.2.0",     "@angular/language-service": "^5.2.0",     "@types/jasmine": "~2.8.3",     "@types/jasminewd2": "~2.0.2",     "@types/node": "~6.0.60",     "codelyzer": "^4.0.1",     "jasmine-core": "~2.8.0",     "jasmine-spec-reporter": "~4.2.1",     "karma": "~2.0.0",     "karma-chrome-launcher": "~2.2.0",     "karma-coverage-istanbul-reporter": "^1.2.1",     "karma-jasmine": "~1.1.0",     "karma-jasmine-html-reporter": "^0.2.2",     "protractor": "~5.1.2",     "ts-node": "~4.1.0",     "tslint": "~5.9.1",     "typescript": "~2.5.3"   } }
View Code

  2.5 参考文档

 

3 How To Use PrimeNG

  

    

 

  

原文:https://www.cnblogs.com/NeverCtrl-C/p/9254612.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!