Angular2使用Angular-CLI快速搭建工程(二)


Posted in Javascript onMay 21, 2017

使用iconfont

iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont;(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通)

iconfont上创建工程

具体怎么做已经超出本文范围;有兴趣的可以自己学习;

我们选择一个做实验

Angular2使用Angular-CLI快速搭建工程(二)

最终写出一个css文件,在styles.css中

Angular2使用Angular-CLI快速搭建工程(二)

安装@angular2-material/icon

npm install @angular2-material/icon

在app.module.ts中添加以下代码

Angular2使用Angular-CLI快速搭建工程(二)

在刚刚的home.component.html中添加icon

Angular2使用Angular-CLI快速搭建工程(二)

启动应用 ng serve

Angular2使用Angular-CLI快速搭建工程(二)

这,我们就看到了我们选的图标了;

编译

Angular-CLI编译的配置都帮我们写好了

开发环境输入 ng build 

生产环境:ng build --prod,这里对比下前后的差异

Angular2使用Angular-CLI快速搭建工程(二)

Angular2使用Angular-CLI快速搭建工程(二)

对比可以看到,生产环境把3M的压缩到了1M(还不够,还应该优化,我后续会继续努力),生产的文件还加了MD5,这样可以避免浏览器缓存;

我们走过的路:

如此,我们的Angular-CLI的搭建完了,我们可以具备什么能力了?

(1)创建一个可用于开发,测试,生产的工程;

(2)具备路由的能力,按需加载,代码分割;

(3)我们可以添加外部的css,js我没讲,其实原理相同;

(4)集成angular2 material;

(5)添加自己的icon font;

(6)开发环境和生产环境的编译;

上面涵盖的内容应该可以用来开发一个简单的工程了。剩下的内容就靠angular的具体内容和typescript的熟练程度了。

当然,作为生产中,上述的内容还略显不够,我们还没提到集成一些组件,比如用js写的组件怎么集成进来。测试如何进行?我后续会继续推出,请关注我!我个人更倾向于用angular2-webpack-seed来开发生产的代码(目前正在用它开发一个网站),因为它配置起来更方便,但是有时候真是精力有限,应该也会用angular-cli,它却是省时省力!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 #Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
node.js 中间件express-session使用详解
May 20 #Javascript
JS 调试中常见的报错问题解决方法
May 20 #Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 #Javascript
ztree实现权限横向显示功能
May 20 #Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 #Javascript
You might like
php准确计算复活节日期的方法
2015/04/18 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现文件上传与下载
2020/08/28 PHP
javascript 写类方式之八
2009/07/05 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python如何控制进程或者线程的个数
2020/10/16 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python 模块导入问题汇总
2021/02/01 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
个人简历自我评价八例
2013/10/31 职场文书
部队党性分析材料
2014/02/16 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
党员十八大心得体会
2014/09/12 职场文书
运动会广播稿100字
2014/09/14 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技