diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index 5753d11ce7..1b03333730 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -423,7 +423,7 @@ a#tree-shaking
   which in turn makes more of the application "tree shakable".
 
   摇树优化和AOT编译是单独的步骤。
-  摇树优化不仅针对JavaScript代码。
+  摇树优化仅仅针对JavaScript代码。
   AOT编译会把应用中的大部分都转换成JavaScript，这种转换会让应用更容易被“摇树优化”。
 
 a#rollup
diff --git a/public/docs/ts/latest/cookbook/dynamic-component-loader.jade b/public/docs/ts/latest/cookbook/dynamic-component-loader.jade
index 583e8e1e26..fa6ad304bf 100644
--- a/public/docs/ts/latest/cookbook/dynamic-component-loader.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-component-loader.jade
@@ -2,124 +2,208 @@ include ../_util-fns
 
 :marked
   Component templates are not always fixed. An application may need to load new components at runtime.
+  
+  组件的模板不会永远是固定的。应用可能会需要在运行期间加载一些新的组件。
 
   This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
+  
+  这本烹饪书为你展示如何使用`ComponentFactoryResolver`来动态添加组件。
 
   <a id="toc"></a>
 :marked
-   # Contents
+  # Contents
+  
+  # 目录
 
-      * [Dynamic component loading](#dynamic-loading)
-      * [The directive](#directive)
-      * [Loading components](#loading-components)
+     * [Dynamic component loading](#dynamic-loading)
 
-        * [Resolving Components](#resolving-components)
-        * [Selector References](#selector-references)
+       [动态组件加载](#dynamic-loading)
+
+     * [The directive](#directive)
+
+       [指令](#directive)
+
+     * [Loading components](#loading-components)
+
+       [加载组件](#loading-components)
+
+       * [Resolving Components](#resolving-components)
+
+       [解析组件](#resolving-components)
+
+       * [Selector References](#selector-references)
+
+       [通过选择器引用](#selector-references)
+
+     * [A common _AdComponent_ interface](#common-interface)
+
+       [通用的`AdComponent`接口](#common-interface)
+
+     * [Final ad banner](#final-ad-banner)
+
+       [最终的广告Banner](#final-ad-banner)
 
-      * [A common _AdComponent_ interface](#common-interface)
-      * [Final ad banner](#final-ad-banner)
 
 :marked
-   See the <live-example name="cb-dynamic-component-loader"></live-example>
-   of the code in this cookbook.
+  See the <live-example name="cb-dynamic-component-loader"></live-example>
+  of the code in this cookbook.
+ 
+  到<live-example name="cb-dynamic-component-loader"></live-example>查看本烹饪书的源码。
 
 .l-main-section
 <a id="dynamic-loading"></a>
 :marked
-   ## Dynamic component loading
+  ## Dynamic component loading
+  
+  ## 动态组件加载
 
-   The following example shows how to build a dynamic ad banner.
+  The following example shows how to build a dynamic ad banner.
+  
+  下面的例子展示了如何构建动态广告条。
 
-   The hero agency is planning an ad campaign with several different
-   ads cycling through the banner. New ad components are added
-   frequently by several different teams. This makes it impractical
-   to use a template with a static component structure.
+  The hero agency is planning an ad campaign with several different
+  ads cycling through the banner. New ad components are added
+  frequently by several different teams. This makes it impractical
+  to use a template with a static component structure.
+  
+  英雄管理局正在计划一个广告活动，要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。
+  再用只支持静态组件结构的模板显然是不现实的。
 
-   Instead, you need a way to load a new component without a fixed
-   reference to the component in the ad banner's template.
+  Instead, you need a way to load a new component without a fixed
+  reference to the component in the ad banner's template.
+  
+  我们需要一种新的组件加载方式，它不需要在广告条组件的模板中引用固定的组件。
 
-   Angular comes with its own API for loading components dynamically.
+  Angular comes with its own API for loading components dynamically.
+ 
+  Angular 自带的API就能支持动态加载组件。
 
 
 .l-main-section
 <a id="directive"></a>
 :marked
-   ## The directive
+  ## The directive
+  
+  ## 指令
 
-   Before you can add components you have to define an anchor point
-   to tell Angular where to insert components.
+  Before you can add components you have to define an anchor point
+  to tell Angular where to insert components.
+  
+  在添加组件之前，先要定义一个锚点来告诉Angular要把组件插入到什么地方。
 
-   The ad banner uses a helper directive called `AdDirective` to
-   mark valid insertion points in the template.
+  The ad banner uses a helper directive called `AdDirective` to
+  mark valid insertion points in the template.
+ 
+  广告条使用一个名叫`AdDirective`的辅助指令来在模板中标记出有效的插入点。
 
 +makeExample('cb-dynamic-component-loader/ts/src/app/ad.directive.ts',null,'src/app/ad.directive.ts')(format='.')
 
 :marked
   `AdDirective` injects `ViewContainerRef` to gain access to the view
   container of the element that will host the dynamically added component.
+  
+  `AdDirective`注入了`ViewContainerRef`来获取对容器视图的访问权，这个容器就是那些动态加入的组件的宿主。
 
   In the `@Directive` decorator, notice the selector name, `ad-host`;
   that's what you use to apply the directive to the element.
   The next section shows you how.
+  
+  在`@Directive`装饰器中，要注意选择器的名称：`ad-host`，它就是我们将应用到元素上的指令。下一节我们会展示如何做。
 
 .l-main-section
 <a id="loading-components"></a>
 :marked
-   ## Loading components
+  ## Loading components
+  
+  ## 加载组件
 
-   Most of the ad banner implementation is in `ad-banner.component.ts`.
-   To keep things simple in this example, the HTML is in the `@Component`
-   decorator's `template` property as a template string.
+  Most of the ad banner implementation is in `ad-banner.component.ts`.
+  To keep things simple in this example, the HTML is in the `@Component`
+  decorator's `template` property as a template string.
+  
+  广告条的大部分实现代码都在`ad-banner.component.ts`中。
+  为了让这个例子简单点，我们把HTML直接放在了`@Component`装饰器的`template`属性中。
 
-   The `<ng-template>` element is where you apply the directive you just made.
-   To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
-   `ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
-   where to dynamically load components.
+  The `<ng-template>` element is where you apply the directive you just made.
+  To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
+  `ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
+  where to dynamically load components.
+ 
+  `<ng-template>`元素就是刚才制作的指令将应用到的地方。
+  要应用`AdDirective`，回忆一下来自`ad.directive.ts`的选择器`ad-host`。把它应用到`<ng-template>`（不用带方括号）。
+  这下，Angular就知道该把组件动态加载到哪里了。
 
 +makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'ad-host' ,'src/app/ad-banner.component.ts (template)')(format='.')
 
 :marked
   The `<ng-template>` element is a good choice for dynamic components
   because it doesn't render any additional output.
+  
+  `<ng-template>`元素是动态加载组件的最佳选择，因为它不会渲染任何额外的输出。
 
 a#resolving-components
 :marked
   ### Resolving components
+  
+  ### 解析组件
 
   Take a closer look at the methods in `ad-banner.component.ts`.
+  
+  深入看看`ad-banner.component.ts`中的方法。
 
   `AdBannerComponent` takes an array of `AdItem` objects as input,
   which ultimately comes from `AdService`.  `AdItem` objects specify 
   the type of component to load and any data to bind to the 
   component.`AdService` returns the actual ads making up the ad campaign.
+  
+  `AdBannerComponent`接收一个`AdItem`对象的数组作为输入，它最终来自`AdService`。
+  `AdItem`对象指定要加载的组件类，以及绑定到该组件上的任意数据。
+  `AdService`可以返回广告活动中的那些广告。
 
   Passing an array of components to `AdBannerComponent` allows for a
   dynamic list of ads without static elements in the template.
+  
+  给`AdBannerComponent`传入一个组件数组可以让我们在模板中放入一个广告的动态列表，而不用写死在模板中。
 
   With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems`
   and loads a new component every 3 seconds by calling `loadComponent()`.
+  
+  通过`getAds()`方法，`AdBannerComponent`可以循环遍历`AdItems`的数组，并且每三秒调用一次`loadComponent()`来加载新组件。
 
 +makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'class' ,'src/app/ad-banner.component.ts (excerpt)')(format='.')
 
 :marked
   The `loadComponent()` method is doing a lot of the heavy lifting here.
   Take it step by step. First, it picks an ad.
+  
+  这里的`loadComponent()`方法很重要。
+  我们来一步步看看。首先，它选取了一个广告。
 
 .l-sub-section
-    :marked
-      **How _loadComponent()_ chooses an ad**
+  :marked
+    **How _loadComponent()_ chooses an ad**
+    
+    **`loadComponent()`如何选择广告**
 
-      The `loadComponent()` method chooses an ad using some math.
-
-      First, it sets the `currentAddIndex` by taking whatever it
-      currently is plus one, dividing that by the length of the `AdItem` array, and
-      using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
-      value to select an `adItem` from the array.
+    The `loadComponent()` method chooses an ad using some math.
+    
+    `loadComponent()`方法使用某种算法选择了一个广告。
 
+    First, it sets the `currentAddIndex` by taking whatever it
+    currently is plus one, dividing that by the length of the `AdItem` array, and
+    using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
+    value to select an `adItem` from the array.
+    
+    （译注：循环选取算法）首先，它把`currentAddIndex`递增一，然后用它除以`AdItem`数组长度的*余数*作为新的`currentAddIndex`的值，
+    最后用这个值来从数组中选取一个`adItem`。
+    
 :marked
   After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver` 
   to resolve a `ComponentFactory` for each specific component. 
   The `ComponentFactory` then creates an instance of each component.
+  
+  在`loadComponent()`选取了一个广告之后，它使用`ComponentFactoryResolver`来为每个具体的组件解析出一个`ComponentFactory`。
+  然后`ComponentFactory`会为每一个组件创建一个实例。
 
   Next, you're targeting the `viewContainerRef` that 
   exists on this specific instance of the component. How do you know it's 
@@ -157,13 +241,13 @@ a#common-interface
   Here are two sample components and the `AdComponent` interface for reference:
 
 +makeTabs(
-  `cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts,
-   cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts,
-   cb-dynamic-component-loader/ts/src/app/ad.component.ts`,
-  null,
-  `hero-job-ad.component.ts,
-   hero-profile.component.ts,
-   ad.component.ts`
+`cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts,
+cb - dynamic - component - loader / ts / src / app / hero - profile.component.ts,
+cb - dynamic - component - loader / ts / src / app / ad.component.ts`,
+null,
+`hero-job-ad.component.ts,
+hero - profile.component.ts,
+ad.component.ts`
 )
 
 a#final-ad-baner
@@ -171,7 +255,7 @@ a#final-ad-baner
   ### Final ad banner
    The final ad banner looks like this:
 figure.image-display
-   img(src="/resources/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads")
+  img(src="/resources/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads")
 
 :marked
-   See the <live-example name="cb-dynamic-component-loader"></live-example>.
+  See the <live-example name="cb-dynamic-component-loader"></live-example>.