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

写文章注册登录
首页
下载App
×
Angular2-使用Angular CLI快速搭建工程（一）
 
yitalalww 关注
2016.12.02 14:39* 字数 2475 阅读 47025评论 78喜欢 106赞赏 6
前言：
本文适合Angular2的初学者阅读；
时下web前端发展迅猛，新框架层出不穷，大家都知道三驾马车VueJS，Angular2，React。国内VueJS非常热门，百度热点趋势以1000%的涨幅在增加。Angular2在国外非常受欢迎，在国内的粉丝还非常少，文章不多，究其原因有这么几点主要是学习曲线陡峭，上手困难，（1）angular本身概念难懂，（2）使用typescript开发，用到很多es6特性；（3）配置太多，复杂，工程架构搭建上手难度大。本文为了解决项目搭建的问题，详细的一步步演示了如何搭建angular2项目；
为什么选择Angular CLI？
在开发中，搭建一个良好的前端架构非常重要，他对后续的开发，维护，团队协作，易读性具有重要意义；
生产中搭建Angular2的前端架构一般有三种选择：
第一种是自己一点点的搭建，这种对开发者要求比较高，必须对框架具有很深入的理解和很丰富的使用经验，否则搭建起来会遇到非常多的问题；
第二种是直接使用Angular2 seed，一些国外优秀程序员在github上已经贡献了，非常感激！我本人也站在前人的基础上加上了一些自己的内容，构建了一套脚手架，初学者们可以拿来即用，后面不断的去理解其中原委。hotshots-angular2-webpack-seed；这里面用刀了懒加载，webpack code splitting，涵盖angular2的很多知识点；
第三种就是本文要讲的使用angular2提供的Angular CLI来快速搭建，他本质也是使用了webpack来编译，打包，压缩等构建的事情，适合想用webpack的特性又不想学习webpack那些复杂的配置的开发者；
利弊：使用Angular CLI可以很快，很简单的构建angular2项目，只要掌握几行命令就能构建出前端架构的最佳实践，让人惊叹！不好的一面，简单的东西就意味着不灵活，如果你想高可控的配置你的项目，还是建议选择第二种方案；在本文写的这个时间（2016-12-2），Angular CLI还处于beta阶段，还只能用来自娱自乐，还不能用在生产中；
AngularCLI主要特性
1 Angular CLI 可以快速搭建框架，创建module，service，class，directive等；
2 具有webpack的功能，代码分割（code splitting），按需加载；
3 代码打包压缩；
4 模块测试，端到端测试；
5 热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快
6 有开发环境，测试环境，生产环境的配置，不用自己操心； 
7 sass，less的预编译Angular CLI都会自动识别后缀来编译；
8 typescript的配置，Angular CLI在创建应用时都可以自己配置；
9 在创建好的工程也可以做一些个性化的配置，webpack的具体配置还不支持，未来可能会增加；
10 Angular CLI创建的工程结构是最佳实践，生产可用；
开始搭建，基础工具的安装：
你需要安装NodeJS 5.0以上版本,NPM 3.0以上版本；WebStorm 11；
安装 Angular CLI
windows： npm install -g angular-cli
macOS: sudo npm install -g angular-cli
创建Angular2工程
注：本文的工程代码https://github.com/linweiwei123/hotshots-angular2-cli-demo
ng new project_name ,project_name是你的项目名；
创建工程
上图就是创建的过程，此时在创建中，npm也在下载相关的包，耐心等待；从控制台中可以看到创建的内容；
创建结束
工程结构图如下：
创建后的工程结构
就这样，最简单的angular2工程创建好了；
工程结构熟悉一下：angular-cli.json 是angular-cli的配置文件，测试配置文件karma.conf.js，typescript的lint配置文件，端到端的测试配置文件protractor.conf.js，导入es6模块的配置文件polyfills.ts，angular工程的main.ts引导启动文件，全局样式style.css，typescript配置文件ts.config.json;typescript的声明文件typings.d.ts,以及生成了最贱的的一个angular组建 app.components相关的css，html，ts。这些配置都是angular2的生产项目中需要配置的文件，angular-cli帮我们做了这么多事情，我们只用了一个命令；
启动
cd project_name 
ng serve
启动
浏览器输入 http://localhost:4200/ 就可以看到app works！
尝试的修改一下app.component.ts中的文字，看看热部署是否马上生效？yes！it does！
创建module，component，service，class
指令表
创建一个home的module；
 ng g component home
