292 lines
12 KiB
Plaintext
292 lines
12 KiB
Plaintext
block includes
|
||
include ../_util-fns
|
||
- var _prereq = 'node and npm';
|
||
- var _prereq_cn = 'node 和 npm';
|
||
- var _playground = 'playground';
|
||
- var _Install = 'Install';
|
||
//- npm commands
|
||
- var _install = 'install';
|
||
- var _start = 'start';
|
||
|
||
a#develop-locally
|
||
:marked
|
||
## Setup a local development environment
|
||
|
||
## 搭建本地开发环境
|
||
|
||
<span if-docs="ts">
|
||
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
|
||
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 的*游乐场*。
|
||
它不是开发真实应用的地方。
|
||
你应该在自己的电脑上[本地开发](#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} "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
|
||
|
||
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
||
Then ...
|
||
|
||
确定你已经安装了 [!{_prereq_cn}](#install-prerequisites "如果你没有 !{_prereq_cn}？")，然后：
|
||
|
||
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
|
||
!{_npm} !{_install}
|
||
!{_npm} !{_start}
|
||
|
||
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}
|
||
!{_npm} !{_start}
|
||
|
||
.l-main-section#seed
|
||
: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
|
||
.file app.component.ts
|
||
.file app.module.ts
|
||
.file main.ts
|
||
|
||
+makeTabs(`
|
||
setup/ts/app/app.component.ts,
|
||
setup/ts/app/app.module.ts,
|
||
setup/ts/app/main.ts
|
||
`, '', `
|
||
app/app.component.ts,
|
||
app/app.module.ts,
|
||
app/main.ts
|
||
`)(format='.')
|
||
|
||
: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
|
||
p File
|
||
p 文件
|
||
th
|
||
p Purpose
|
||
p 用途
|
||
tr
|
||
td <ngio-ex>app.component.ts</ngio-ex>
|
||
td
|
||
:marked
|
||
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
|
||
:marked
|
||
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
|
||
:marked
|
||
Compiles the application with the [JiT compiler](../glossary.html#jit)
|
||
and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser.
|
||
That's a reasonable choice for the development of most projects and
|
||
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
|
||
|
||
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。
|
||
|
||
+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.
|
||
|
||
[快速起步](../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)。
|