diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index 6a28a8ac03..b7e407fa9e 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -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 download the example. + + 你还可以下载这个例子。 .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 app/app.module.ts @@ -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 .editorconfig 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 tslint.json 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