前端技术之Angular2-AngularCLI

接上篇，本篇文章着重解释AngularCLI。

那么什么是AngularCLI呢？
简单来说就是：
Angular-CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

可能有同学看完上面的介绍，还是会问，为什么要用AngularCLI，或者说它能干什么呢？
下面我先简单举个栗子，如果我们用cli创建一个项目，一般是这么几个步骤：

1. 创建项目之前，需要先全局安装cli npm install -g @angular/cli ;
2. 安装完后，执行 ng new PROJECT_NAME cli会帮你创建一个新的项目，包括基本并标准的项目结构，npm会安装默认的packages;

ng new project.png

2. cd到新建项目下cd PROJECT_NAME；
3. 启动服务 ng serve ，此时webpack会编译整个项目，编译成功后，会显示相关信息：

ng serve.png

这样，一个简单的Angular2项目就创建好了，并且运行了。

那么如果读者不采用这种方式，又该如何去创建项目呢？

• 首先，一般这种方式对读者要求较高，需要熟知项目结构，自己写好package.json，里面填上相关配置，各种第三方组件，总之很麻烦，而且容易出错。
• 其次，读者同样cd到你手动新建的项目根目录下，然后执行命令 npm install，等待npm安装你在package.json上注明的那些外部的组件;
• 然后，执行npm start

然鹅，cli带给我们的便利，并不仅仅只有这些，ta还可以Generating Components, Directives, Pipes and Services
请看下方表格：

Scaffold	Usage
** 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
Guard	ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

一般一个完整的Angular应用，通常包含8个主要构造块：

全景图.png

• 模块 (module)
• 组件 (component)
• 模板 (template)
• 元数据 (metadata)
• 数据绑定 (data binding)
• 指令 (directive)
• 服务 (service)
• 依赖注入 (dependency injection)

而我们通过cli能动态添加其中部分构造块，给开发人员带来了实实在在的便利,是不是很棒棒？

本文内容来源：

• 官网文档 请看这里
• GitHub 请看这里。