anchor.diff:    :marked
       **Do** use upper camel case when naming classes.
       
  -    **做** 使用大写驼峰命名法来命名类。
  +    **采用** 使用大写驼峰命名法来命名类。
   
   .s-why
     :marked
       **Why?** Follows conventional thinking for class names.
       
  -    **为什么？** 遵循类命名传统规则。
  +    **为何？** 遵循类命名传统规则。
   
   .s-why.s-why-last
     :marked
       **Why?** Classes can be instantiated and construct an instance. We often use upper camel case to indicate a constructable asset.
       
  -    **为什么？** 类是可以被实例化并建造一个实例的。我们通常使用大写驼峰命名规则来标示一个可以建造的东西。
  +    **为何？** 类是可以被实例化并建造一个实例的。我们通常使用大写驼峰命名规则来标示一个可以建造的东西。
   
   +makeExample('style-guide/ts/03-01/app/shared/exception.service.avoid.ts', 'example', 'app/shared/exception.service.ts')(avoid=1)
   :marked
  
positive.code: 
  a(href="#toc") Back to top
  
  .l-main-section
  :marked
    ### Components as Elements
    <a id="05-03"></a>
    #### Style 05-03
  
  .s-rule.do
    :marked
      **Do** define Components as elements via the selector.
  
  .s-why
    :marked
      **Why?** Components have templates containing HTML and optional Angular template syntax. They are most associated with putting content on a page, and thus are more closely aligned with elements.
  
  .s-why
    :marked
      **Why?** Components are derived from Directives, and thus their selectors can be elements, attributes, or other selectors. Defining the selector as an element provides consistency for components that represent content with a template.
  
  .s-why.s-why-last
    :marked
      **Why?** It is easier to recognize that a symbol is a component vs a directive by looking at the template's html.
  
  +makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/hero-button/hero-button.component.ts')(avoid=1)
  :marked
  
negative.code: 
  a(href="#toc") Back to top
  
  a(href="#toc") 回到顶部
  
  .l-main-section
  :marked
    ### Never Directly Import Lazy Loaded Folders
    ### 永不直接导入懒惰加载目录
    <a id="04-13"></a>
    #### Style 04-13
    #### 风格
  
  .s-rule.avoid
    :marked
      **Avoid** allowing modules in sibling and parent folders to directly import a module in a *lazy loaded feature*.
      
      **避免** 允许姐妹或者父级目录里的模块直接导入一个*懒惰加载特征*模块。
  
  .s-why.s-why-last
    :marked
      **Why?** Directly importing a module loads it immediately when our intention is to load it on demand.
      
      **为何？** 直接导入一个模块立刻加载它，但是我们的原意是按需加载。
  
  +makeExample('style-guide/ts/04-13/app/app.component.avoid.ts', 'example', 'app/app.component.ts')(avoid=1)
  :marked
  
  a(href="#toc") Back to top
  
  a(href="#toc") 回到顶部
  
  .l-main-section
  :marked
    ### Lazy Loaded Folders May Import From a Parent
    ### 懒惰加载目录可能导入一个父级
    <a id="04-14"></a>
    #### Style 04-14
    #### 风格04-14
  
  .s-rule.do
    :marked
      **Do** allow lazy loaded modules to import a module from a parent folder.
      
      **采用** 允许懒惰加载模块倒入一个父级目录的模块。
  
  .s-why.s-why-last
    :marked
      **Why?** A parent module has already been loaded by the time the lazy loaded module imports it.
      
      **为何？** 在懒惰加载模块导入一个父级模块的时候，它早已经被加载。
  
  +makeExample('style-guide/ts/04-14/app/heroes/heroes.component.ts', 'example', 'app/heroes/heroes.component.ts')
  :marked
  
  a(href="#toc") Back to top
  
  a(href="#toc") 回到顶部
  
  
  .l-main-section
  :marked
    ### Use Component Router to Lazy Load
    ### 使用组件路由器来懒惰加载
    <a id="04-15"></a>
    #### Style 04-15
    #### 风格04-15
  
  .s-rule.do
    :marked
      **Do** use the Component Router to lazy load routable features.
      
      **采用** 使用组件路由器来懒惰加载可以路由的特征。
  
  .s-why.s-why-last
    :marked
      **Why?** That's the easiest way to load a module on demand.
      
      **为何？** 这是最简单的按需加载模块的方法。
  
  a(href="#toc") Back to top
  
  a(href="#toc") 回到顶部
  
  
  .l-main-section
  :marked
    ## Components
    ## 组件
    ### Components Selector Naming
    ### 组件选择器命名
    <a id="05-02"></a>
    #### Style 05-02
    #### 风格05-02
  
  .s-rule.do
    :marked
      **Do** use `kebab-case` for naming the element selectors of our components.
      
      **采用** 使用`烤串命名法`来命名组件的元素选择器。
  
  .s-why.s-why-last
    :marked
      **Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
      
      **为何？** 保持元素名字与[自定义元素](https://www.w3.org/TR/custom-elements/)规范统一。
  
  +makeExample('style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
  :marked
  