Merge remote-tracking branch 'origin/master'

# Conflicts:
#	public/_includes/_hero-home.jade
#	public/docs/ts/latest/_data.json
#	public/docs/ts/latest/guide/style-guide.jade

public/_includes/_scripts-include.jade

@@ -29,6 +29,7 @@ script(src="/resources/js/directives/cheatsheet.js")
 script(src="/resources/js/directives/api-list.js")
 script(src="/resources/js/directives/bio.js")
 script(src="/resources/js/directives/bold.js")
+script(src="/resources/js/directives/announcement-bar.js")
 script(src="/resources/js/directives/code.js")
 script(src="/resources/js/directives/copy.js")
 script(src="/resources/js/directives/code-tabs.js")

public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts

@@ -5,9 +5,10 @@ import { Contact, ContactService } from './contact.service';
 import { UserService }    from '../user.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'app-contact',
-  templateUrl: 'app/contact/contact.component.html',
+  templateUrl: 'contact.component.html',
-  styleUrls: ['app/contact/contact.component.css']
+  styleUrls: ['contact.component.css']
 })
 export class ContactComponent implements OnInit {
   contact:  Contact;
@@ -35,7 +36,7 @@ export class ContactComponent implements OnInit {
   }
 
   onSubmit() {
-    // TODO: do something like save it
+    // POST-DEMO TODO: do something like save it
     this.displayMessage('Saved ' + this.contact.name);
   }
 

public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts

@@ -6,9 +6,10 @@ import { Contact, ContactService } from './contact.service';
 import { UserService }             from '../core/user.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'app-contact',
-  templateUrl: 'app/contact/contact.component.html',
+  templateUrl: 'contact.component.html',
-  styleUrls: ['app/contact/contact.component.css']
+  styleUrls: ['contact.component.css']
 })
 export class ContactComponent implements OnInit {
   contact:  Contact;
@@ -36,7 +37,7 @@ export class ContactComponent implements OnInit {
   }
 
   onSubmit() {
-    // TODO: do something like save it
+    // POST-DEMO TODO: do something like save it
     this.displayMessage('Saved ' + this.contact.name);
   }
 

public/docs/_examples/ngmodule/ts/app/core/title.component.ts

@@ -3,8 +3,9 @@ import { Component, Input } from '@angular/core';
 import { UserService }      from '../core/user.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'app-title',
-  templateUrl: 'app/core/title.component.html',
+  templateUrl: 'title.component.html',
 })
 export class TitleComponent {
   @Input() subtitle = '';

public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts

@@ -8,14 +8,9 @@ import { HeroListComponent }   from './hero-list.component';
 import { HighlightDirective }  from './highlight.directive';
 import { routing }             from './hero.routing.3';
 
-// TODO: Remove in RC 6
-import { HeroService }         from './hero.service';
-
 // #docregion class
 @NgModule({
   imports: [ CommonModule, FormsModule, routing ],
-  // TODO: Remove in RC 6
-  providers: [ HeroService ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
     HighlightDirective

public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts

@@ -7,13 +7,8 @@ import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
 import { routing }             from './hero.routing';
 
-// TODO: Remove THE HeroService class in RC 6
-import { HeroService } from './hero.service';
-
 @NgModule({
   imports: [ SharedModule, routing ],
-  // TODO: Remove in RC 6
-  providers: [ HeroService ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
   ]

public/docs/_examples/ngmodule/ts/app/title.component.ts

@@ -7,8 +7,9 @@ import { UserService } from './user.service';
 // #docregion v1
 
 @Component({
+  moduleId: module.id,
   selector: 'app-title',
-  templateUrl: 'app/title.component.html',
+  templateUrl: 'title.component.html',
 })
 export class TitleComponent {
   @Input() subtitle = '';

public/docs/dart/latest/_data.json

@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "Dart",
     "menuTitle": "Docs Home",
-    "banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Current release is <strong>beta.21</strong>. View the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

public/docs/js/latest/_data.json

@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "JavaScript",
     "menuTitle": "Docs Home",
-    "banner": "The current release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> for enhancements, fixes, and breaking changes."
+    "banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {

public/docs/ts/latest/guide/style-guide.jade

@@ -2701,8 +2701,8 @@ a(href="#toc") 回到顶部
     **考虑**使用[Visual Studio Code](https://code.visualstudio.com/)的[代码片段](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)来实施本风格指南。
     
     <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
-        <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif", width="80%", alt="Use Extension">
+      <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
-      </a> 
+    </a>  
 
 a(href="#toc") Back to top
 

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

@@ -917,7 +917,7 @@ a#component-with-inputs-outputs
     at low cost and without resorting to much slower and more complicated end-to-end tests.
 
 :marked
-  The second test verifies click behavior. Clicking the hero should rais a `selected` event that the
+  The second test verifies click behavior. Clicking the hero should raise a `selected` event that the
   host component (`DashboardComponent` presumably) can hear:
 +makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test', 'app/dashboard/dashboard-hero.component.spec.ts (click test)')(format='.')
 :marked

public/resources/css/base/_type.scss

@@ -8,6 +8,7 @@ body {
   font-family: $brand-font;
   font-size: 14px;
   color: $blue-grey-600;
+
   &.ng-cloak {
     display: none;
   }
@@ -25,7 +26,7 @@ body {
 }
 
 a {
-  color: $blue-600;
+  color: $blue-700;
   text-decoration: none;
 
   &:hover {
@@ -35,10 +36,10 @@ a {
 }
 
 code {
-  background: $blue-grey-50;
+  background: rgba($blue-grey-50, .56);
   border-radius: 2px;
   font-family: $mono-font;
-  color: $teal-500;
+  color: $teal-700;
   padding: 0px 4px;
   font-size: 90%;
 }
@@ -76,7 +77,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 112px;
   font-weight: 300;
-  opacity: .54;
   line-height: 118px;
 }
 
@@ -84,7 +84,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 56px;
   font-weight: 400;
-  opacity: .54;
   line-height: 118px;
 }
 
@@ -93,7 +92,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 45px;
   font-weight: 400;
-  opacity: .54;
   line-height: 48px;
 }
 
@@ -102,7 +100,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 34px;
   font-weight: 400;
-  opacity: .87;
   line-height: 40px;
 }
 
@@ -111,7 +108,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 24px;
   font-weight: 400;
-  opacity: .87;
   line-height: 32px;
 }
 
@@ -120,7 +116,6 @@ code {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 20px;
   font-weight: 500;
-  opacity: .87;
   line-height: 32px;
 }
 
@@ -129,7 +124,6 @@ code {
     font-size: 34px;
     line-height: 40px;
     margin: ($unit * 6) 0 ($unit * 3) 0;
-    opacity: 0.87;
 
     &:first-of-type {
       margin-top: 0;
@@ -169,7 +163,6 @@ table th,
   margin: 0px 0px ($unit * 3) 0px;
   font-size: 16px;
   font-weight: 400;
-  opacity: .87;
   line-height: 28px;
   padding: 0;
 
@@ -187,7 +180,6 @@ table th,
 table td {
   font-size: 14px;
   font-weight: 400;
-  opacity: .87;
   line-height: 24px;
 }
 
@@ -195,20 +187,18 @@ table td {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 12px;
   font-weight: 400;
-  opacity: .54;
   line-height: 20px;
 }
 
 .text-aside,
 .docs-content aside {
   @extend .text-caption;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  background: rgba($blue-grey-50, .24);
   color: $blue-grey-700;
   font-weight: 400;
   font-size: 13px;
   line-height: 24px;
   opacity: 1;
-  background: rgba($blue-grey-50, .56);
   border-radius: 2px;
   padding: $unit * 3;
   margin-bottom: $unit * 2;

public/resources/css/module/_announcement-bar.scss

@@ -10,6 +10,7 @@
 * Variables
 */
 
+$announcement-bar: '.announcement-bar';
 $announcement-bar-height: 104px;
 $announcement-bar-width: 752px;
 
@@ -18,22 +19,74 @@ $announcement-bar-width: 752px;
 * Class
 */
 
-.announcement-bar {
+#{$announcement-bar} {
-  background: $white;
   bottom: 0;
-  box-sizing: border-box;
-  color: $blue-grey-500;
-  height: $announcement-bar-height;
   left: 50%;
   margin-bottom: -($announcement-bar-height / 2);
   margin-left: -($announcement-bar-width / 2);
-  overflow: hidden;
-  padding: $unit * 4;
   position: absolute;
   width: $announcement-bar-width;
 
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    position: static;
+    text-align: center;
+    width: auto;
+  }
+}
+
+// SLIDES CONTAINER
+#{$announcement-bar}-slides {
+  background: $white;
+  box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  height: $announcement-bar-height;
+  overflow: hidden;
+  position: relative;
+  width: $announcement-bar-width;
+
+  @include respond-to('mobile') {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    height: 240px;
+    margin: 0;
+    padding: ($unit * 4) ($unit * 6);
+    text-align: center;
+    width: auto;
+  }
+}
+
+// INDIVIDUAL SLIDE
+#{$announcement-bar}-slide {
+  bottom: 0;
+  box-sizing: border-box;
+  height: $announcement-bar-height;
+  left: 0;
+  margin-bottom: -$announcement-bar-height;
+  opacity: 0;
+  padding: $unit * 4;
+  position: absolute;
+  right: 0;
+  transition: all .8s;
+  width: $announcement-bar-width;
+  z-index: $layer-1;
+
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    padding:0;
+    width: auto;
+    transition: opacity .8s;
+    visibility: hidden;
+  }
+
   img, p {
     float: left;
+
+    @include respond-to('mobile') {
+      float: none;
+    }
   }
 
   img {
@@ -65,33 +118,57 @@ $announcement-bar-width: 752px;
       box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
       color: $blue-500;
     }
-  }
 
-  /*
+    @include respond-to('mobile') {
-  * Mobile Styles
-  *
-  */
-
-  @include respond-to('mobile') {
-    height: auto;
-    margin: 0;
-    padding: ($unit * 4) ($unit * 6);
-    position: static;
-    text-align: center;
-    width: auto;
-
-    &.shadow-2 {
-      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    }
-
-    img, p {
-      float: none;
-    }
-
-    .button {
       float: none;
       display: block;
       margin-top: $unit * 2;
     }
   }
-}
+
+
+  &.is-visible  {
+    margin-bottom: 0;
+    opacity: 1;
+    z-index: $layer-2;
+
+    @include respond-to('mobile') {
+      position: static;
+      visibility: visible;
+    }
+  }
+}
+
+// NAV BAR
+#{$announcement-bar} nav {
+  bottom: -($unit * 5);
+  color: $blue-grey-500;
+  left: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  z-index: $layer-1;
+
+  button {
+    background: $blue-grey-50;
+    border: none;
+    border-radius: 100px;
+    height: $unit + 4;
+    margin: 0 ($unit / 2);
+    outline: none;
+    overflow: hidden;
+    text-indent: -3000px;
+    width: $unit + 4;
+
+    &.is-selected,
+    &.selected  {
+      background: $blue-grey-100;
+    }
+  }
+}
+
+
+
+
+
+

public/resources/css/module/_api.scss

@@ -63,7 +63,8 @@
   }
 }
 
