docs(template-syntax): Remove this where it is not needed. Use string interpolation where it make sense. Fix Library syntax for little_hero. Add #docregion comment to all relevant files. Move const List to inline List in class declaration and set currentHero in constructor. Create constructor for AppComponent class.

Author: tomplusplus

public/docs/_examples/template-syntax/dart/lib/app_component.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.app_component;
 
 import 'dart:html';
@@ -11,22 +12,10 @@ import 'package:template_syntax/loop_back_component.dart';
 import 'package:template_syntax/key_up_components.dart';
 import 'package:template_syntax/little_hero.dart';
 
-List<Hero> _MockHeroes = [
-  new Hero('Hercules',
-      lastName: 'Son of Zeus',
-      birthdate: new DateTime(1970, 1, 25),
-      url: 'http://www.imdb.com/title/tt0065832/',
-      rate: 325),
-  new Hero('eenie', lastName: 'toe'),
-  new Hero('Meanie', lastName: 'Toe'),
-  new Hero('Miny', lastName: 'Toe'),
-  new Hero('Moe', lastName: 'Toe')
-];
-
 enum _Color { Red, Green, Blue }
 
-@Component(selector: 'my-app')
-@View(
+@Component(
+    selector: 'my-app',
     templateUrl: 'my-app.html',
     directives: const [
       CORE_DIRECTIVES,
@@ -41,10 +30,19 @@ enum _Color { Red, Green, Blue }
       LittleHeroComponent,
     ])
 class AppComponent {
-  List<Hero> heroes = _MockHeroes;
-  Hero currentHero = _MockHeroes.first;
+  List<Hero> heroes = [
+    new Hero('Hercules',
+        lastName: 'Son of Zeus',
+        birthdate: new DateTime(1970, 1, 25),
+        url: 'http://www.imdb.com/title/tt0065832/',
+        rate: 325),
+    new Hero('eenie', lastName: 'toe'),
+    new Hero('Meanie', lastName: 'Toe'),
+    new Hero('Miny', lastName: 'Toe'),
+    new Hero('Moe', lastName: 'Toe')
+  ];
+  Hero currentHero;
   Hero nullHero = null; // or undefined
-
   bool isUnchanged = true;
   bool isSpecial = true;
   bool isActive = false;
@@ -61,12 +59,16 @@ class AppComponent {
       'https://angular.io/resources/images/logos/standard/shield-large.png';
   Map product = {'name': 'frimfram', 'price': 42};
 
+  AppComponent() {
+    currentHero = heroes.first;
+  }
+
   colorToggle() {
     color = color == _Color.Red ? _Color.Blue : _Color.Red;
   }
 
   getStyles(Element el) {
-    var showStyles = this.setStyles();
+    var showStyles = setStyles();
     return JSON.encode(showStyles);
   }
 
@@ -91,7 +93,7 @@ class AppComponent {
   }
 
   setLastName(event) {
-    this.currentHero.lastName = event;
+    currentHero.lastName = event;
   }
 
   setClasses() {
@@ -120,3 +122,4 @@ class AppComponent {
     }
   }
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/click_me_component.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.click_me_component;
 
 import 'dart:html';
@@ -11,3 +12,4 @@ class ClickMeComponent {
     window.alert('You are my hero!');
   }
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/hero.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.hero;
 
 class Hero {
@@ -10,8 +11,9 @@ class Hero {
   int rate = 100;
 
   Hero(this.firstName, {this.lastName, this.birthdate, this.url, this.rate}) {
-    this.id = _nextId++;
+    id = _nextId++;
   }
 
-  String get fullName => firstName + ' ' + lastName;
+  String get fullName => '$firstName $lastName';
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/hero_detail_component.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.hero_detail_component;
 
 import 'package:angular2/angular2.dart';
@@ -25,3 +26,4 @@ class HeroDetailComponent {
     deleted.add(hero);
   }
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/key_up_components.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.key_up_components;
 
 import 'package:angular2/angular2.dart';
@@ -47,3 +48,4 @@ class KeyUpComponentV3 {
 class KeyUpComponentV4 {
   String values = '';
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/little_hero.dart

@@ -1,4 +1,5 @@
-library template_syntax.littleHero;
+// #docregion
+library template_syntax.little_hero;
 
 import 'package:angular2/angular2.dart';
 import 'package:template_syntax/hero.dart';
@@ -12,3 +13,4 @@ class LittleHeroComponent {
   @Input()
   Type hero = Hero;
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/little_tour.dart

@@ -1,3 +1,4 @@
+// #docregion
 library template_syntax.little_tour;
 
 import 'dart:html';
@@ -24,3 +25,4 @@ class LittleTourComponent {
     }
   }
 }
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/loop_back_component.dart

@@ -1,7 +1,9 @@
+// #docregion
 library template_syntax.loop_back_component;
 
 import 'package:angular2/angular2.dart';
 
 @Component(selector: 'loop-back')
 @View(template: '''<input #box (keyup)="0"> <p>{{box.value}}</p>''')
 class LoopBackComponent {}
+// #enddocregion

public/docs/_examples/template-syntax/dart/lib/my-app.html

@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <!-- Interpolation and expressions</h1> -->
 <h3>My First Angular Application</h3>
 <h3>
@@ -123,13 +124,14 @@ <h4>keyup loop-back component</h4>
 
 <!-- attribute binding -->
 <hr>
-<!--Template parse errors:-->
-<!--Can't bind to 'colspan' since it isn't a known native property-->
-<tr><td colspan="{{1+1}}">Three-Four</td></tr>
+
 
 <!--  create and set a span attribute -->
 <table border=1>
     <tr><td>One</td><td>Two</td></tr>
+    <!--Template parse errors:-->
+    <!--Can't bind to 'colspan' since it isn't a known native property-->
+    <tr><td colspan="{{1+1}}">Three-Four</td></tr>
 
     <!-- ERROR: There is no `colspan` property to set!
       <tr><td colspan="{{1+1}}">Three-Four</td></tr>
@@ -400,3 +402,4 @@ <h2>Enums in bindings </h2>
 <p>The name of the Color.Red enum is {{color}}</p>
 <p>The current color number is {{color.index}}</p>
 <p><button [style.color]="color" (click)="colorToggle()">Enum Toggle</button>
+<!-- #docregion -->

public/docs/_examples/template-syntax/dart/pubspec.yaml

@@ -2,7 +2,7 @@ name: template_syntax
 description: Template Syntax
 version: 0.0.1
 dependencies:
-  angular2: 2.0.0-alpha.46
+  angular2: 2.0.0-alpha.47
   browser: ^0.10.0
 transformers:
 - angular2: