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 ajax 登录验证实现代码
Sep 23 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery侧边栏实现代码
May 06 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
加速vue组件渲染之性能优化
Apr 09 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php快递单号查询接口使用示例
2014/05/05 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
php生成HTML文件的类方法
2019/10/11 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
常用python编程模板汇总
2016/02/12 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python如何实现word批量转HTML
2020/09/30 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
python 制作简单的音乐播放器
2020/11/25 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
JAVA程序员面试题
2012/10/03 面试题
《商鞅南门立木》教学反思
2014/02/16 职场文书
活动总结怎么写啊
2014/05/07 职场文书
销售员岗位职责
2014/06/09 职场文书
银行业务授权委托书
2014/10/10 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
闪闪红星观后感
2015/06/08 职场文书
2019个人工作总结
2019/06/21 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android