我们看到 app下面多了一个home的component，它应有的css，html，*.spec.ts(测试代码)，ts都生成了；如果没有组件化经验的同学可能会问，为啥有css，html，ts，*.spec.ts都放在这下面啊？因为组件化可以重复使用，提高效率，庞大的工程代码中可以提高可维护性，阅读性，方便测试等等；
再试着创建一个angular的模块
ng g module about
about 模块创建
可以看出模块比component多了一个module.ts文件。
其他内容类似，读者可以自己尝试；
按需加载和代码分割
在生产中，代码会是庞大的，在单页面应用中，如果没有代码分割和按需加载，那么第一次加载的时间就会非常久，可能要非常多的时间，这是无法接受的；而且用户可能只需要访问某部分的内容，把全部的代码返回给用户，这也说不过去；所以在大的应用中，代码分割和按需加载久非常的重要；
前面我们已经提到，angular-cli使用了webpack做编译的事情，那言外之意，我们可以用使用webpack中的code splitting来分割代码，用angular的loadChildren来实现懒加载；
webpack的code splitting官网怎么使用，没用过的读者需要自行补脑；webpack code splitting；
接下来我们来实现一下，第一步：在app.module.ts中添加路由
添加root级路由
在app.component.html中添加路由的代码
app.component.html
router-outlet就是输出的地方；
我们前面创建了一个home.component和一个abou的module。按需加载就是about这个module中实现；
所以在about.module.ts中添加以下内容：
about.module.ts
认真校对，跟我的对比，是否有缺失内容了；然后我们启动应用ng serve；
代码分割
可以看出代码进行了分割，多了一个0.chunk.js。why？，因为webpack会对require.ensure的地方进行分割，我们接下来再浏览器中访问下看看他的按需加载
输入localhost：4200，我们看到默认访问／home，why？其实在代码中我们已经默认是home；我们点击about：
按需加载了
可以看到router到了about的页面，并且多了一个0.chunk.js的js。
这个就是我们刚刚代码分割出来的东西，其实就是about模块相关的内容的js，包括了css，html，js，当然，没油包含测试代码；
集成angular material2，可能会比较复杂一点了
当然，上面讲的内容还远远不够，生产中还需要UI框架啊，你可以选择bootstrap，也可以自己写，也可以使用angular material2，往往也需要混用；
自己写的css就放在styles.css文件中，或者是外部文件在styles.css中引用进来；
如果是boostrap文件在angular-cli.json中应用，方式如下：
安装angular material2 。
执行以下命令：
npm install --save@angular2-material/core@angular2-material/button@angular2-material/card@angular2-material/radio@angular2-material/checkbox@angular2-material/slider@angular2-material/tooltip
在app.module.ts中加入以下代码,这里当做全局的用
app.module.ts
接下来我们就能使用一些material的UI组件了，我们在home中使用下试试
然后我们在home.component.html 添加
home.component.html
在哪里用都可以，因为是全局的。
理论上这样操作就可以了，但是其实material还依赖一个叫hammerjs的组件我们还没install，直接编译肯定报错，我们安装下，按顺序执行下面2个命令
npm install --save hammerjs
npm install --save@types/hammerjs
在app.module.ts中 import 'hammerjs';
如此，我们就可以ng serve启动了，可以看到了material的一些组件了

使用iconfont
iconfont是阿里巴巴的icon项目，阿里巴巴使用，也公开对外使用，现在一些公司都使用了，它有CDN，访问快，用起来也很方便，这章节讲下如何使用iconfont；（当然，本质上就是引用一个icon的font文件，无论用bootstrap的还是自己做的，都是一样的，希望读者触类旁通）
由于篇幅过长，简书卡的不行，请到我的另一篇文章《Angular2-使用Angular-CLI快速搭建工程（二）》继续查看
 日记本
© 著作权归作者所有
举报文章
关注yitalalww
写了 14625 字，被 298 人关注，获得了 250 个喜欢
简书不是一个写专业博客的地方！我会做个网站出来的！大家敬请期待！
小礼物走一走，来简书关注我
赞赏支持
喜欢
 
