translate: guide/setup.jade
This commit is contained in:
rexebin
parent
e7caa4d947
commit
edc9d32e97
@ -18,33 +18,48 @@ a#develop-locally
|
||||
It's not where you'd develop a real application.
|
||||
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
|
||||
|
||||
<live-example name=quickstart>《快速起步》在线编程</live-example>例子是 Angular 的*游戏场*。
|
||||
<live-example name=quickstart>《快速起步》在线编程</live-example>例子是 Angular 的*游乐场*。
|
||||
它不是你开发的真实应用的地方。
|
||||
你应该在自己的电脑上[本地开发](#why-locally "Why develop locally")... 你也应该在本地环境学习 Angular。
|
||||
你应该在自己的电脑上[本地开发](#why-locally "为什么在本地开发？")... 你也应该在本地环境学习 Angular。
|
||||
</span>
|
||||
|
||||
|
||||
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
||||
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
|
||||
|
||||
利用 [github 上](!{_qsRepo} "Install the github QuickStart repo")的**快速起步种子**在你的电脑上搭建一个新项目是很快很容易的。
|
||||
利用 [github 上](!{_qsRepo} "安装 github 《快速起步》库")的**快速起步种子**在你的电脑上搭建一个新项目是很快很容易的。
|
||||
|
||||
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
||||
Then ...
|
||||
|
||||
确定你已经安装了[!{_prereq}](#install-prerequisites "What if you don't have !{_prereq}?")，然后：
|
||||
确定你已经安装了[!{_prereq}](#install-prerequisites "如果你没有 !{_prereq} ？")，然后：
|
||||
|
||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
||||
|
||||
新建项目目录（你可以暂时为其取名`quickstart`，以后再重命名）。
|
||||
|
||||
1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder.
|
||||
|
||||
[克隆](#clone "从 github 克隆")或者[下载](#download "从 github 下载")**《快速起步》种子**到你的项目目录。
|
||||
|
||||
1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages.
|
||||
|
||||
安装[!{_npm}](#install-prerequisites "如果你没有 !{_prereq} ？") 包。
|
||||
|
||||
1. Run `!{_npm} !{_start}` to launch the sample application.
|
||||
|
||||
运行`!{_npm} !{_start}`来启动例子应用。
|
||||
|
||||
a#clone
|
||||
:marked
|
||||
### Clone
|
||||
|
||||
### 克隆
|
||||
|
||||
Perform the _clone-to-launch_ steps with these terminal commands.
|
||||
|
||||
运行下列命令来执行*克隆并启动*步骤。
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
git clone !{_qsRepo}.git quickstart
|
||||
cd quickstart
|
||||
@ -54,9 +69,15 @@ code-example(language="sh" class="code-shell").
|
||||
a#download
|
||||
:marked
|
||||
### Download
|
||||
|
||||
### 下载
|
||||
|
||||
<a href="!{_qsRepoZip}" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
||||
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
||||
|
||||
<a href="!{_qsRepoZip}" title="下载《快速起步》种子库">下载《快速起步》种子</a>
|
||||
并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
cd quickstart
|
||||
!{_npm} !{_install}
|
||||
@ -66,20 +87,29 @@ code-example(language="sh" class="code-shell").
|
||||
:marked
|
||||
## What's in the QuickStart seed?
|
||||
|
||||
## 《快速起步》种子库里都有什么？
|
||||
|
||||
block qs-seed
|
||||
:marked
|
||||
The **QuickStart seed** contains the same application as the QuickStart playground
|
||||
and even has <live-example>its own _playground_</live-example>
|
||||
that accomodates development of richer examples in a live coding environment.
|
||||
|
||||
**《快速起步》种子** 包含了与《快速起步》游乐场一样的应用，并且它还有<live-example>自己的*游乐场*</live-example>，
|
||||
用来在在线编程的环境里开发更丰富例子。
|
||||
|
||||
But it's true purpose is to provide a solid foundation for _local_ development.
|
||||
Consequently, there are _many more files_ in the project folder on your machine,
|
||||
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
||||
|
||||
但是，它真实的目的是提供坚实的*本地*开发基础。
|
||||
所以你的电脑里的项目目录里面有*更多文件*，参见[搭建剖析](setup-systemjs-anatomy.html "Setup Anatomy")。
|
||||
|
||||
block core-files
|
||||
:marked
|
||||
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
||||
|
||||
注意**`/app`**目录里的下列三个 TypeScript (`.ts`) 文件：
|
||||
.filetree
|
||||
.file app
|
||||
.children
|
||||
@ -100,13 +130,23 @@ block core-files
|
||||
:marked
|
||||
All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows.
|
||||
|
||||
所有指南和烹饪书都有*至少这几个核心文件*。每个文件都有独特的用途，并且随着应用的成长各自独立演变。
|
||||
|
||||
style td, th {vertical-align: top}
|
||||
table(width="100%")
|
||||
col(width="20%")
|
||||
col(width="80%")
|
||||
tr
|
||||
th File
|
||||
th Purpose
|
||||
th
|
||||
:marked
|
||||
File
|
||||
|
||||
文件
|
||||
th
|
||||
:marked
|
||||
Purpose
|
||||
|
||||
用途
|
||||
tr
|
||||
td <ngio-ex>app.component.ts</ngio-ex>
|
||||
td
|
||||
@ -114,6 +154,9 @@ table(width="100%")
|
||||
Defines the same `AppComponent` as the one in the QuickStart !{_playground}.
|
||||
It is the **root** component of what will become a tree of nested components
|
||||
as the application evolves.
|
||||
|
||||
定义与《快速起步》游乐场同样的`AppComponent`。
|
||||
它是**根**组件，随着应用的演变，它将变成一颗嵌套组件树。
|
||||
tr(if-docs="ts")
|
||||
td <code>app.module.ts</code>
|
||||
td
|
||||
@ -121,6 +164,10 @@ table(width="100%")
|
||||
Defines `AppModule`, the [root module](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`，[根模块](appmodule.html "AppModule: 根模块")为 Angular 描述如何组装应用。
|
||||
目前，它只声明了`AppComponent`。
|
||||
不久，它将声明更多组件。
|
||||
tr
|
||||
td <ngio-ex>main.ts</ngio-ex>
|
||||
td
|
||||
@ -131,12 +178,20 @@ table(width="100%")
|
||||
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
|
||||
You'll learn about alternative compiling and deployment options later in the documentation.
|
||||
|
||||
使[即时 (JiT) 编译器](../glossary.html#jit)用编译应用并且在浏览器中[启动](appmodule.html#main "启动应用")并运行应用。
|
||||
对于大多数项目的开发，这都是合理的选择。而且它是在像 Plunker 这样的*在线编程*环境中运行例子的唯一选择。
|
||||
你将在本文档中学习其他编译和开发选择。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Next Step
|
||||
|
||||
### 下一步
|
||||
|
||||
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
|
||||
|
||||
如果你是 Angular 初学者，建议根据[学习路径](learning-angular.html)学习。
|
||||
|
||||
br
|
||||
br
|
||||
|
||||
@ -144,49 +199,97 @@ a#install-prerequisites
|
||||
.l-main-section
|
||||
:marked
|
||||
## Appendix: !{_prereq}
|
||||
|
||||
## 附录：node 和 npm
|
||||
block install-tooling
|
||||
:marked
|
||||
Node.js and npm are essential to modern web development with Angular and other platforms.
|
||||
Node powers client development and build tools.
|
||||
The _npm_ package manager, itself a _node_ application, installs JavaScript libraries.
|
||||
|
||||
Node.js 和 npm 对使用 Angular 和其他平台进行现代网络开发的至关重要。
|
||||
Node 驱动客户端开发和构建工具。
|
||||
*npm* 包管理器本身是*node*应用，用于安装 JavaScript 库。
|
||||
|
||||
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
|
||||
Get them now</a> if they're not already installed on your machine.
|
||||
|
||||
如果你的电脑没有安装它们，<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="安装 Node.js 和更新 npm">
|
||||
立刻安装它们</a>。
|
||||
|
||||
**Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher**
|
||||
by running the commands `node -v` and `npm -v` in a terminal/console window.
|
||||
Older versions produce errors.
|
||||
|
||||
在终端/控制台窗口运行命令`node -v`和`npm -v`，来**确认你运行的 node 是`v4.x.x`或更高，npm 为`3.x.x`或更高。**。
|
||||
老版本产品会产生错误。
|
||||
|
||||
We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
|
||||
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
|
||||
use other versions of node and npm.
|
||||
|
||||
我们推荐 [nvm](https://github.com/creationix/nvm) 来管理多版本 node 和 npm。
|
||||
如果你的电脑上已经有使用其他版本 node 和 npm 的项目，你可能需要[nvm](https://github.com/creationix/nvm)。
|
||||
|
||||
+ifDocsFor('ts')
|
||||
a#why-locally
|
||||
.l-main-section
|
||||
:marked
|
||||
## Appendix: Why develop locally
|
||||
|
||||
## 附录：为何在本地开发
|
||||
|
||||
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
|
||||
|
||||
在浏览器中<live-example>在线编程</live-example>是很好的探索 Angular 的方法。
|
||||
|
||||
Links on almost every documentation page open completed samples in the browser.
|
||||
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
|
||||
|
||||
几乎每章文档里面的链接都在浏览器中打开完整的例子。
|
||||
你可以用这些代码做实验，或者与朋友共享你的修改，或者下载并在你自己的电脑上运行这些代码。
|
||||
|
||||
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
|
||||
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
|
||||
so the reader can discover Angular without distraction.
|
||||
The other samples are based on the QuickStart seed.
|
||||
The other samples are based on the QuickStart seed.
|
||||
|
||||
[快速起步](../quickstart.html "Angular 快速起步游乐场")仅仅展示了`AppComponent`文件。
|
||||
它在内部创建了只为*游乐场*而准备的等价`app.module.ts`和`main.ts`。
|
||||
所以读者可以在零干扰的情况下探索 Angular。
|
||||
其他例子是基于 《快速起步》种子的。
|
||||
|
||||
As much fun as this is ...
|
||||
|
||||
虽然有这么多的乐趣，但是...
|
||||
|
||||
* you can't ship your app in plunker
|
||||
|
||||
* 你不能在 plunker 里面发布你的应用
|
||||
|
||||
* you aren't always online when writing code
|
||||
|
||||
* 编程时你不可能总是在线
|
||||
|
||||
* transpiling TypeScript in the browser is slow
|
||||
|
||||
* 在浏览器中编译 TypeScript 很慢
|
||||
|
||||
* the type support, refactoring, and code completion only work in your local IDE
|
||||
|
||||
* 只有本地IDE有类型支持、代码重构和代码自动完成
|
||||
|
||||
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
|
||||
a place to try the documentation samples and experiment on your own.
|
||||
It's the perfect place to reproduce a bug when you want to
|
||||
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
|
||||
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
|
||||
|
||||
把<live-example><i>在线编程</i></live-example>环境当做*游乐场*，一个尝试文档例子和自己做实验的地方。
|
||||
当你想要<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="提交关于文档的问题">提交关于文档的问题</a>或者
|
||||
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="提交关于 Angular 的问题">提交关于 Angular 自身的问题</a>时，
|
||||
它是重现错误的完美地方。
|
||||
|
||||
For real development, we strongly recommend [developing locally](#develop-locally).
|
||||
|
||||
对于现实项目开发，我们强烈推荐在[本地开发](#develop-locally)。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user