diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade index 92add7cd98..d51ed315db 100644 --- a/public/docs/_includes/_side-nav.jade +++ b/public/docs/_includes/_side-nav.jade @@ -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 diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index dc649d957f..ee8a2cafe1 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -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 app/app.component.{ts,html,css,spec.ts} 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 app/app.module.ts 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 assets/* 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 environments/* 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 favicon.ico td :marked Every site wants to look good on the bookmark bar. Get started with your very own Angular icon. + + 每个网站都希望自己在书签栏中能好看一点。 + 请把它换成你自己的图标。 tr td index.html 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 `