continue review of "我们" keyword.
This commit is contained in:
Rex
parent
77cdd8bde8
commit
3659248ee5
|
|
@ -15,7 +15,7 @@ include ../_util-fns
|
|||
All such greatness has humble beginnings.
|
||||
|
||||
在此烹饪宝典中，我们会展示如何利用`ngFormModel`来动态渲染一个简单的表单，包括各种控件类型和验证规则。
|
||||
这个起点很简陋，但我们可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。
|
||||
这个起点很简陋，但可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。
|
||||
|
||||
In our example we use a dynamic form to build an online application experience for heroes seeking employment.
|
||||
The agency is constantly tinkering with the application process.
|
||||
|
|
@ -89,7 +89,7 @@ include ../_util-fns
|
|||
Next we have defined `QuestionControlService`, a simple service for transforming our questions to an ngForm control group.
|
||||
In a nutshell, the control group consumes the metadata from the question model and allows us to specify default values and validation rules.
|
||||
|
||||
接下来，我们定义了`QuestionControlService`，一个可以把我们的问卷问题转换为一组ngForm控件的服务。
|
||||
接下来，我们定义了`QuestionControlService`，一个可以把问卷问题转换为一组ngForm控件的服务。
|
||||
简而言之，这组ngForm控件使用问卷模型的元数据，并允许我们设置默认值和验证规则。
|
||||
|
||||
+makeExample('cb-dynamic-form/ts/app/question-control.service.ts',null,'app/question-control.service.ts')(format='.')
|
||||
|
|
@ -106,7 +106,7 @@ include ../_util-fns
|
|||
:marked
|
||||
`DynamicFormComponent` is the entry point and the main container for the form.
|
||||
|
||||
`DynamicFormComponent`是我们表单的主要容器和入口点。
|
||||
`DynamicFormComponent`是表单的主要容器和入口点。
|
||||
|
||||
+makeTabs(
|
||||
`cb-dynamic-form/ts/app/dynamic-form.component.html,
|
||||
|
|
@ -135,7 +135,7 @@ include ../_util-fns
|
|||
We only have two types of questions at this point but we can imagine many more.
|
||||
The `ngSwitch` determines which type of question to display.
|
||||
|
||||
请注意，这个组件能代表模型里的任何问题类型。目前，还只有两种问题类型，但我们可以添加更多类型。可以用`ngSwitch`决定显示哪种类型的问题。
|
||||
请注意，这个组件能代表模型里的任何问题类型。目前，还只有两种问题类型，但可以添加更多类型。可以用`ngSwitch`决定显示哪种类型的问题。
|
||||
|
||||
In both components we're relying on Angular's **ngFormModel** to connect the template HTML to the
|
||||
underlying control objects, populated from the question model with display and validation rules.
|
||||
|
|
@ -155,20 +155,20 @@ include ../_util-fns
|
|||
The set of questions we have defined for the job application is returned from the `QuestionService`.
|
||||
In a real app we'd retrieve these questions from storage.
|
||||
|
||||
`QuestionService`会返回我们为工作申请表定义的那组问题列表。在真实的应用程序环境中，我们会从数据库里获得这些问题列表。
|
||||
`QuestionService`会返回为工作申请表定义的那组问题列表。在真实的应用程序环境中，我们会从数据库里获得这些问题列表。
|
||||
|
||||
The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`.
|
||||
Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array.
|
||||
|
||||
关键是，我们完全根据`QuestionService`返回的对象来控制英雄的工作申请表。
|
||||
要维护这份问卷，我们只要非常简单的添加、更新和删除`questions`数组中的对象就可以了。
|
||||
要维护这份问卷，只要非常简单的添加、更新和删除`questions`数组中的对象就可以了。
|
||||
|
||||
+makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts')
|
||||
|
||||
:marked
|
||||
Finally, we display an instance of the form in the `AppComponent` shell.
|
||||
|
||||
最后，我们在`AppComponent`里显示出表单。
|
||||
最后，在`AppComponent`里显示出表单。
|
||||
|
||||
+makeExample('cb-dynamic-form/ts/app/app.component.ts','','app.component.ts')
|
||||
|
||||
|
|
@ -188,15 +188,15 @@ include ../_util-fns
|
|||
without making any hardcoded assumptions about specific questions.
|
||||
In addition to control metadata, we are also adding validation dynamically.
|
||||
|
||||
这点非常重要，因为只要与我们的*问卷*对象模型兼容，就可以在任何类型的调查问卷中复用这些组件。
|
||||
这里的关键是用到元数据的动态数据绑定来渲染表单，对问卷问题没有任何硬性的假设。除控件的元数据外，我们还可以动态添加验证规则。
|
||||
这点非常重要，因为只要与*问卷*对象模型兼容，就可以在任何类型的调查问卷中复用这些组件。
|
||||
这里的关键是用到元数据的动态数据绑定来渲染表单，对问卷问题没有任何硬性的假设。除控件的元数据外，还可以动态添加验证规则。
|
||||
|
||||
The *Save* button is disabled until the form is in a valid state.
|
||||
When the form is valid, we can click *Save* and the app renders the current form values as JSON.
|
||||
This proves that any user input is bound back to the data model.
|
||||
Saving and retrieving the data is an exercise for another time.
|
||||
|
||||
表单验证通过之前，*保存*按钮是禁用的。验证通过后，我们就可以点击*保存*按钮，程序会把当前值渲染成JSON显示出来。
|
||||
表单验证通过之前，*保存*按钮是禁用的。验证通过后，就可以点击*保存*按钮，程序会把当前值渲染成JSON显示出来。
|
||||
这表明任何用户输入都被传到了数据模型里。至于如何储存和提取数据则是另一话题了。
|
||||
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ include ../_util-fns
|
|||
|
||||
We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
|
||||
|
||||
我们欢迎您的反馈！请点击Banner右上角的图标给我们留言。
|
||||
欢迎您的反馈！请点击Banner右上角的图标给我们留言。
|
||||
|
||||
Post *documentation* issues and pull requests on the [angular.io](https://github.com/angular/angular.io) github repository.
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ code-example(format='')
|
|||
We could grab the browser `document` object and set the title manually.
|
||||
That's dirty and undermines our chances of running the app outside of a browser someday.
|
||||
|
||||
我们可以得到浏览器的`document`对象，并且手动设置标题。但是这样看起来很脏，而且我们将无法在浏览器之外运行应用程序。
|
||||
可以从浏览器获得`document`对象，并且手动设置标题。但是这样看起来很脏，而且将无法在浏览器之外运行应用程序。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
@ -78,14 +78,14 @@ code-example(format='')
|
|||
function, we'll also have to include `Title` service explicitly as one of the bootstrap providers:
|
||||
|
||||
虽然该类是浏览器平台包的一部分，但它*没有被*Angular加载为*浏览器平台上的默认服务供应商*。
|
||||
这意味着，我们在使用浏览器平台的`bootstrap()`函数来引导我们的应用程序时，我们必须要明确地把`Title`服务作为引导期的供应商之一加入进来：
|
||||
这意味着，使用浏览器平台的`bootstrap()`函数来引导应用程序时，我们必须要明确地把`Title`服务作为引导期的供应商之一加入进来：
|
||||
|
||||
+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.')
|
||||
:marked
|
||||
Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our
|
||||
custom application components and services.
|
||||
|
||||
一旦我们明确提供了`Title`服务，就能把`Title`服务注入到任何一个应用程序内组件和服务里面。
|
||||
一旦明确提供了`Title`服务，就能把`Title`服务注入到任何一个应用程序内组件和服务里面。
|
||||
|
||||
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ figure.image-display
|
|||
:marked
|
||||
## Why we provide the *Title* service in *bootstrap*
|
||||
|
||||
## 为什么我们要在*bootstrap*里面提供这个*Title*服务
|
||||
## 为什么要在*bootstrap*里面提供这个*Title*服务
|
||||
|
||||
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ figure.image-display
|
|||
Here we recommend registering the title service during bootstrapping,
|
||||
a location we reserve for configuring the runtime Angular environment.
|
||||
|
||||
但这里，我们推荐在引导过程中注册这个Title服务，这个位置是我们为设置Angular运行环境而保留的。
|
||||
但这里，我们推荐在引导过程中注册这个Title服务，这个位置是为设置Angular运行环境而保留的。
|
||||
|
||||
That's exactly what we're doing.
|
||||
The `Title` service is part of the Angular *browser platform*.
|
||||
|
|
@ -139,7 +139,7 @@ figure.image-display
|
|||
we'll have to provide a different `Title` service that understands the concept of a "document title" for that specific platform.
|
||||
Ideally the application itself neither knows nor cares about the runtime environment.
|
||||
|
||||
我们的做法正是如此。这里的`Title`服务是Angular*浏览器平台*的一部分。如果我们在其它平台上引导应用程序，就得提供另一个专为那个平台准备的`Title`服务。
|
||||
我们的做法正是如此。这里的`Title`服务是Angular*浏览器平台*的一部分。如果在其它平台上引导应用程序，就得提供另一个专为那个平台准备的`Title`服务。
|
||||
:marked
|
||||
[Back to top](#top)
|
||||
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@ h2#edit-config 第六步：编辑TypeScript配置文件
|
|||
For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file
|
||||
as shown here.
|
||||
|
||||
在Visual Studio 2015里，我们必须在TypeScript的配置文件(`tsconfig.json`)中添加`"compileOnSave": true`：
|
||||
在Visual Studio 2015里，必须在TypeScript的配置文件(`tsconfig.json`)中添加`"compileOnSave": true`：
|
||||
|
||||
+makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue