docs(architecture): add Jade blocks for Dart, and other tweaks (#2990)

.gitignore

@@ -35,3 +35,4 @@ link-checker-results.txt
 /dist
 /public/docs/dart
 /public/docs/ts/_cache
+/public/docs/_examples/*/dart

public/docs/ts/latest/guide/architecture.jade

@@ -48,6 +48,8 @@ figure
   ## Modules
 figure
   img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
+
+block angular-modules
   :marked
     Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
 
@@ -120,11 +122,13 @@ figure
   :marked
     These are two different and _complementary_ module systems. Use them both to write your apps.
 
+:marked
   ### Angular libraries
 
 figure
   img(src="/resources/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
 
+block angular-libraries
   :marked
     Angular ships as a collection of JavaScript modules. You can think of them as library modules. 
 
@@ -132,7 +136,7 @@ figure
     
     You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
     <br class="l-clear-both"><br>
-:marked
+
     For example, import Angular's `Component` decorator from the `@angular/core` library like this:
   +makeExample('app/app.component.ts', 'import', '')(format='.')
   :marked
@@ -153,10 +157,10 @@ figure
 
 .l-hr 
 
-.l-main-section
+.l-main-section#components
 :marked
-  <a id="components"></a>
   ## Components
+
 figure
   img(src="/resources/images/devguide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
 
@@ -169,7 +173,6 @@ figure
   * The list of heroes.
   * The hero editor.
 
-
   You define a component's application logic&mdash;what it does to support the view&mdash;inside a class.
   The class interacts with the view through an API of properties and methods.
 
@@ -253,7 +256,7 @@ block ts-decorator
     Here are a few of the possible `@Component` configuration options:
 
 :marked
-  - `moduleId`: sets the source of the base address (`module.id`) for module-relative URLs such as the `templateUrl`.
+  <ul if-docs="ts"><li>`moduleId`: sets the source of the base address (`module.id`) for module-relative URLs such as the `templateUrl`.</ul>
 
   - `selector`: CSS selector that tells Angular to create and insert an instance of this component
   where it finds a `<hero-list>` tag in *parent* HTML.
@@ -262,6 +265,9 @@ block ts-decorator
 
   - `templateUrl`: module-relative address of this component's HTML template, shown [above](#templates).
 
+block dart-directives
+
+:marked
   - `providers`: !{_array} of **dependency injection providers** for services that the component requires.
   This is one way to tell Angular that the component's constructor requires a `HeroService`
   so it can get the list of heroes to display. 
@@ -305,7 +311,7 @@ figure
 
 :marked
   * The `{{hero.name}}` [*interpolation*](displaying-data.html#interpolation)
-  displays the component's `hero.name` property value within the `<li>` tags.
+  displays the component's `hero.name` property value within the `<li>` element.
 
   * The `[hero]` [*property binding*](template-syntax.html#property-binding) passes the value of `selectedHero` from
   the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
@@ -349,12 +355,10 @@ figure
   Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
   according to the instructions given by **directives**.
 
-  A directive is a class with directive metadata. In !{_Lang}, apply the `@Directive` !{_decorator}
-  to attach metadata to the class.
-<br class="l-clear-both">
-:marked
+  A directive is a class with a `@Directive` !{_decorator}.
   A component is a *directive-with-a-template*;
   a `@Component` !{_decorator} is actually a `@Directive` !{_decorator} extended with template-oriented features.
+  <br class="l-clear-both">
 
 .l-sub-section
   :marked
@@ -377,7 +381,6 @@ figure
   * [`*ngIf`](displaying-data.html#ngIf) includes the `HeroDetail` component only if a selected hero exists.
 
 block dart-bool
-  //- N/A
 
 :marked
   **Attribute** directives alter the appearance or behavior of an existing element.
@@ -491,17 +494,19 @@ figure
   In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
   A provider is something that can create or return a service, typically the service class itself.
 
+block registering-providers
+  :marked
     You can register providers in modules or in components.
     
     In general, add providers to the [root module](#module) so that
     the same instance of a service is available everywhere.
 
-+makeExample('app/app.module.ts', 'providers', 'app/app.module.ts (module providers)')(format='.')
+  +makeExcerpt('app/app.module.ts (module providers)', 'providers')
 
 :marked
   Alternatively, register at a component level in the `providers` property of the `@Component` metadata:
 
-+makeExample('app/hero-list.component.ts', 'providers', 'app/hero-list.component.ts (component providers)')(format='.')
++makeExcerpt('app/hero-list.component.ts (component providers)', 'providers')
 
 :marked
   Registering at a component level means you get a new instance of the