-.docs-content .h2-api-docs {
+.docs-content .h2-api-docs,
+.docs-content .h2-api-docs:first-of-type {
   font-size: 18px;
   line-height: 24px;
   margin-top: 0;

public/resources/css/module/_banner.scss

@@ -27,5 +27,7 @@
   p, .text-body {
     color: $blue-grey-500;
     font-size: 18px;
+    line-height: 32px;
+    margin: 0;
   }
 }

public/resources/css/module/_card.scss

@@ -1,3 +1,11 @@
+/*
+* Hover Cards
+*
+* Hover cards used to display important sections with
+* additional information and allow for users to click
+* on the entire card to initiate action.
+*/
+
 .card {
   background: $white;
   border-radius: 4px;
@@ -34,7 +42,7 @@
 
 
   h2 {
-    color: $blue-grey-600;
+    color: $blue-grey-500;
     font-size: 20px;
     font-weight: 400;
     line-height: $unit * 3;

public/resources/css/module/_code-box.scss

@@ -11,7 +11,7 @@
 */
 
 $codebox-anti-pattern-color: $red-700;
-$codebox-primary-color: $blue-600;
+$codebox-primary-color: $blue-700;
 $codebox-selected: $white;
 
 
@@ -48,12 +48,13 @@ $codebox-selected: $white;
     line-height: $unit * 3;
     margin: 0;
     outline: none;
+    opacity: 1;
     padding: 0 0 $unit $unit;
     text-transform: none;
   }
 
   nav button {
-    background: $blue-400;
+    background: $blue-600;
     border-radius: 2px 2px 0 0;
     color: $white;
     font-size: 13px;

public/resources/css/module/_code.scss

@@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700;
   }
   .str,
   .atv {
-    color: $teal-600;
+    color: $teal-700;
   }
   .atn {
-    color: $teal-600;
+    color: $teal-700;
   }
   .com {
-    color: $teal-600;
+    color: $teal-700;
   }
   .lit {
-    color: $teal-600;
+    color: $teal-700;
   }
   .pun {
     color: $blue-grey-700;
@@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700;
     color: $blue-grey-700;
   }
   .dec {
-    color: $teal-600;
+    color: $teal-700;
   }
 
 
@@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700;
     }
     .str,
     .atv {
-      color: $teal-600;
+      color: $teal-700;
     }
     .atn {
-      color: $teal-600;
+      color: $teal-700;
     }
     .com {
-      color: $teal-600;
+      color: $teal-700;
     }
     .lit {
-      color: $teal-600;
+      color: $teal-700;
     }
     .pun {
       color: $blue-grey-700;
@@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700;
       color: $blue-grey-700;
     }
     .dec {
-      color: $teal-600;
+      color: $teal-700;
     }
   }
 }