106
   更多分享
登录 后发表评论
78条评论 只看作者
按喜欢排序按时间正序按时间倒序
 
yitalalww 作者
4楼 · 2016.12.16 18:22
点赞越多我越兴奋，我越兴奋越会学angular2
 8人赞  回复
孙文正：
 @yitalalww 期待有个打包的教程，以及ng2开发如何调用摄像头，录音等等
2016.12.24 09:23  回复
yitalalww：
 @孙文正 看到你打赏了，我会考虑做个移动端的
2016.12.24 10:32  回复
凯奇666：
 @yitalalww  期待
2017.02.13 17:37  回复
 添加新评论
 
孙文正
5楼 · 2016.12.23 23:47
好文
 1人赞  回复
yitalalww：
 @孙文正 感谢兄弟！
2016.12.24 00:05  回复
 添加新评论
 
满城飞絮点红尘
6楼 · 2016.12.27 19:51
感谢你的分享，从文中获益良多。由衷感谢
 1人赞  回复
yitalalww：
 @满城飞絮点红尘 多谢，
2016.12.27 21:58  回复
yitalalww：
 @满城飞絮点红尘 多谢打赏！
2016.12.27 22:38  回复
 添加新评论
 
tlysuger183
40楼 · 2017.10.13 17:18
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'tlyapp' successfully created.
我使用Cli创建了一个项目，在index.html中可以进行修改。
但是<app-root></app-root>这个没有加载进来呢。求大神们赐教。
 1人赞  回复
tlysuger183：
 我在40楼，好远。who can help me？
2017.10.13 17:22  回复
 添加新评论
 
DavidLin1989
2楼 · 2016.12.05 22:55
最新资讯啊 不错啊
 赞  回复
 
DavidLin1989
3楼 · 2016.12.05 23:01
请问Angular2跟1相比主要优势在哪里
 赞  回复
yitalalww：
 @DavidLin1989 你这问题问的好白痴
2016.12.05 23:07  回复
DavidLin1989：
 @yitalalww 就是不懂才问你 我是新手 刚从电子工程系转到软件学院
2016.12.05 23:09  回复
 添加新评论
 
CarsonYang咔咔
7楼 · 2017.01.02 15:51
楼主 我用 ng serve 运行后 出现You seem to not be dependending on "@angular/core". This is an error.
是为什么
 赞  回复
yitalalww：
 @d0d8ed857dc6 不要用我的工程，按照文章一步步自己弄
2017.01.02 16:02  回复
CarsonYang咔咔：
 @yitalalww 好了 可以了 谢谢
2017.01.05 13:27  回复
 添加新评论
 
十一月的流星雨
8楼 · 2017.01.05 11:18
想请教一下angular2项目如何打包，以及使用telnet连接服务器端运行ng server 启动应用后，再别处可以是用"服务器IP：4200"正常访问应用，但是关闭telnet页面后服务器ng server也断了，这该如何解决呢
 赞  回复
yitalalww：
 @十一月的流星雨 打包npm run build:prod
2017.01.05 11:46  回复
 添加新评论
 
唯守
9楼 · 2017.01.13 13:35
感谢分享，现在刚接触Angular2，并且Angular2实例基础教程不是很多
 赞  回复
yitalalww：
 @唯守 国内被vuejs吸走了
2017.01.13 20:44  回复
 添加新评论
 
握在手中的砂
10楼 · 2017.01.17 18:36
中文好像乱码啊？？？
 赞  回复
yitalalww：
 @握在手中的砂 能否具体一些？什么地方中文乱码
2017.01.17 18:40  回复
握在手中的砂：
 @yitalalww 没解决了 ，我自己的问题 并不是代码的原因
2017.01.19 15:09  回复
 添加新评论
 
ebe5266f74f9
12楼 · 2017.01.18 11:29
如何删除一个module？
 赞  回复
yitalalww：
 @ebe5266f74f9 删除module？如果你不用一个module了只要在app.module.ts文件的import数组中移除即可，冗余代码想删也可以删
2017.01.18 11:43  回复
 添加新评论
 
