ng bind html br,使用PrimeNG开发angular web项目
前言
这里列出了目前angular4的ui框架,最终选择PrimeNG作为web端ui框架.因为PrimeNG组件相对丰富,开发起来更省心
万事开头难,在网上找到的PrimeNG起步使用教程都比较粗糙.现在详细记录下.
环境配置
安装angular cli
cnpm install -g @angular/cli
使用angular cli创建项目
ng new primeng-demo..........其中primeng-demo是我的项目名
cd primeng-demo................进入刚创建项目的目录
cnpm i.............................安装依赖,也就是下载node_modules
运行项目
使用ng serve启动项目..............默认启动地址为http://localhost:4200
在浏览器访问http://localhost:4200,输出如下说明项目已经创建启动ok
配置PrimeNG
分别执行下面三条命令安装PrimeNG依赖
cnpm i primeng --save
cnpm i font-awesome --save
cnpm i @angular/animations --save
PrimeNG使用font-awesome作为字体图标.
Angular4把animations作为单独的模块了,所以这里也需要单独安装
在src/styles.css文件中配置css文件
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeng/resources/themes/omega/theme.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";
PrimeNG提供了许多主题,建议用默认的omega主题
最后.在src/app/app.module.ts文件中导入BrowserAnimationsModule模块
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
使用PrimeNG
组件的使用官网已经很全了.我这里简单演示一下
在src/app/app.module.ts文件中导入button模块
import {ButtonModule} from 'primeng/primeng';
在src/app/app.component.html文件中写上最简单的button html
使用ng serve运行项目.如果已经运行,页面会自动刷新.如下图,可以看到button已经显示ok
导入DialogModule
写上最简单的dialog HTML,给按钮添加showDialog()单击事件
效果图
现在可以试试其他主题是什么样子了
PrimeNG的起步教程已经说完了,下来就由各位自由发挥了
ng bind html br,使用PrimeNG开发angular web项目相关推荐
- SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
转载自 SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载 基本准备工作 1.安装JDK1.6以上版本,安装与配置 2.下载mybatis-3.2.0版:htt ...
- eclipse与DW联合开发java web项目
eclipse与DW联合开发java web项目 引言:在开发java web项目时,我们会先用eclipse搭建框架(ssm.ssh-)eclipse主要用在java的开发,但在eclipse上制作 ...
- 使用eclipse开发Java Web项目(最最最基础)
本篇首先给出Tomcat 8.0的安装及验证过程,然后在eclipse中配置已安装成功的Tomcat服务器,最后新建一个Java web工程,并绑定已部署的Tomcat服务器,在工程中新建并运行JSP ...
- 如何让自己开发的web项目实现外网访问
如何让自己开发的web项目实现外网访问 这是小编第一次写博客,记录一下这些天一直在做的一件事情,如何把自己开发的springboot项目部署到华为云的远程服务器上,实现外网访问,如果对于此问题说的有什 ...
- IDEA从零到精通(37)之导入IDEA开发的web项目
文章目录 作者简介 引言 导航 概述 一.导入项目 二.修改数据库配置 三.启动tomcat 小结 导航 热门专栏推荐 作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通J ...
- 【持久化框架】SpringMVC+Spring4+Mybatis3 集成,开发简单Web项目+源码下载
通过spring与Mybatis集成,开发一个简单用户增删改查的Web项目. 基本准备工作 1.安装JDK1.6以上版本,安装与配置 2.下载mybatis-3.2.0版:https://repo1. ...
- 如何用Jsp开发一个web项目
我最近用jsp代码来实现web项目,jsp虽然在应用中不是特别流行,但是用起来还是比较方便的,我总结了两种jsp通过网页上修改数据实现在数据库中的数据的增删改. 首先简单的介绍一下jsp:JSP(全称 ...
- 在Angular web项目中调用本地扫描仪扫描文档
简介 近年来,越来越多的Web程序开始基于单页应用模型(Single-Page Applications,SPA)来构建.作为其中的佼佼者,Angular得到了广泛的应用.Web程序中不少是文档管理系 ...
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载【转】
为什么80%的码农都做不了架构师?>>> 第一步:创建数据库表 在Navicat下执行如下sql命令创建数据库mybatis和表t_user CREATE DATABASE I ...
- 【持久化框架】SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载
2019独角兽企业重金招聘Python工程师标准>>> 第一步:创建数据库表 在Navicat下执行如下sql命令创建数据库mybatis和表t_user [sql] view pl ...
最新文章
- 微信企业号:shell定时发送图片 到 指定人
- 全球及中国黑胡椒粉行业竞争规划与未来发展趋势预测报告2022-2028年版
- UNIX再学习 -- 进程间通信之管道
- jsp springmvc 视图解析器_SpringMVC学习笔记
- vue 页面切换动画_Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理...
- java创建的zip没写入权限,java中的zip创建错误
- QT接收或发送二进制数据(或数据内包含0)
- 详解API Gateway流控实现,揭开ROMA平台高性能秒级流控的技术细节
- LoadRunner的Oracle计数器
- it招聘上说熟悉linux系统,运维入门:细说Linux,做IT必看
- linux下的web安全机制,linux http服务器web网页的不同安全机制
- 分享不可不知的CAD经典技巧
- RecyclerView条目复用导致混乱的解决方案之一
- 三无电子烟与即将到来的监管时代
- 互联网岳麓峰会从长沙走向世界
- 织梦CMS建站系统被曝漏洞 几十万网站沦为木马网站
- 单片机低功耗配置及注意事项
- WinCC控件之ShockwaveFlash
- java实现线程安全的三种方式
- 第四章-1 Hashcat