翻译完了CLI QuickStart
This commit is contained in:
Zhicheng Wang
parent
d3caa1ab5a
commit
89adb52815
|
|
@ -86,7 +86,7 @@ nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav" data-swiftype-index="f
|
|||
a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") 快速起步
|
||||
|
||||
li.sidenav-section
|
||||
a(class="nav-title #{isCLIQuickstartSelected(cur)}" href="#{cliqs.href}" title="#{cliqs.tooltip}") CLI Quickstart
|
||||
a(class="nav-title #{isCLIQuickstartSelected(cur)}" href="#{cliqs.href}" title="#{cliqs.tooltip}") CLI 快速起步
|
||||
|
||||
|
||||
li.sidenav-section
|
||||
|
|
|
|||
|
|
@ -4,51 +4,93 @@ include _util-fns
|
|||
Good tools make application development quicker and easier to maintain than
|
||||
if you did everything by hand.
|
||||
|
||||
好的工具能让开发更加简单快捷。
|
||||
|
||||
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 on-going development tasks such
|
||||
as testing, bundling, and deployment.
|
||||
|
||||
[**Angular-CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。
|
||||
|
||||
Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular
|
||||
application in TypeScript, using Angular-CLI
|
||||
while adhering to the [Style Guide](./guide/style-guide.html) recommendations that
|
||||
benefit _every_ Angular project.
|
||||
|
||||
在这一章CLI快速起步中，我们的目标是构建并运行一个超级简单的Angular应用。我们会使用Angular-CLI来让每个Angular应用从[风格指南](./guide/style-guide.html)中获益。
|
||||
|
||||
By the end of the chapter, you'll have a basic understanding of development with the CLI
|
||||
and a foundation for both these documentation samples and our real world applications.
|
||||
|
||||
在本章的末尾，我们会通过CLI对开发过程有一个最基本的理解，并将其作为其它文档范例以及真实应用的基础。
|
||||
|
||||
You'll pursue these ends in the following high-level steps:
|
||||
|
||||
我们通过下列三大步来达到目的：
|
||||
|
||||
1. [Set up](#devenv) the development environment
|
||||
|
||||
[设置](#devenv)开发环境
|
||||
|
||||
2. [Create](#create-proj) a new project and skeleton application
|
||||
|
||||
[创建](#create-proj)新项目以及应用的骨架
|
||||
|
||||
3. [Serve](#serve) the application
|
||||
|
||||
启动[开发服务器](#serve)
|
||||
|
||||
4. [Edit](#first-component) the application
|
||||
|
||||
[编辑](#first-component)该应用
|
||||
|
||||
|
||||
.l-main-section
|
||||
h2#devenv Step 1. Set up the Development Environment
|
||||
h2#devenv 步骤1. 设置开发环境
|
||||
|
||||
:marked
|
||||
You need to set up our 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.
|
||||
|
||||
如果你的机器上还没有**[Node.js®和npm](https://nodejs.org/en/download/)**，请先安装它们。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
**Verify that you are running at least node `4.x.x` and npm `3.x.x`**
|
||||
by running `node -v` and `npm -v` in a terminal/console window.
|
||||
Older versions produce errors, but newer versions are fine.
|
||||
|
||||
请先在终端/控制台窗口中运行命令 `node -v` 和 `npm -v`，
|
||||
**来验证一下你正在运行 node `4.x.x` 和 npm `3.x.x` 以上的版本。**
|
||||
更老的版本可能会出现错误，更新的版本则没问题。
|
||||
|
||||
:marked
|
||||
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-project Step 2. Create a new project
|
||||
|
||||
h2#create-project 步骤2. 创建新项目
|
||||
|
||||
:marked
|
||||
Open a terminal window.
|
||||
|
||||
打开终端窗口。
|
||||
|
||||
:marked
|
||||
Generate a new project and skeleton application by running the following commands:
|
||||
|
||||
运行下列命令来生成一个新项目以及应用的骨架代码：
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
ng new my-app
|
||||
|
|
@ -57,11 +99,19 @@ code-example(language="sh" class="code-shell").
|
|||
:marked
|
||||
Patience please.
|
||||
It takes time to set up a new project, most of it spent installing npm packages.
|
||||
|
||||
请耐心等待。
|
||||
创建新项目需要花费很多时间，大多数时候都是在安装那些npm包。
|
||||
|
||||
.l-main-section
|
||||
h2#serve Step 3: Serve the application
|
||||
|
||||
h2#serve 步骤3. 启动开发服务器
|
||||
|
||||
:marked
|
||||
Go to the project directory and launch the server.
|
||||
|
||||
进入项目目录，并启动服务器。
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
cd my-app
|
||||
|
|
@ -71,27 +121,44 @@ code-example(language="sh" class="code-shell").
|
|||
The `ng serve` command launches the server, watches our files,
|
||||
and rebuilds the app as you make changes to the files.
|
||||
|
||||
`ng serve`命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
|
||||
|
||||
Open a browser on `http://localhost:4200/`; the app greets us with a message:
|
||||
|
||||
在浏览器中打开`http://localhost:4200/`，该应用会给我们显示一条信息：
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!")
|
||||
|
||||
.l-main-section
|
||||
h2#first-component Step 4: Edit our first Angular component
|
||||
|
||||
h2#first-component 步骤4. 编辑我们的第一个Angular组件
|
||||
|
||||
:marked
|
||||
The CLI created our first Angular component for us.
|
||||
This is the _root component_ and it is named `app-root`.
|
||||
You can find it in `./src/app/app.component.ts`.
|
||||
|
||||
这个CLI为我们创建了第一个Angular组件。
|
||||
它就是名叫`app-root`的*根组件*。
|
||||
你可以在`./src/app/app.component.ts`目录下找到它。
|
||||
|
||||
: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
|
||||
The browser reloads automatically and we see the revised title. That's nice, but we can make it look better.
|
||||
|
||||
浏览器会自动刷新，而我们会看到修改之后的标题。不错，不过我们还要把它再打扮得好看点。
|
||||
|
||||
Open `src/app/cli-quickstart.component.css` and give our component some style
|
||||
|
||||
打开 `src/app/cli-quickstart.component.css` 并给这个组件设置一些样式
|
||||
|
||||
+makeExample('cli-quickstart/ts/src/app/app.component.css', null, 'src/app/app.component.css')(format=".")
|
||||
|
||||
|
|
@ -100,37 +167,66 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
Looking good!
|
||||
|
||||
漂亮！
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## What's next?
|
||||
|
||||
## 接下来呢？
|
||||
|
||||
That's about all you'd expect to do in a "Hello, World" app.
|
||||
|
||||
如你所愿，我们完成了这个“Hello, World”应用。
|
||||
|
||||
You're ready to take the [Tour of Heroes Tutorial](./tutorial) and build
|
||||
a small application that demonstrates the great things you can build with Angular.
|
||||
|
||||
现在，你可以开始[英雄指南](./tutorial)教程，通过构建一个小型应用来学习如何用Angular构建各种大型应用了。
|
||||
|
||||
Or you can stick around a bit longer to learn about the files in your brand new project.
|
||||
|
||||
或者，你也可以稍等一会儿，学学在这个新项目中的文件都是干什么用的。
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Project file review
|
||||
|
||||
## 项目文件概览
|
||||
|
||||
An Angular-CLI project is the foundation for both quick experiments and enterprise solutions.
|
||||
|
||||
Angular-CLI项目是做快速试验和开发企业解决方案的基础。
|
||||
|
||||
The first file you should check out is `README.md`.
|
||||
It has some basic information on how to use CLI commands.
|
||||
Whenever you want to know more about how Angular-CLI works make sure to visit
|
||||
[the Angular-CLI repository](https://github.com/angular/angular-cli) and
|
||||
[Wiki](https://github.com/angular/angular-cli/wiki).
|
||||
|
||||
你首先要看的文件是`README.md`。
|
||||
它提供了一些如何使用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.
|
||||
|
||||
有些生成的文件你可能觉得陌生。接下来我们就讲讲它们。
|
||||
|
||||
block src-files
|
||||
:marked
|
||||
### The `src` folder
|
||||
|
||||
### `src`文件夹
|
||||
|
||||
Your app lives in the `src` folder.
|
||||
All Angular components, templates, styles, images and anything else your app needs go here.
|
||||
Any files outside of this folder are meant to support building your app.
|
||||
|
||||
你的应用代码位于`src`文件夹中。
|
||||
所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
|
||||
这个文件夹之外的文件都是为构建应用提供支持用的。
|
||||
|
||||
.filetree
|
||||
.file src
|
||||
|
|
@ -162,8 +258,12 @@ table(width="100%")
|
|||
col(width="20%")
|
||||
col(width="80%")
|
||||
tr
|
||||
th File
|
||||
th Purpose
|
||||
th
|
||||
p File
|
||||
p 文件
|
||||
th
|
||||
p Purpose
|
||||
p 用途
|
||||
tr
|
||||
td <code>app/app.component.{ts,html,css,spec.ts}</code>
|
||||
td
|
||||
|
|
@ -171,6 +271,10 @@ table(width="100%")
|
|||
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`组件。
|
||||
它是**根**组件，随着应用的成长它会成为一棵组件树的根节点。
|
||||
|
||||
tr
|
||||
td <code>app/app.module.ts</code>
|
||||
td
|
||||
|
|
@ -179,12 +283,19 @@ table(width="100%")
|
|||
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如何组装该应用。
|
||||
目前，它只声明了`AppComponent`。
|
||||
稍后它还会声明更多组件。
|
||||
|
||||
tr
|
||||
td <code>assets/*</code>
|
||||
td
|
||||
:marked
|
||||
A folder where you can put images and anything else you need to be copied wholesale
|
||||
when you build your application.
|
||||
|
||||
这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
|
||||
tr
|
||||
td <code>environments/*</code>
|
||||
td
|
||||
|
|
@ -196,12 +307,22 @@ table(width="100%")
|
|||
Or maybe different analytics tokens.
|
||||
Maybe even some mock services.
|
||||
Either way, the CLI has you covered.
|
||||
|
||||
这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。
|
||||
这些文件会在构建应用时被替换。
|
||||
比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。
|
||||
甚至使用一些模拟服务。
|
||||
所有这些，CLI都替你考虑到了。
|
||||
|
||||
tr
|
||||
td <code>favicon.ico</code>
|
||||
td
|
||||
:marked
|
||||
Every site wants to look good on the bookmark bar.
|
||||
Get started with your very own Angular icon.
|
||||
|
||||
每个网站都希望自己在书签栏中能好看一点。
|
||||
请把它换成你自己的图标。
|
||||
tr
|
||||
td <code>index.html</code>
|
||||
td
|
||||
|
|
@ -210,16 +331,25 @@ table(width="100%")
|
|||
Most of the time you'll never need to edit it.
|
||||
The CLI will automatically add all `js` and `css` files when building your app so you
|
||||
never need to add any `<script>` or `<link>` tags here manually.
|
||||
|
||||
这是别人访问你的网站是看到的主页面的HTML文件。
|
||||
大多数情况下你都不用编辑它。
|
||||
在构建应用时，CLI会自动把所有`js`和`css`文件添加进去，所以你不必在这里手动添加任何 `<script>` 或 `<link>` 标签。
|
||||
tr
|
||||
td <code>main.ts</code>
|
||||
td
|
||||
:marked
|
||||
The main entry point for your app.
|
||||
Compiles the application with the [JiT compiler](glossary.html#jit)
|
||||
Compiles the application with the [JIT compiler](glossary.html#jit)
|
||||
and [bootstraps](guide/appmodule.html#main "bootstrap the application")
|
||||
the application to run in the browser.
|
||||
You can also use the [AoT compiler](glossary.html#ahead-of-time-aot-compilation)
|
||||
You can also use the [AOT compiler](glossary.html#ahead-of-time-aot-compilation)
|
||||
without changing any code by passing on `--aot` to `ng build` or `ng serve`.
|
||||
|
||||
这是应用的主要入口点。
|
||||
使用[JIT compiler](glossary.html#jit)编译器编译本应用，并[启动](guide/appmodule.html#main "启动应用")，使其运行在浏览器中。
|
||||
你还可以使用[AOT compiler](glossary.html#ahead-of-time-aot-compilation)编译器，而不用修改任何代码 —— 只要给`ng build` 或 `ng serve` 传入 `--aot` 参数就可以了。
|
||||
|
||||
tr
|
||||
td <code>polyfills.ts</code>
|
||||
td
|
||||
|
|
@ -228,6 +358,11 @@ table(width="100%")
|
|||
Polyfills help normalize those differences.
|
||||
You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
|
||||
the [Browser Support guide](guide/browser-support.html) for more information.
|
||||
|
||||
不同的浏览器对Web标准的支持程度也不同。
|
||||
填充库（polyfill）能帮我们把这些不同点进行标准化。
|
||||
你只要使用`core-js` 和 `zone.js`通常就够了，不过你也可以查看[浏览器支持指南](guide/browser-support.html)以了解更多信息。
|
||||
|
||||
tr
|
||||
td <code>styles.css</code>
|
||||
td
|
||||
|
|
@ -235,6 +370,10 @@ table(width="100%")
|
|||
Your global styles go here.
|
||||
Most of the time you'll want to have local styles in your components for easier maintenance,
|
||||
but styles that affect all of your app need to be in a central place.
|
||||
|
||||
这里是你的全局样式。
|
||||
大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
|
||||
|
||||
tr
|
||||
td <code>test.ts</code>
|
||||
td
|
||||
|
|
@ -242,19 +381,32 @@ table(width="100%")
|
|||
This is the main entry point for your unit tests.
|
||||
It has some custom configuration that might be unfamiliar, but it's not something you'll
|
||||
need to edit.
|
||||
|
||||
这是单元测试的主要入口点。
|
||||
它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
|
||||
|
||||
tr
|
||||
td <code>tsconfig.json</code>
|
||||
td
|
||||
:marked
|
||||
Configuration for the TypeScript compiler.
|
||||
|
||||
TypeScript编译器的配置文件。
|
||||
|
||||
|
||||
block root-files
|
||||
:marked
|
||||
### The root folder
|
||||
|
||||
### 根目录
|
||||
|
||||
The `src/` folder is just one of the items inside the project's root folder.
|
||||
Other files help you build, test, maintain, document, and deploy the app.
|
||||
These files go in the root folder next to `src/`.
|
||||
|
||||
`src/`文件夹是项目的根文件夹之一。
|
||||
其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和`src/`平级。
|
||||
|
||||
|
||||
.filetree
|
||||
.file my-app
|
||||
|
|
@ -280,8 +432,12 @@ table(width="100%")
|
|||
col(width="20%")
|
||||
col(width="80%")
|
||||
tr
|
||||
th File
|
||||
th Purpose
|
||||
th
|
||||
p File
|
||||
p 文件
|
||||
th
|
||||
p Purpose
|
||||
p 用途
|
||||
tr
|
||||
td <code>e2e/*</code>
|
||||
td
|
||||
|
|
@ -290,12 +446,19 @@ table(width="100%")
|
|||
They shouldn't be inside `src/` because e2e tests are really a separate app that
|
||||
just so happens to test your main app.
|
||||
That's why it they even have their own `tsconfig.json`.
|
||||
|
||||
在`e2e/`下是端到端（End-to-End）测试。
|
||||
它们不在`src/`下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。
|
||||
这也就是为什么它会拥有自己的`tsconfig.json`。
|
||||
|
||||
tr
|
||||
td <code>node_modules/...</code>
|
||||
td
|
||||
:marked
|
||||
`Node.js` creates this folder and puts all third party modules listed in
|
||||
`package.json` inside of it.
|
||||
|
||||
`Node.js`创建了这个文件夹，并且把`package.json`中列举的所有第三方模块都放在其中。
|
||||
tr
|
||||
td <code>.editorconfig</code>
|
||||
td
|
||||
|
|
@ -304,11 +467,17 @@ table(width="100%")
|
|||
has the same basic configuration.
|
||||
Most editors support an `.editorconfig` file.
|
||||
See http://editorconfig.org for more information.
|
||||
|
||||
给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。
|
||||
大多数的编辑器都支持`.editorconfig`文件，详情参见 http://editorconfig.org 。
|
||||
|
||||
tr
|
||||
td <code>.gitignore</code>
|
||||
td
|
||||
:marked
|
||||
Git configuration to make sure autogenerated files are not commited to source control.
|
||||
|
||||
一个Git的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
|
||||
tr
|
||||
td <code>angular-cli.json</code>
|
||||
td
|
||||
|
|
@ -317,24 +486,38 @@ 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的配置。
|
||||
在这个文件中，你可以设置一系列默认值，还能配置当构件项目时应该排除哪些文件。
|
||||
要了解更多，请参阅Angular-CLI的官方文档。
|
||||
|
||||
tr
|
||||
td <code>karma.conf.js</code>
|
||||
td
|
||||
:marked
|
||||
Unit test configuration for the [Karma test runner](https://karma-runner.github.io),
|
||||
used when running `ng test`.
|
||||
|
||||
给[Karma](https://karma-runner.github.io)的单元测试配置，当运行`ng test`时会用到它。
|
||||
|
||||
tr
|
||||
td <code>package.json</code>
|
||||
td
|
||||
:marked
|
||||
`npm` configuration listing the third party packages your project uses.
|
||||
You can also add your own [custom scripts](https://docs.npmjs.com/misc/scripts) here.
|
||||
|
||||
`npm`配置文件，其中列出了项目使用到的第三方依赖包。
|
||||
你还可以在这里添加自己的[自定义脚本](https://docs.npmjs.com/misc/scripts)。
|
||||
|
||||
tr
|
||||
td <code>protractor.conf.js</code>
|
||||
td
|
||||
:marked
|
||||
End-to-end test configuration for [Protractor](http://www.protractortest.org/),
|
||||
used when running `ng e2e`.
|
||||
|
||||
给[Protractor](http://www.protractortest.org/)使用的端到端测试配置文件，当运行`ng e2e`的时候会用到它。
|
||||
tr
|
||||
td <code>README.md</code>
|
||||
td
|
||||
|
|
@ -342,6 +525,10 @@ table(width="100%")
|
|||
Basic documentation for your project, pre-filled with CLI command information.
|
||||
Make sure to enhance it with project documentation so that anyone
|
||||
checking out the repo can build your app!
|
||||
|
||||
项目的基础文档，预先写入了CLI命令的信息。
|
||||
别忘了用项目文档改进它，以便每个查看此仓库的人都能据此构建出你的应用。
|
||||
|
||||
tr
|
||||
td <code>tslint.json</code>
|
||||
td
|
||||
|
|
@ -350,10 +537,18 @@ table(width="100%")
|
|||
[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
|
||||
|
||||
### 下一步
|
||||
|
||||
If you're new to Angular, we recommend staying on the
|
||||
[learning path](guide/learning-angular.html "Angular learning path").
|
||||
You can skip the "Setup" chapter since you're already using the Angular-CLI setup.
|
||||
|
||||
如果你刚刚开始使用Angular，我们建议你遵循这个[学习路径](guide/learning-angular.html "Angular 学习路径")。
|
||||
你可以跳过“环境设置”一章，因为你已经在使用 Angular-CLI 设置好环境了。
|
||||
|
|
|
|||
Loading…
Reference in New Issue