_云端
13楼 · 2017.01.18 23:33
我使用angular cli 的ng命令新建工程一直卡在installing packages for tooling via npm.有遇到过的吗
 赞  回复
_云端：
 @_云端 @yitalalww
2017.01.18 23:40  回复
yitalalww：
 @_云端 文章里有提到，在下载，要等。 npm最好用淘宝的镜像
2017.01.19 06:50  回复
_云端：
 @yitalalww 这个是在下载node_module里的东西吗？我昨天晚上下了一晚上，早上起来还是在那卡住
2017.01.19 11:11  回复
 添加新评论 还有2条评论， 展开查看
 
啁哒咦岁嘀嘻
15楼 · 2017.02.15 23:52
对新手有帮助
 赞  回复
 
小笼包_9a6a
16楼 · 2017.02.23 17:37
可以在项目生成后修改cli的版本么，我使用的是webclipse，使用了其中一个模板，它默认只能是version17，然后我要引入一个第三方的组件，它又限定了cli最低版本必须要24，搞得我好尴尬
 赞  回复
 
沐浴中的眼泪
17楼 · 2017.03.02 20:14
原来angular-cli的工程，现在升级到angular/cli会有问题！而且是不是不支持promise了？
 赞  回复
1 
2
3 
下一页
被以下专题收入，发现更多相似内容
FrontGr...
Angular...
Angular...
技术控
科学技术
Angular2
关于angular2
展开更多 
推荐阅读更多精彩内容
Angular2 项目实战 后台管理
Angular2 高级种子工程 github地址：https://github.com/linweiwei123/hotshots-admin-angular2 种子工程 拿来即用； 1 良好的工程结构； 1.1 header，导航栏做通用component独立出来； 1.2 输出文件分门别类 2 angular2+webpack1构建； 2.1 编译文件分类输出； 2.2 输出js放index.html顶部加defer； 2.3 webpack loader处理css，fonts，img案例； 3 模块高级使用； 3.1 特性模块 3.2 lazyload，code splitting...
 yitalalww
前端性能优化-对HTTP传输进行压缩
原创作品，请勿抄袭，翻版必究。转载请注明作者。 简介 资深的前端开发人员都知道，在web开发中，对js、css、图片、font等都要进行压缩，尽可能的减小文件的大小，减少前端下载的时间，从而提高网页响应的时间。特别是在移动端，这对用户的流量还有影响。不过本文中所提的压缩并不是指这情况，而是在js，css、图片、font等资源已经压缩了的基础上（当然，这一步非必要条件，压不压缩看你心情，资源文件的压缩跟http传输过程的压缩没关系），在http传输过程中的再次压缩。 HTTP1.1中的Accept-Encoding 在HTTP1.1开始，Web客户端可以通过Acceppt-Encoding...
 yitalalww
2017年读了几千块钱的书，但是我只推荐这几本
2017年是我自从娘胎里出来读书最多的一年，过去很多年加起来（除了教科书）都没有今年一年多。 最近很多伙伴总是问我能不能推荐一些好书，刚好利用这个机会，立马出现在我脑海里的，印象深刻的，对我有很大启发的就是2017年我最喜欢的书。 ▍关于笔记的书 1.《高效人士用超级笔记术》 年初的时候，我几乎买来了市面上所有的手帐书籍，进行了一场关于笔记的主题阅读。由小西利行写的《高效人士用超级笔记术》是我觉得对于提高人的创意思维，最有帮助的一本书，适用于任何人，因为任何行业都离不开创造力，书中的白色笔记，黑色笔记对我的启发最大。 2.《画张图想的更清楚》 如果你对视觉笔记感兴趣，思维导图感兴趣，那么...
 萌薇
年薪10万，你就打败了90%的中国人
撰文 | 张帆 出品 | 网易浪潮工作室 如果你有一些爱分享职场鸡汤的朋友，那你一定会看到很多职场热文，比如《年薪10万和年薪100万的人差在哪里》、《为什么你只能拿十万年薪》；而如果你逛的是知乎，这个问题就可能变成了《年薪十万，女朋友觉得我没前途要分手，我该怎么办》。在许多中国人眼里，年薪十万并不是一件风光的事情，甚至更像是收入底层。 在2016年底，因为国家进行税务改革，个人自行申报纳税的起点是年收入12万，就有消息称， “年收入12万元以上被定为高收入群体，要加税”。虽然这一消息后来被证实为谣言，但当时还是触发了网友的众怒。尤其是一线城市的白领们，刚刚过万的工资交完房租还完花呗，感...
 浪潮工作室
