接上篇,本篇文章着重解释AngularCLI。
那么什么是AngularCLI呢?
简单来说就是:
Angular-CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
可能有同学看完上面的介绍,还是会问,为什么要用AngularCLI,或者说它能干什么呢?
下面我先简单举个栗子,如果我们用cli创建一个项目,一般是这么几个步骤:
- 创建项目之前,需要先全局安装cli
npm install -g @angular/cli
; - 安装完后,执行
ng new PROJECT_NAME
cli会帮你创建一个新的项目,包括基本并标准的项目结构,npm会安装默认的packages;
- cd到新建项目下
cd PROJECT_NAME
; - 启动服务
ng serve
,此时webpack会编译整个项目,编译成功后,会显示相关信息:
这样,一个简单的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个主要构造块:
- 模块 (module)
- 组件 (component)
- 模板 (template)
- 元数据 (metadata)
- 数据绑定 (data binding)
- 指令 (directive)
- 服务 (service)
- 依赖注入 (dependency injection)
而我们通过cli能动态添加其中部分构造块,给开发人员带来了实实在在的便利,是不是很棒棒?
本文内容来源: