Angular2使用Angular CLI快速搭建工程（一）

前言：

本文适合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

可以看出模块比component多了一个module.ts文件。

其他内容类似，读者可以自己尝试；

按需加载和代码分割

在生产中，代码是庞大的，在单页面应用中，如果没有代码分割和按需加载，那么第一次加载的时间就会非常久，可能要非常多的时间，这是无法接受的；而且用户可能只需要访问某部分的内容，把全部的代码返回给用户，这也说不过去；所以在大的应用中，代码分割和按需加载久非常的重要；

前面我们已经提到，angular-cli使用了webpack做编译的事情，那言外之意，我们可以用使用webpack中的code splitting来分割代码，用angular的loadChildren来实现懒加载；

webpack的code splitting官网怎么使用，没用过的读者需要自行补脑；webpack code splitting；

接下来我们来实现一下，第一步：在app.module.ts中添加路由

在app.component.html中添加路由的代码

router-outlet就是输出的地方；

我们前面创建了一个home.component和一个abou的module。按需加载就是about这个module中实现；

所以在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中加入以下代码,这里当做全局的用

接下来我们就能使用一些material的UI组件了，我们在home中使用下试试

然后我们在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快速搭建工程（二） 》继续查看

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angular cli 环境搭建  # angularjs 工程搭建  # angular cli  # 加载  # 配置文件  # 按需  # 就可以  # 就能  # 阿里巴巴  # 如果没有  # 可以看到  # 可以看出  # 使用了  # 来实现  # 创建一个  # 第二种  # 自己的  # 端到  # 都是  # 这是  # 就会  # 让人  # 好了 

相关文章： 网站制作服务平台,有什么网站可以发布本地服务信息？  如何破解联通资金短缺导致的基站建设难题？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  智能起名网站制作软件有哪些,制作logo的软件？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  南阳网站制作公司推荐,小学电子版试卷去哪里找资源好？  如何用VPS主机快速搭建个人网站？  微课制作网站有哪些,微课网怎么进？  成都网站制作报价公司,成都工业用气开户费用？  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何通过多用户协作模板快速搭建高效企业网站？  长沙企业网站制作哪家好,长沙水业集团官方网站？  做企业网站制作流程,企业网站制作基本流程有哪些？  建站之星如何实现网站加密操作？  实例解析Array和String方法  历史网站制作软件,华为如何找回被删除的网站？  如何快速启动建站代理加盟业务？  网站制作价目表怎么做,珍爱网婚介费用多少？  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  建站之星安装路径如何正确选择及配置？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何通过云梦建站系统实现SEO快速优化？  如何快速搭建高效WAP手机网站吸引移动用户？  大连网站制作公司哪家好一点,大连买房网站哪个好？  制作网站的模板软件,网站怎么建设？  网站制作费用多少钱,一个网站的运营，需要哪些费用？  如何通过虚拟机搭建网站？详细步骤解析  如何在阿里云购买域名并搭建网站？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  如何用PHP工具快速搭建高效网站？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  常州企业建站如何选择最佳模板？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  如何选择高效稳定的ISP建站解决方案？  网站专业制作公司有哪些,做一个公司网站要多少钱？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  如何在IIS7上新建站点并设置安全权限？  网站制作报价单模板图片,小松挖机官方网站报价？  C++如何编写函数模板？（泛型编程入门）  如何高效利用亚马逊云主机搭建企业网站？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  网站规划与制作是什么,电子商务网站系统规划的内容及步骤是什么？  建站主机默认首页配置指南：核心功能与访问路径优化  建站主机与服务器功能差异如何区分？