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”里面添加对应的主题库:
1 2 3 4 5 6 |
|
②app.module.ts
追加新加的模块并导入,如下所示:
|
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中添加依赖包,如下所示:
|
问题二:对于在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中访问了。
Angular + PrimeNG 安装配置相关推荐
- 安装angular cli_Angular 9适用于初学者—如何使用Angular CLI安装第一个应用程序
安装angular cli Angular is one of the most popular JavaScript frameworks created and developed by Goog ...
- 手把手建项目 PrimeNG安装使用
手把手建项目 PrimeNG安装使用 之前写过一片关于PrimeNG的安装使用,当时也是接触不久,最近重新使用的时候发现还是有一些东西没有说清楚. 当时用的是Angular2现在已经是Angular4 ...
- 【前端】Angular8入门教程笔记+Angular material安装与使用
一. Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Goo ...
- mysql64如何配置_win7 64位下如何安装配置mysql-winx64(安装记录)
win7 64位下如何安装配置mysql winx64 1.mysql下载 官方网站下载地址:http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5. ...
- ActiveMQ—安装配置及使用
安装配置及使用 转自:http://blog.csdn.net/qq_21033663/article/details/52461543 (一)ActiveMQ介绍 ActiveMQ 是Apache出 ...
- Linux下Tomcat的安装配置
Linux下Tomcat的安装配置 一.下载安装对应的jdk,并配置Java环境. 官网下载地址: http://www.oracle.com/technetwork/java/javase/down ...
- wamp的mysql单独使用_Windows 7+8.1+10 单独安装配置 PHP+Apache+MySQL(不使用 WAMP)
Windows 8.1 单独安装配置 PHP+Apache+MySQL(不使用 WAMP) 本文同样适用于Windows7和10 0x00 PHP [下载]http://www.doczj.com/d ...
- mysql数据库解压安装教程_MySQL数据库之windows 10下解压版MySql安装配置方法教程...
本文主要向大家介绍了MySQL数据库之windows 10下解压版MySql安装配置方法教程 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. windows 10 下安装解压版的 ...
- python3.6.2怎样安装,python 3.6.2 安装配置方法图文教程
python 3.6.2 安装配置方法图文教程 Windows下Python(pip)环境搭建(3.6)图解,供大家参考,具体内容如下 1.下载最新的Python安装:3.6.2 2.安装时不要选择默 ...
最新文章
- matlab中prismastic,魅力值是什么意思
- jQuery获取元素内容
- jquery unbind 异步_JQuery中的bind()和unbind()的理解
- [html] html标签的属性值是否可以省略引号?为什么?
- 为拯救爸妈朋友圈,达摩院造了“谣言粉碎机” 1
- 发布一个适合服务端C++程序的高效日志库
- 技巧实例:如何在.NET中访问MySQL数据库
- 高手如何应对复杂系统架构的演进
- BPM配置故事之案例2-文本默认值
- TCP和UDP报文头格式(转)
- cookie 存放位置
- Linux驱动 | DS18B20驱动编程
- Android安卓身份证识别SDK
- SpringCloud整合Sa-Token登录认证+Gateway网关拦截
- 颠覆想象,一盏夜灯的变革
- 通信专业考研就业专栏
- stripped 和 not stripped
- 4.Matplotlib多子图,文字和注释以及自定义坐标轴
- Codeforces 13C
- 基于unity制作的AR视频播放