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文件)方式
我们来看看怎样启动项目