public/resources/css/module/_hero.scss

@@ -30,7 +30,6 @@
     float: left;
     line-height: 48px;
     margin: 0 $unit 0 0;
-    opacity: .87;
     text-transform: uppercase;
 
     &.is-standard-case {
@@ -43,7 +42,6 @@
     font-weight: 400;
     line-height: $unit * 3;
     margin: 0;
-    opacity: .87;
     text-transform: uppercase;
   }
 
@@ -113,73 +111,4 @@
       }
     }
   }
-
+}
-
-
-
-  /*
-  * Badges
-  */
-
-  .hero-title-with-badges {
-    margin-bottom: $unit;
-  }
-  .status-circle {
-    margin-right: 4px;
-    border-radius: 50%;
-    width: 10px;
-    height: 10px;
-    display: inline-block;
-  }
-  // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
-  .status-deprecated {
-    background: #E53935;
-  }
-  .status-stable {
-    background: #558b2f;
-  }
-  .status-experimental {
-    background: #9575cd;
-  }
-
-
-  .badges {
-    display: flex;
-    justify-content: flex-start;
-    align-content: space-around;
-    align-items: center;
-
-    margin-top: 4px;
-
-    .status-badge {
-      color: #0143A3;
-      margin-left: 4px;
-      padding-left: 8px;
-      padding-right: 8px;
-      background-color: rgba(255,255,255,0.5);
-      border-radius: 2px;
-      line-height: 20px;
-      display: inline-block;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
-    .security-risk-badge {
-      background-color: #FFF59D;
-    }
-  }
-
-  @media screen and (max-width: 599px) {
-    /* three items */
-    .badges .status-badge:nth-child(3) {
-      margin-left: 0;
-      margin-top: 4px;
-    }
-
-    .hero-title-with-badges {
-      margin-bottom: $unit * 2;
-    }
-  }
-}

