Angular CLI终极参考指南（翻译）-新建
2017-03-22 本文已影响87人
琢磨先生lf
Angular CLI终极参考指南
如果翻译内容对你产品困扰，可查看原文The Ultimate Angular CLI Reference Guide
新建一个Angular项目
有两种方式来通过Angular CLI新建应用
<ul>
<li>ng init：在当前目录下创建应用</li>
<li>ng new：创建新的目录并在新目录下运行ng init命令</li>
</ul>
所以ng new和ng init类似，只是前者会帮你创建目录
假设你还没有创建目录，让我们使用ng new 来创建一个新的项目
$ ng new my-app
指令做了这些事情：
<ul>
<li>创建my-app目录</li>
<li>新的Angular项目所需要的资源文件和目录，基于你指定的名字（my-app）与Angular指定的规范而创建</li>
<li>下载npm依赖</li>
<li>安装Typescript</li>
<li>安装单元测试工具Karma</li>
<li>安装E2E测试框架protractortest</li>
<li>创建环境默认设置文件</li>
</ul>
你将在后面章节学习到这些知识点。
这个时候你已经有了可用的Angular应用，my-app目录结构是这样的：
my-app
├── README.md
├── angular-cli.json
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── index.ts
│ │ └── shared
│ │ └── index.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.json
│ └── typings.d.ts
└── tslint.json
指令参数列表：
- --dry-run: boolean,默认false，dry-run方式执行，只输出要创建的文件和执行的操作，实际上并没有创建项目
- --verbose: boolean, 默认false，输出详细信息
- --link-cli: boolean, 默认false,自动连接到angular-cli包(更多)
- --skip-npm: boolean, 默认false, 在项目第一次创建时不执行npm install
- --skip-bower: boolean, 默认true, 不安装bower
- --skip-git: boolean, 默认false, 不执行Git repository初始化工作
- --directory: string, 目录名，默认与项目名称一样
- --source-dir: string, 默认'src', 源文件目录名
- --style: string, 默认'css', 使用 ('css', 'less' 还是 'scss')编写css
- --prefix: string, 默认 'app', 生成新组件的前缀
- --mobile: boolean, 默认 false, 生成 Progressive Web App （PWA）项目（详询将来支持的特性）
- --routing: boolean, 默认 false, 添加带路由的模块(module)并import到main app module中
- --inline-style: boolean, 默认 false, 生成新应用的时候使用inline styles(内联，不生成单独的css文件)方式
- --inline-template: boolean, 默认 false, 生成新应用的时候使用 inline templates(内联，不生成单独的html文件)方式
我们来看看怎样启动项目
