anchor.diff:    You define a component's view with its companion **template**. A template is a form of HTML
     that tells Angular how to render the component.
   
  -  我们通过组件的自带的**模板**来定义组件视图。模板以HTML形式存在，告诉Angular如何渲染组件(视图)。
  +  我们通过组件的自带的**模板**来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。
   
     A template looks like regular HTML, except for a few differences. Here is a
     template for our `HeroListComponent`:
   
  -  多数情况下，模板看起来很像标准HTML……当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板。
  +  多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是`HeroListComponent`组件的一个模板：
   
   +makeExample('app/hero-list.component.html')
   
   :marked
     Although this template uses typical HTML elements like `<h2>` and  `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](template-syntax.html).
   
  -  模板除了可以使用典型的HTML元素（`<h2>`和`<p>`），它还能使用其它元素。例如(template-syntax.html)中使用了Angular的[模板语法]`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`。
  +  模板除了可以使用像`<h2>`和`<p>`这样的典型的 HTML 元素，还能使用其它元素。
  +  例如，像`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`这样的代码使用了 Angular 的[模板语法](template-syntax.html)。
   
     In the last line of the template, the `<hero-detail>` tag is a custom element that represents a new component, `HeroDetailComponent`.
   
  
positive.code:   The architectural takeaway is that you must add metadata to your code
    so that Angular knows what to do.
  
    这种架构处理方式是：你向代码中添加元数据，以便Angular知道该怎么做。
  
  .l-hr
  
  
negative.code:   into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
    read as any experienced jQuery programmer can attest.
  
    如果没有框架，我们就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。
    如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会。
  
  figure
    img(src="/resources/images/devguide/architecture/databinding.png" alt="数据绑定" style="width:220px; float:left; margin-left:-40px;margin-right:20px" )
  