feat(core): separate refs from vars.

Introduces `ref-` to give a name to an element or a directive (also works for `<template>` elements), and `let-` to introduce an input variable for a `<template>` element.

BREAKING CHANGE:
- `#...` now always means `ref-`.
- `<template #abc>` now defines a reference to the TemplateRef, instead of an input variable used inside of the template.
- `#...` inside of a *ngIf, … directives is deprecated.
  Use `let …` instead.
- `var-...` is deprecated. Replace with `let-...` for `<template>` elements and `ref-` for non `<template>` elements.

Closes #7158

Closes #8264

modules/benchmarks/src/costs/index.ts

@@ -63,15 +63,15 @@ class DynamicDummy {
   directives: [NgIf, NgFor, DummyComponent, DummyDirective, DynamicDummy],
   template: `
     <div *ngIf="testingPlainComponents">
-      <dummy *ngFor="#i of list"></dummy>
+      <dummy *ngFor="let i of list"></dummy>
     </div>
 
     <div *ngIf="testingWithDirectives">
-      <dummy dummy-decorator *ngFor="#i of list"></dummy>
+      <dummy dummy-decorator *ngFor="let i of list"></dummy>
     </div>
 
     <div *ngIf="testingDynamicComponents">
-      <dynamic-dummy *ngFor="#i of list"></dynamic-dummy>
+      <dynamic-dummy *ngFor="let i of list"></dynamic-dummy>
     </div>
   `
 })

modules/benchmarks/src/largetable/largetable_benchmark.ts

@@ -214,22 +214,22 @@ class CellData {
   template: `
       <table [ngSwitch]="benchmarkType">
         <tbody template="ngSwitchWhen 'interpolation'">
-          <tr template="ngFor #row of data">
-            <td template="ngFor #column of row">
+          <tr template="ngFor let row of data">
+            <td template="ngFor let column of row">
               {{column.i}}:{{column.j}}|
             </td>
           </tr>
         </tbody>
         <tbody template="ngSwitchWhen 'interpolationAttr'">
-          <tr template="ngFor #row of data">
-            <td template="ngFor #column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
+          <tr template="ngFor let row of data">
+            <td template="ngFor let column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
               i,j attrs
             </td>
           </tr>
         </tbody>
         <tbody template="ngSwitchWhen 'interpolationFn'">
-          <tr template="ngFor #row of data">
-            <td template="ngFor #column of row">
+          <tr template="ngFor let row of data">
+            <td template="ngFor let column of row">
               {{column.iFn()}}:{{column.jFn()}}|
             </td>
           </tr>

modules/benchmarks/src/naive_infinite_scroll/app.ts

@@ -19,7 +19,7 @@ import {Component, Directive} from 'angular2/core';
     </div>
     <div template="ngIf scrollAreas.length > 0">
       <p>Following tables are only here to add weight to the UI:</p>
-      <scroll-area template="ngFor #scrollArea of scrollAreas"></scroll-area>
+      <scroll-area template="ngFor let scrollArea of scrollAreas"></scroll-area>
     </div>
   </div>`
 })

modules/benchmarks/src/naive_infinite_scroll/cells.ts

@@ -55,7 +55,7 @@ export class Stage {
   directives: [NgFor],
   template: `
       <div [style.width.px]="cellWidth">
-          <button template="ngFor #stage of stages"
+          <button template="ngFor let stage of stages"
                   [disabled]="stage.isDisabled"
                   [style.background-color]="stage.backgroundColor"
                   on-click="setStage(stage)">

modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts

@@ -28,7 +28,7 @@ import {NgFor} from 'angular2/common';
             <div id="padding"></div>
             <div id="inner">
                 <scroll-item
-                    template="ngFor #item of visibleItems"
+                    template="ngFor let item of visibleItems"
                     [offering]="item">
                 </scroll-item>
             </div>