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": {}
}
}

  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"
}
}

  2.5 参考文档

3 How To Use PrimeNG

  

    

  

PrimeNG01 angular集成PrimeNG的更多相关文章

  1. Angular集成UEditor

    1.Ueditor的集成主要通过把UEditor做成一个Component来实现,先上Component代码: import { AfterContentInit, Component, Input, ...

  2. angular cli + primeNG

    目录: 1.安装  angular cli 2.创建项目 3.构建路由 4.新建组件 5.组件之间的通信 6.引入primeNG 7.修改primeNG组件样式 8.问题 -------------- ...

  3. angular集成tinymce

    1.前言 我使用的是angular的7.x版本,和之前的低版本集成方式有所区别.这里记录下基本的集成步骤. 2.集成步骤 2.1安装tinymac包 npm install tinymce --sav ...

  4. Angular集成admin-lte框架

    其实上一篇里面提到的集成datatables.net就是admin-lte里面的一个子插件,不过这个子插件,他是自带types定义文件的,admin-lte这个东西在DefinitelyTyped里面 ...

  5. angular 与 layer 集成过程

    layer 的提示框和弹层确实也好用,在使用angular的前提下,使用layer遇到诸多麻烦,记录下来. 在类型是1页面层,主要问题在遮罩方面,造成无法编辑. 开始:引入layer 样式,angul ...

  6. Angular + Leaflet 实现房源数据可视化(附github源码)

    这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...

  7. AngularJS集成富文本编辑器

    最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...

  8. ABP框架 - 动态Web Api层

    文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...

  9. ABP官方文档翻译 6.7 CSRF/XSRF保护

    CSRF/XSRF保护 介绍 HTTP动词 非浏览器客户端 ASP.NET MVC 特征 集成 布局视图 配置 ASP.NET Web API 特征 集成 集成到ASP.NET MVC客户端 集成到其 ...

随机推荐

  1. 如何制作CDLinux启动盘

    用笔记本安装虚拟机并且尝试使用CDLinux系统进行无线密码破解的朋友们可能会遇到很多的问题,今天的经验就是总结了很多的失败然后整理出来的,希望能够对大家有所帮助.本次经验来和大家分享一下使用U盘制作 ...

  2. 微软原版WINDOWS10-LTSB-X64位操作系统的全新安装与优化

    原版WINDOWS10_LTSB_X64位操作系统,安装U盘的制作 1.在一台能正常运行的电脑上,下载原版WINDOWS10_LTSB_X64位操作系统镜像(ISO)文件: 2.运行UltraISO. ...

  3. ASP.NET 线程详解

    本文是博主翻译文章,估计会省略一些,但是我尽量能翻译好,各个知识点通俗易懂.译文如下: ASP.NET Thread Usage on IIS 7.5, IIS 7.0, and IIS 6.0 我简 ...

  4. 小而实用的工具插件集锦(JQGrid,zTree)

    jqgrid,JQGrid是一个在jquery基础上做的一个表格控件,看起来感觉还可以,以ajax的方式和服务器端通信 效果图: 这个小东西,多用在在工作流上面. 中文文档: http://blog. ...

  5. 【知识笔记】前端样式CSS

    一.页脚如何始终固定在页面底部显示 想要达到页脚固定在页面底部显示,也就是当页面主体高度在浏览器高度范围内时页脚靠浏览器底部,超出浏览器高度时页脚在页面主体下方,相当于在高度上的自适应. 乍看似乎很简 ...

  6. FPGA层次结构和复位策略

    FPGA设计中,层次结构设计和复位策略影响着FPGA的时序.在高速设计时,合理的层次结构设计与正确的复位策略可以优化时序,提高运行频率. 设计中,合理的层次结构是我们所追求的. 划分时,按照逻辑分区将 ...

  7. redirect uri 参数错误 怎么办

    这种情况,多数是因为请求地址不合法所致. 去公众号中添加合法的地址. 这种地址需要满足一些条件. 设置地址 满足的条件 保证可以访问到安全文件 如果访问不到的话,将无法保存 这里是文件存放位置 经过这 ...

  8. python开发socket套接字:套接字&通信循环&链接循环&模拟远程命令

    一,套接字 先从服务器端说起.服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Socket ...

  9. oracle显示数据库名和表名

    oracle查看表名 select table_name from user_tables; select table_name from dba_tables; select * from all_ ...

  10. appiumsend_keys很慢的解决方法

    desired_caps['unicodeKeyboard']='True'        desired_caps['resetKeyboard']='True' 添加这两个项,默认使用appium ...