1.背景介绍
angular-cli它是angular框架官方的一个构建工具，当你使用 ng new xxx(项目名) 创建一个项目时，会自动生成项目结构。
angular-cli的核心是webpack，以及npm做为依赖包。正确的安装依赖包的姿势应该是：
1.Windows下必须是【管理员模式】下运行CMD；再使用 ng 命令。
2.当 ng new xx 创建项目时会自动执行 npm install 下载依赖包,耐心等待
3.如果你网络没有问题的情况下，此时 ng serve 就可以正常运行。
2.知识剖析
常见命令：
new： ng new new_project初始化新项目
Component： ng g component my-new-component新建一个组件
Directive： ng g directive my-new-directive新建一个指令
Pipe： ng g pipe my-new-pipe新建一个管道
Service： ng g service my-new-service新建一个服务
Class： ng g class my-new-class新建一个类
Interface： ng g interface my-new-interface新建一个接口
Enum： ng g enum my-new-enum新建一个枚举
Module： ng g module my-module新建一个模块
测试及检测
e2e： ng e2e 跑自动化测试-自己写测试测试用例
test： ng test 跑单元测试 – 自己写
lint：ng lint 调用tslint跑整个项目，可以收获一堆警告和错误，–force –fix –format可以帮助格式和修复部分问题
Angular CLI主要特性:
1.可以快速搭建框架，创建module，service，class，directive等具有webpack的功能，代码分割code splitting，按需加载
2.代码打包压缩，模块测试，端到端测试
3.热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快
4.有开发环境，测试环境，生产环境的配置
5.sass，less的预编译Angular-CLI都会自动识别后缀来编译
6.typescript的配置，Angular-CLI在创建应用时都可以自己配置
Angular CLI用法:
1.通过ng help命令来获取相关的命令信息
2.创建本地开发环境生成和运行angular2项目:ng serve
3.启动成功后，在浏览器输入 http://localhost:4200/ 就可以看到app works！
4.可以配置默认的 HTTP 端口和一个 LiveReload server 用 -- ：
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
创建component的几种方式:
1. ng generate component my-new-component
#创建my-new-component的组件<组件支持相对路径生成,如果在src/app/model/这个目录下运行
2. ng g component new-cmp
# 组件将会被创建在src/app/model/new-cmp
3. ng g component ../newer-cmp
组件将会在被创建在 src/app/newer-cmp
3.常见问题
为什么选择Angular CLI？
在开发中，搭建一个良好的前端架构非常重要，他对后续的开发，维护，团队协作，易读性具有重要意义
4.编码实战
搭建一个简单的路由：
创建一个home的module：ng g component home
创建一个创建一个about的module：ng g component about
在app.module.ts中添加路由代码：
const appRoutes:Routes = [
{ path:'', redirectTo:'home',pathMatch:'full'},
{ path:'home',component:HomeComponent },
{ path:'about',component:AboutComponent}]
import引入路由模块，同时在@ngModule声明路由
在app.component.html中添加路由的代码：
<nav>
<a routerLink="/home"class="navbar">home</a>
<a routerLink="/home"class="navbar">about</a>
</nav>
<router-outlet></router-outlet>
router-outlet就是输出的地方
5.参考文献
Angular CLI使用教程指南参考：
http://www.cnblogs.com/bh4lm/p/6638057.html
如何利用angular-cli组织项目结构:
http://www.jb51.net/article/80454.htm">http://www.jb51.net/article/80454.html
PPT链接: http://chowhengguang.oschina.io/demo/PPT8.html
