(docs) plunkers for template-syntax & pipes

closes #410

public/docs/_examples/pipes/ts/src/app/app.html

@@ -12,7 +12,7 @@
 <!-- #enddocregion hero-birthday-template-->
 
 <!-- #docregion format-birthday -->
-<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} /p>
+<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
 <!-- #enddocregion format-birthday-->
 
 <hr>

public/docs/_examples/pipes/ts/src/app/app.ts

@@ -1,4 +1,4 @@
-import {HeroBirthday as HeroBirthday2} from './hero-birthday.2';
+import {HeroBirthday as HeroBirthday2} from './hero-birthday';
 import {PowerBooster} from './power-booster';
 import {PowerBoostCalculator} from './power-boost-calculator';
 import {HeroListComponent} from './hero-list-component';

public/docs/_examples/pipes/ts/src/app/hero-birthday.ts

@@ -1,5 +1,5 @@
 import {bootstrap, Component} from 'angular2/angular2'
-// #docregion hero-birthday2
+// #docregion
 @Component({ 
   selector: 'hero-birthday',
   template: `
@@ -13,4 +13,4 @@ export class HeroBirthday {
   toggle = true;
   toggleFormat() { this.toggle = !this.toggle; }  
 }
-// #enddocregion hero-birthday2
+// #enddocregion

public/docs/_examples/pipes/ts/src/index.html

@@ -17,7 +17,7 @@
     <h4>Hero Birthday 1</h4>
     <hero-birthday>loading...</hero-birthday>
     <hr>
-    <my-app>loading ...<my-app>
+    <my-app>loading ...</my-app>
   </body>
 
 </html>

public/docs/_examples/pipes/ts/src/plnkr.config

@@ -0,0 +1,3 @@
+{
+  "files":["!**/*.d.ts",  "!**/*.js"]
+}

public/docs/_examples/template-syntax/ts/src/app/app.html

@@ -18,7 +18,7 @@
 <hr>
 <img src="{{heroImageUrl}}"/>
 <img [src]="'' + heroImageUrl"/>
- 
+
 <h3>The title is {{title}}</h3>
 <h3 [text-content]="'The title is '+title"></h3>
 
@@ -30,7 +30,7 @@
 
 <div class="special">
    <!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
-   <img src="../../images/hero.png"> 
+   <img src="images/hero.png">
    <button disabled>Save</button>
 </div>
 
@@ -44,7 +44,7 @@
 -->
 <!-- property over attribute -->
 <!-- examine the following <img> tag in the browser tools -->
-<img src="../../images/ng-logo.png"
+<img src="images/ng-logo.png"
     [src]="heroImageUrl">
 <hr>
 <h3 [text-content]="title"></h3>
@@ -72,7 +72,7 @@
 
 
 
-<!-- event binding --> 
+<!-- event binding -->
 
 <button (click)="onSave()">Save</button>
 <button on-click="onSave()">On Save</button>
@@ -99,7 +99,7 @@
 <little-tour></little-tour>
 </div>
 
-<!-- attribute binding --> 
+<!-- attribute binding -->
 <hr>
 <!-- any value creates the disabled attribute -->
 <button [attr.disabled]="isUnchanged">Disabled</button>
@@ -114,11 +114,11 @@
   <!--  create and set a span attribute -->
   <table border=1>
     <tr><td>One</td><td>Two</td></tr>
-    
-    <!-- ERROR: There is no `colspan` property to set! 
+
+    <!-- ERROR: There is no `colspan` property to set!
       <tr><td colspan="{{1+1}}">Three-Four</td></tr>
     -->
-    
+
     <!--  expression calculates colspan=2 -->
     <tr><td [attr.colspan]="1 + 1">Five-Six</td></tr>
   </table>
@@ -127,16 +127,16 @@
 
 
 
-<!-- class binding --> 
+<!-- class binding -->
 <hr>
-<div class="special">The class is special</div> 
-<div [class]="'special'">The class is special</div> 
-<!-- toggle the "special" class on and ohf -->   
+<div class="special">The class is special</div>
+<div [class]="'special'">The class is special</div>
+<!-- toggle the "special" class on and ohf -->
 <div [class.special]="isSpecial">The class binding is special</div>
- 
+
 <div class="special" [class.special]="!isSpecial">This one is not so special</div>
 
-<div bind-class.special="isSpecial">This class binding is special too</div> 
+<div bind-class.special="isSpecial">This class binding is special too</div>
 
 
 
@@ -159,20 +159,20 @@
 
 
 
-<!-- Two way data binding unwound; 
+<!-- Two way data binding unwound;
     passing the changed display value to the event handler via `$event` -->
 <hr>
-<input [value]="currentHero.firstName" 
+<input [value]="currentHero.firstName"
        (input)="currentHero.firstName=$event.target.value" >
 <br>
 <input [(ng-model)]="currentHero.firstName">
-<br>       
-<input 
-  [ng-model]="currentHero.firstName" 
+<br>
+<input
+  [ng-model]="currentHero.firstName"
   (ng-model-change)="currentHero.firstName=$event">
 <br>
-<input 
-  [ng-model]="currentHero.lastName" 
+<input
+  [ng-model]="currentHero.lastName"
   (ng-model-change)="setLastName($event)">
 <br>
 
@@ -249,7 +249,7 @@
   <input type="radio" name="toes" value="Moe">Moe
   <input type="radio" name="toes" value="???">???
 </fieldset>
-<div class="toe">You picked 
+<div class="toe">You picked
   <span [ng-switch]="toeChoice(toePicker)">
     <template [ng-switch-when]="'Eenie'">Eenie</template>
     <template [ng-switch-when]="'Meanie'">Meanie</template>
@@ -329,7 +329,7 @@
 
 <div>The current hero's name is {{currentHero.firstName}}</div>
 
-<!-- 
+<!--
 <div>The null hero's name is {{nullHero.firstName}}</div>
 
 See console log
@@ -338,7 +338,7 @@ See console log
 <!--No hero, div not displayed, no error -->
 <div *ng-if="nullHero">The null hero's name is {{nullHero?.firstName}}</div>
 
-<!--guard in the expression, no display, no error 
+<!--guard in the expression, no display, no error
     [FAILS No short-circuiting of logical operators]
 <div>The null hero's name is {{nullHero && nullHero.firstName}}</div>
 -->

public/docs/_examples/template-syntax/ts/src/app/app.ts

@@ -1,7 +1,7 @@
 // NOT EVERYTHING IS NEEDED BY TEMPLATE-SYNTAX CHAPTER
 // Much left-over from support for "User Input" chapter such as
-//   ClickMeComponent, 
-//   KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3, 
+//   ClickMeComponent,
+//   KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3,
 //   LittleTour, LoopbackComponent,
 // TODO: purge extraneous material
 
@@ -10,17 +10,17 @@
 
 import {bootstrap, Component, CORE_DIRECTIVES,
   Input, Output,
-  Directive, 
+  Directive,
   ElementRef, EventEmitter,
   NgForm, FORM_DIRECTIVES
 } from 'angular2/angular2';
 
 class Hero {
   public id:number
-  
+
   constructor(
-    public firstName:string, 
-    public lastName?:string, 
+    public firstName:string,
+    public lastName?:string,
     public birthdate?:Date,
     public url?:string,
     public rate:number = 100) {
@@ -28,17 +28,17 @@ class Hero {
     }
 
   get fullName() {return `${this.firstName} ${this.lastName}`;}
-  
+
   static nextId = 1;
-  
+
   static MockHeroes = [
     new Hero(
-      'Hercules', 
-      'Son of Zeus', 
+      'Hercules',
+      'Son of Zeus',
       new Date(1970, 1, 25),
       'http://www.imdb.com/title/tt0065832/',
       325),
-    
+
     new Hero('eenie', 'toe'),
     new Hero('Meanie', 'Toe'),
     new Hero('Miny', 'Toe'),
@@ -67,7 +67,7 @@ class DecoratorDirective {
     <div>Last: {{hero?.lastName}}</div>
     <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
     <div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
-    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>    
+    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
     <button (click)="onDelete()">Delete</button>
   </div>
   `
@@ -76,10 +76,10 @@ class HeroDetailComponent {
 
   @Input()
   hero: Hero;
-  
+
   @Output()
   deleted = new EventEmitter<Hero>();
-  
+
   onDelete() {
     this.deleted.next(this.hero);
   }
@@ -100,7 +100,7 @@ class LittleHeroComponent {
 })
 class ClickMeComponent {
   onClickMe(){
-    alert('You are my hero!')    
+    alert('You are my hero!')
   }
 }
 
@@ -122,7 +122,7 @@ class LoopbackComponent {
 class KeyUpComponent {
   values='';
   onKey(event:KeyboardEvent) {
-    this.values += (<HTMLInputElement>event.target).value + ' | ';  
+    this.values += (<HTMLInputElement>event.target).value + ' | ';
   }
 }
 
@@ -137,7 +137,7 @@ class KeyUpComponent {
 class KeyUpComponentV2 {
   values='';
   onKey(value:string) {
-    this.values += value + ' | ';  
+    this.values += value + ' | ';
   }
 }
 
@@ -157,7 +157,7 @@ class KeyUpComponentV3 {
   selector: 'little-tour',
   template: `
     <h4>Little Tour of Heroes</h4>
-    <input #box 
+    <input #box
       (keyup.enter)="addHero(box.value)"
       (blur)="addHero(box.value)">
     <button (click)=addHero(box.value)>Add</button>
@@ -167,10 +167,10 @@ class KeyUpComponentV3 {
 })
 class LittleTour {
   heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
-  
+
   addHero(newHero:string) {
-    if (newHero) { 
-      this.heroes.push(newHero); 
+    if (newHero) {
+      this.heroes.push(newHero);
       newHero = null; // clear the newHero textbox
     }
   }
@@ -185,25 +185,25 @@ enum Color {Red, Green, Blue};
   templateUrl: 'app/app.html',
   directives: [
     CORE_DIRECTIVES, FORM_DIRECTIVES,
-    ClickMeComponent, 
-    KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3, 
+    ClickMeComponent,
+    KeyUpComponent, KeyUpComponentV2, KeyUpComponentV3,
     LittleTour, LoopbackComponent,
     HeroDetailComponent, LittleHeroComponent
   ]
 })
-class AppComponent { 
+class AppComponent {
 
   actionName = 'Go for it';
   callFax(value:string) {alert(`Faxing ${value} ...`)}
   callPhone(value:string) {alert(`Calling ${value} ...`)}
   canSave =  true;
-  
+
   Color = Color;
   color = Color.Red;
   colorToggle() {this.color = (this.color === Color.Red)? Color.Blue : Color.Red}
-    
+
   currentHero = Hero.MockHeroes[0];
-  
+
   getStyles(el:Element){
     let styles = window.getComputedStyle(el);
     let showStyles = {};
@@ -212,58 +212,58 @@ class AppComponent {
     }
     return JSON.stringify(showStyles);
   }
-  
+
   getVal() {return this.val};
-  
+
   heroes = Hero.MockHeroes;
-  
+
   //heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
-  heroImageUrl = '../../images/hero.png';
-  
+  heroImageUrl = 'images/hero.png';
+
   //iconUrl = 'https://angular.io/resources/images/logos/standard/shield-large.png';
-  iconUrl = '../../images/ng-logo.png';
+  iconUrl = 'images/ng-logo.png';
   isActive = false;
   isSpecial = true;
   isUnchanged = true;
-    
+
   nullHero:Hero = null; // or undefined
-  
+
   onCancel(event:KeyboardEvent){
     let evtMsg = event ? ' Event target is '+ (<HTMLElement>event.target).innerHTML : '';
     alert('Canceled.'+evtMsg)
   }
-  
+
   onClickMe(event:KeyboardEvent){
     let evtMsg = event ? ' Event target class is '+ (<HTMLElement>event.target).className  : '';
-    alert('Click me.'+evtMsg)    
+    alert('Click me.'+evtMsg)
   }
-  
+
   onDeleted(hero:Hero){
     alert('Deleted hero: '+ (hero && hero.firstName))
   }
-  
+
   onSave(event:KeyboardEvent){
     let evtMsg = event ? ' Event target is '+ (<HTMLElement>event.target).innerText : '';
     alert('Saved.'+evtMsg)
   }
-  
+
   onSubmit(form:NgForm){
-    let evtMsg = form.valid ? 
-      ' Form value is '+ JSON.stringify(form.value) : 
+    let evtMsg = form.valid ?
+      ' Form value is '+ JSON.stringify(form.value) :
       ' Form is invalid';
     alert('Form submitted.'+evtMsg)
   }
-  
+
   product = {
     name: 'frimfram',
     price: 42
   };
-  
+
   setLastName(lastName:string){
     console.log(lastName);
     this.currentHero.lastName = lastName;
   }
-  
+
   setClasses() {
     return {
       saveable: this.canSave,      // true
@@ -271,7 +271,7 @@ class AppComponent {
       special: this.isSpecial,     // true
     }
   }
-  
+
   setStyles() {
     return {
       'font-style':  this.canSave      ? 'italic' : 'normal',  // italic
@@ -279,7 +279,7 @@ class AppComponent {
       'font-size':   this.isSpecial    ? 'larger' : 'smaller', // larger
     }
   }
-    
+
   toeChoice(picker:HTMLFieldSetElement){
     let choices = picker.children;
     for (let i=0; i<choices.length; i++){
@@ -287,12 +287,12 @@ class AppComponent {
       if (choice.checked) {return choice.value}
     }
   }
-  
+
   title = 'Template Syntax'
   val=2;
   //  villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
-  villainImageUrl = '../../images/villain.png'
-  
+  villainImageUrl = 'images/villain.png'
+
 
 }
 

public/docs/_examples/template-syntax/ts/src/plnkr.config

@@ -1,4 +1,5 @@
 {
-  "description": "Template Syntax Collection"
-
+  "description": "Template Syntax Collection",
+  "files":["!**/*.d.ts",  "!**/*.js"],
+  "tags": ["template"]
 }

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

@@ -16,6 +16,8 @@ include ../../../../_includes/_util-fns
   In fact, we'd like to apply them in our HTML templates as we do styles.
 
   Welcome, Angular pipes, the simple display-value transformations that we can declare in our HTML!
+  
+  [Live Example](/docs/_examples/pipes/ts/src/plnkr.html)
 
 .l-main-section
 :marked
@@ -74,7 +76,7 @@ include ../../../../_includes/_util-fns
 
   Let's revise our example to bind the pipe's format parameter
   to the component's `format` property.
-+makeExample('pipes/ts/src/app/hero-birthday.2.ts', 'hero-birthday2')
++makeExample('pipes/ts/src/app/hero-birthday.ts')
 
 :marked
   We also added a button to the template and bound its click event to the component's `toggleFormat` method.

public/docs/ts/latest/guide/template-syntax.jade

@@ -1,7 +1,5 @@
 include ../../../../_includes/_util-fns
 
-a(href='/docs/_examples/template-syntax/ts/src/plnkr.html') Live Example 1
-
 :marked
   # Template Syntax
   Our Angular application manages what the user sees and does through the interaction of a Component class instance and its user-facing template.
@@ -12,8 +10,6 @@ a(href='/docs/_examples/template-syntax/ts/src/plnkr.html') Live Example 1
 
   We’ll cover these basic elements of Template Syntax
 
-  [Live Example 1](/docs/_examples/template-syntax/ts/src/plnkr.html)
-
   >[HTML](#html)
 
   >[Interpolation](#interpolation)
@@ -39,6 +35,8 @@ a(href='/docs/_examples/template-syntax/ts/src/plnkr.html') Live Example 1
   >[Input and Output Properties](#inputs-outputs)
 
   >[Template Expression Operators](#expression-ops)
+  
+  [Live Example](/docs/_examples/template-syntax/ts/src/plnkr.html)
 
 .l-main-section
 :marked

tools/plunker-builder/plunkerBuilder.js

@@ -78,7 +78,7 @@ function initConfigAndCollectFileNames(configFileName) {
       return path.join(basePath, fileName);
     }
   });
-  var defaultExcludes = [ '!**/typings/**','!**/tsconfig.json', '!**/plnkr.html', '!**/*.plnkr.html' ];
+  var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/plnkr.html', '!**/*.plnkr.html' ];
   Array.prototype.push.apply(gpaths, defaultExcludes);
 
   config.fileNames = globule.find(gpaths);