父母是空巢老人，我们是空巢青年
01 前两天去上海看一个朋友，他特意邀请我去他的“新家”看看。 朋友工作两年，终于从月租一千的房子搬到了月租两千的房子。 房子是合租房，三室一厅，朋友住的是其中一个次卧，面积并不算大，十几个平米，主卧是一对情侣。 朋友的家庭条件并不算差，他家在西部省会城市，典型的中产，父母早已经在他上大学那会就为他置办了新房。 吃饭的时候我问朋友：“你爹妈就忍心让你出来花钱买罪受？” “因为我有梦想啊！” 朋友笑着调侃道。 朋友看似玩笑的话让我心头一颤： 是啊，每一个刚毕业出来的年轻人，就像自己，宁愿一个人蜗居在大城市的小单间，也不愿意回家住大洋房，可能都是因为那一句我有梦想吧！ 朋友说，我有时候挺孤单...
 潘城王小古
Angular2-使用Angular CLI快速搭建工程（一）
http://blog.csdn.net/zhao_tuo/article/details/72822105
 changlinwang
Angular2 入门
AngularJS2 是一款开源的JavaScript MV*（MVC、MVW、MVVM）框架，目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HT...
 二彬小青年
Angular2-使用Angular-CLI快速搭建工程（二）
使用iconfont iconfont是阿里巴巴的icon项目，阿里巴巴使用，也公开对外使用，现在一些公司都使用了，它有CDN，访问快，用起来也很方便，这章节讲下如何使用iconfont；（当然，本质上就是引用一个icon的font文件，无论用bootstrap的还是自己做...
 yitalalww
Angular 权威教程 | 第1章 第一个Angular Web应用
仿制Reddit网站 读完本章之后， 你将掌握如何构建基本的Angular应用。 简单的应用将涵盖Angular中的大部分基本要素构建自定义组件；从表单中接收用户输入把对象列表渲染到视图中拦截用户的点击操作， 并据此作出反应 起步 TypeScript[1] 使用TypeS...
 东东少将
Angular CLI 终极指南
Angular CLI 是什么？ Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它允许你做以下这些事情： 创建一个新的 Angular 应用程序 运行带有 LiveReload 支持的开发服务器，以便在...
 semlinker
尝试 一片叶子
 静观四季
你陪我长大，我陪你变老
你陪我长大，我陪你变老 我问父亲，您觉得人生最有趣的事情是什么？ “呃，我想想，一辈子数不清的酸甜苦辣，最有趣的事情应该是陪着你慢慢长大” 我的父母，感谢你们把我带来这个缤纷多彩的世界。呱呱落地到亭亭玉立，你们耗费了太多的心血。 一岁的时候，我把自己的肚脐扣出了血，红肿发炎...
 陈小粤
操作cookie
webdriver 操作 cookie 的方法有：get_cookies() 获得所有 cookie 信息get_cookie(name) 返回有特定 name 值有 cookie 信息add_cookie(cookie_dict) 添加 cookie，必须有 name 和...
 爱吃葡萄冰的鲸
那些平凡的日子啊
今天去看望老妈，想起春起的时候给老妈买过一件红色的薄毛衣开衫，厚度刚好是现在初秋温度可以穿的，于是我和老妈说，那件红色的毛衣开衫现在可以穿了，不然过两天天气凉了，就穿不上了，老妈说，有旧的就先将就穿这吧，新的留着吧。 我和小妹没听老妈的，将新毛衣找了出来给老妈套上，老妈高兴...
 花开向日葵
与儿共读弗罗斯特的诗
美国诗的名家弗罗斯特，还是方平先生上世纪九十年代出版的那本译评小册子给我“启的蒙”，从此知道有这样一位独特的诗家。 记得最牢的是他那首有名的《柴堆》，那实在是诗性的思维和感慨。那堆被人废弃的柴堆，老在那个原地方，在慢慢地腐烂。但弗氏凭着他的诗性感受，觉得那堆...
 南风之薰专栏