public/resources/css/module/_home-promos.scss

@@ -12,7 +12,6 @@
   h3.text-headline {
     font-size: 28px;
     margin-top: 10px;
-    color: #37474F;
   }
 
   .promo-image-container, .text-container {

public/resources/css/module/_lists.scss

@@ -15,7 +15,7 @@
   margin-top: $unit * 6;
 
   h4 {
-    color: $blue-grey-400;
+    color: $blue-grey-500;
     font-size: 14px;
     font-weight: 400;
     line-height: $unit * 4;

public/resources/css/module/_side-nav.scss

@@ -10,10 +10,10 @@
 */
 
 $sidenav: '.sidenav'; // Classname
-$sidenav-background: $blue-grey-50;
+$sidenav-background: rgba($blue-grey-50, .56);
 $sidenav-background-dark: $blue-grey-200;
-$sidenav-color: $blue-grey-400;
+$sidenav-color: $blue-grey-500;
-$sidenav-color-selected: $blue-600;
+$sidenav-color-selected: $blue-700;
 $sidenav-width: 240px;
 
 
@@ -191,7 +191,7 @@ $sidenav-width: 240px;
       position: relative;
 
       &.is-selected {
-        background: rgba($blue-grey-100, .56);
+        background: rgba($blue-grey-100, .24);
         color: $sidenav-color-selected;
         font-weight: 600;
       }

public/resources/css/module/_table.scss

@@ -1,6 +1,6 @@
 table {
   margin-bottom: $unit * 4;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
   border-radius: 2px;
   background: $snow;
 
@@ -10,8 +10,8 @@ table {
 
   thead {
     th {
-      background: $mist;
+      background: rgba($blue-grey-50, .24);
-      border-bottom: 1px solid $mist;
+      border-bottom: 1px solid $blue-grey-50;
       color: $metal;
       font-size: 12px;
       font-weight: 600;
@@ -24,21 +24,16 @@ table {
   tbody {
     th,
     td {
-      border-bottom: 1px solid $mist;
+      border-bottom: 1px solid $blue-grey-50;
-      color: $platinum;
       padding: ($unit * 2) ($unit * 4);
       text-align: left;
     }
 
     th {
-      background: rgba($mist, .24);
+      background: rgba($blue-grey-50, .24);
-      border-right: 1px solid $mist;
+      border-right: 1px solid $blue-grey-50;
       font-weight: 600;
       max-width: 100px;
-
-      a {
-        color: $blueberry;
-      }
     }
 
     tr:last-child td {

public/resources/js/directives/announcement-bar.js

@@ -0,0 +1,72 @@
+/*eslint no-unused-vars: "angularIO" */
+
+/*
+* Announcement Bar Banner Directive
+*
+* A rotating announcement banners used to display
+* important updates and news.
+*/
+
+angularIO.directive('announcementBar', ['$interval', function($interval) {
+  return {
+    restrict: 'E',
+    scope: {},
+    transclude: true,
+    replace: true,
+    template:
+      '<div class="announcement-bar">' +
+        '<div class="announcement-bar-slides" ng-transclude></div>' +
+        '<nav class="announcement-bar-nav">'+
+          '<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
+        '</nav>' +
+      '</div>',
+
+    link: function(scope, element, attrs) {
+      // REGISTER ELEMENTS
+      scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
+      var slideLenth = scope.slides.length;
+
+      // SHOW FIRST SLIDE
+      scope.currentSlide = 0;
+      angular.element(scope.slides[0]).addClass('is-visible');
+
+
+      /*
+      * Change Slide Using Nav
+      *
+      */
+
+      scope.changeSlide = function(event, slideNum) {
+        // CANCEL TIMEOUT AND CHANGE SLIDE
+        $interval.cancel(scope.timeoutId)
+        scope.slides.removeClass('is-visible');
+        angular.element(scope.slides[slideNum]).addClass('is-visible');
+        scope.currentSlide = slideNum;
+      };
+
+
+      /*
+      * Start Slideshow Cyle
+      *
+      */
+
+      scope.timeoutId = $interval(function() {
+        // INCREMENT
+        scope.currentSlide = scope.currentSlide + 1;
+
+        // HIDE ALL SLIDES
+        scope.slides.removeClass('is-visible');
+
+        // RESET ON LAST SLIDE
+        if((scope.currentSlide) > (slideLenth - 1))  {
+          scope.currentSlide = 0;
+        }
+
+        // SHOW SLIDE
+        angular.element(scope.slides[scope.currentSlide]).addClass('is-visible');
+      }, 5000);
+    }
+  };
+}]);
+
+