美文网首页我爱编程
Angular CLI终极参考指南(翻译)-新建

Angular CLI终极参考指南(翻译)-新建

作者: 琢磨先生lf | 来源:发表于2017-03-22 10:04 被阅读87次

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

运行项目

相关文章

网友评论

    本文标题:Angular CLI终极参考指南(翻译)-新建

    本文链接:https://www.haomeiwen.com/subject/hspnnttx.html