修订完cli-quickstart
This commit is contained in:
Zhicheng Wang
parent
409e17fab4
commit
ed206e74a7
|
|
@ -6,14 +6,14 @@ include _util-fns
|
|||
|
||||
好的工具能让开发更加简单快捷。
|
||||
|
||||
The [**AngularCLI**](https://cli.angular.io/) is a **_command line interface_** tool
|
||||
The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool
|
||||
that can create a project, add files, and perform a variety of ongoing development tasks such
|
||||
as testing, bundling, and deployment.
|
||||
|
||||
[**Angular-CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
|
||||
[**Angular CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
|
||||
|
||||
The goal in this guide is to build and run a simple Angular
|
||||
application in TypeScript, using theAngularCLI
|
||||
application in TypeScript, using the Angular CLI
|
||||
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
|
||||
benefit _every_ Angular project.
|
||||
|
||||
|
|
@ -45,15 +45,19 @@ include _util-fns
|
|||
[编辑](#first-component)该应用。
|
||||
|
||||
And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
|
||||
|
||||
你还可以<a href="/resources/zips/cli-quickstart/cli-quickstart.zip">下载这个例子</a>。
|
||||
|
||||
.l-main-section
|
||||
h2#devenv
|
||||
p Step 1. Set up the Development Environment
|
||||
p 步骤1. 设置开发环境
|
||||
h2#devenv Step 1. Set up the Development Environment
|
||||
|
||||
h2#devenv 步骤1. 设置开发环境
|
||||
|
||||
:marked
|
||||
You need to set up your development environment before you can do anything.
|
||||
在开始工作之前，我们必须设置好开发环境。
|
||||
|
||||
在开始工作之前，我们必须设置好开发环境。
|
||||
|
||||
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
|
||||
if they are not already on your machine.
|
||||
|
||||
|
|
@ -66,18 +70,20 @@ h2#devenv
|
|||
Older versions produce errors, but newer versions are fine.
|
||||
|
||||
请先在终端/控制台窗口中运行命令 `node -v` 和 `npm -v`，
|
||||
**来验证一下你正在运行 node `4.x.x` 和 npm `3.x.x` 以上的版本。**
|
||||
**来验证一下你正在运行 node `6.9.x` 和 npm `3.x.x` 以上的版本。**
|
||||
更老的版本可能会出现错误，更新的版本则没问题。
|
||||
|
||||
:marked
|
||||
Then **install the [AngularCLI](https://github.com/angular/angular-cli)** globally.
|
||||
然后全局安装 **[Angular-CLI](https://github.com/angular/angular-cli)** 。
|
||||
Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally.
|
||||
|
||||
然后全局安装 **[Angular CLI](https://github.com/angular/angular-cli)** 。
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
npm install -g @angular/cli
|
||||
|
||||
.l-main-section
|
||||
h2#create-proj
|
||||
p Step 2. Create a new project
|
||||
p 步骤2. 创建新项目
|
||||
h2#create-proj Step 2. Create a new project
|
||||
h2#create-proj 步骤2. 创建新项目
|
||||
|
||||
:marked
|
||||
Open a terminal window.
|
||||
|
|
@ -133,9 +139,10 @@ figure.image-display
|
|||
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="The app works!")
|
||||
|
||||
.l-main-section
|
||||
h2#first-component
|
||||
p Step 4: Edit your first Angular component
|
||||
p 步骤4. 编辑我们的第一个Angular组件
|
||||
h2#first-component Step 4: Edit your first Angular component
|
||||
|
||||
h2#first-component 步骤4. 编辑我们的第一个Angular组件
|
||||
|
||||
:marked
|
||||
The CLI created the first Angular component for you.
|
||||
This is the _root component_ and it is named `app-root`.
|
||||
|
|
@ -147,7 +154,9 @@ h2#first-component
|
|||
|
||||
:marked
|
||||
Open the component file and change the `title` property from _app works!_ to _My First Angular App_:
|
||||
|
||||
打开这个组件文件，并且把`title`属性从 _app works!_ 改为 _My First Angular App_ ：
|
||||
|
||||
+makeExample('cli-quickstart/ts/src/app/app.component.ts', 'title', 'src/app/app.component.ts')(format=".")
|
||||
|
||||
:marked
|
||||
|
|
@ -196,7 +205,7 @@ figure.image-display
|
|||
|
||||
An Angular CLI project is the foundation for both quick experiments and enterprise solutions.
|
||||
|
||||
Angular-CLI项目是做快速试验和开发企业解决方案的基础。
|
||||
Angular CLI项目是做快速试验和开发企业解决方案的基础。
|
||||
|
||||
The first file you should check out is `README.md`.
|
||||
It has some basic information on how to use CLI commands.
|
||||
|
|
@ -206,10 +215,12 @@ figure.image-display
|
|||
|
||||
你首先要看的文件是`README.md`。
|
||||
它提供了一些如何使用CLI命令的基础信息。
|
||||
如果你想了解 Angular-CLI 的工作原理，请访问 [Angular-CLI 的仓库](https://github.com/angular/angular-cli)及其
|
||||
如果你想了解 Angular CLI 的工作原理，请访问 [Angular CLI 的仓库](https://github.com/angular/angular-cli)及其
|
||||
[Wiki](https://github.com/angular/angular-cli/wiki)。
|
||||
|
||||
Some of the generated files might be unfamiliar to you. 有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
|
||||
Some of the generated files might be unfamiliar to you.
|
||||
|
||||
有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
|
||||
|
||||
block src-files
|
||||
:marked
|
||||
|
|
@ -268,7 +279,9 @@ table(width="100%")
|
|||
:marked
|
||||
Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test.
|
||||
It is the **root** component of what will become a tree of nested components
|
||||
as the application evolves. 使用HTML模板、CSS样式和单元测试定义`AppComponent`组件。
|
||||
as the application evolves.
|
||||
|
||||
使用HTML模板、CSS样式和单元测试定义`AppComponent`组件。
|
||||
它是**根**组件，随着应用的成长它会成为一棵组件树的根节点。
|
||||
tr
|
||||
td <code>app/app.module.ts</code>
|
||||
|
|
@ -277,7 +290,9 @@ table(width="100%")
|
|||
Defines `AppModule`, the [root module](guide/appmodule.html "AppModule: the root module")
|
||||
that tells Angular how to assemble the application.
|
||||
Right now it declares only the `AppComponent`.
|
||||
Soon there will be more components to declare. 定义`AppModule`，这个[根模块](guide/appmodule.html "AppModule: 根模块")会告诉Angular如何组装该应用。
|
||||
Soon there will be more components to declare.
|
||||
|
||||
定义`AppModule`，这个[根模块](guide/appmodule.html "AppModule: 根模块")会告诉Angular如何组装该应用。
|
||||
目前，它只声明了`AppComponent`。
|
||||
稍后它还会声明更多组件。
|
||||
tr
|
||||
|
|
@ -338,7 +353,7 @@ table(width="100%")
|
|||
without changing any code by passing in `--aot` to `ng build` or `ng serve`.
|
||||
|
||||
这是应用的主要入口点。
|
||||
使用[JIT compiler](glossary.html#jit)编译器编译本应用，并[启动](guide/appmodule.html#main "启动应用")，使其运行在浏览器中。
|
||||
使用[JIT compiler](glossary.html#jit)编译器编译本应用，并[启动应用的根模块`AppModule`](guide/appmodule.html#main "启动应用")，使其运行在浏览器中。
|
||||
你还可以使用[AOT compiler](glossary.html#ahead-of-time-aot-compilation)编译器，而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。
|
||||
|
||||
tr
|
||||
|
|
@ -383,8 +398,7 @@ table(width="100%")
|
|||
TypeScript compiler configuration for the Angular app (`tsconfig.app.json`)
|
||||
and for the unit tests (`tsconfig.spec.json`).
|
||||
|
||||
TypeScript编译器的配置文件。
|
||||
|
||||
TypeScript编译器的配置文件。`tsconfig.app.json`是为Angular应用准备的，而`tsconfig.spec.json`是为单元测试准备的。
|
||||
|
||||
block root-files
|
||||
:marked
|
||||
|
|
@ -460,6 +474,11 @@ table(width="100%")
|
|||
In this file you can set several defaults and also configure what files are included
|
||||
when your project is build.
|
||||
Check out the official documentation if you want to know more.
|
||||
|
||||
Angular CLI的配置文件。
|
||||
在这个文件中，我们可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。
|
||||
要了解更多，请参阅它的官方文档。
|
||||
|
||||
tr
|
||||
td <code>.editorconfig</code>
|
||||
td
|
||||
|
|
@ -522,6 +541,8 @@ table(width="100%")
|
|||
td
|
||||
:marked
|
||||
TypeScript compiler configuration for your IDE to pick up and give you helpful tooling.
|
||||
|
||||
TypeScript编译器的配置，你的IDE会借助它来给你提供更好的帮助。
|
||||
tr
|
||||
td <code>tslint.json</code>
|
||||
td
|
||||
|
|
@ -529,8 +550,10 @@ table(width="100%")
|
|||
Linting configuration for [TSLint](https://palantir.github.io/tslint/) together with
|
||||
[Codelyzer](http://codelyzer.com/), used when running `ng lint`.
|
||||
Linting helps keep your code style consistent.
|
||||
|
||||
给[TSLint](https://palantir.github.io/tslint/)和[Codelyzer](http://codelyzer.com/)用的配置信息，当运行`ng lint`时会用到。
|
||||
Lint功能可以帮你保持代码风格的统一。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Next Step
|
||||
|
|
|
|||
Loading…
Reference in New Issue