Merge branch 'master' of github.com:angular/angular.io

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

harp.json

@@ -188,7 +188,7 @@
       "hansl": {
         "name": "Hans Larsen",
         "picture": "/resources/images/bios/hansl.jpg",
-        "twitter": "hanselatwork",
+        "twitter": "hanslatwork",
         "website": "http://www.codingatwork.com/",
         "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular2, using Material Design components and the CLI tool.",
         "type": "Google"

public/_includes/_hero.jade

@@ -8,7 +8,7 @@ if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  span(class="hero-title-with-badges" layout="row" layout-align="start center")
+  span(class="hero-title-with-badges" layout="row" layout-xs="column" layout-align="start center" layout-align-xs="start start")
     h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
     if useBadges
       span(class="badges")

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

@@ -259,7 +259,8 @@ Property bound: <img [src]="heroImageUrl">
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
      [class]="badCurly">Bad curly</div>
-     <!-- Doesn't work, due to github.com/angular/angular/issues/6901 -->
+<p><b>Note:</b> "Bad curly" should be smaller but isn't, due to
+  <a href="http://github.com/angular/angular/issues/6901">issue #6901</a>.</p>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->

public/docs/_examples/toh-5/ts/app/hero-detail.component.ts

@@ -2,7 +2,7 @@
 // #docregion
 // #docregion v2
 // #docregion import-oninit
-import { Component, Input, OnInit } from 'angular2/core';
+import { Component, OnInit } from 'angular2/core';
 // #enddocregion import-oninit
 // #docregion import-route-params
 import { RouteParams } from 'angular2/router';
@@ -27,7 +27,7 @@ import { HeroService } from './hero.service';
 // #docregion implement
 export class HeroDetailComponent implements OnInit {
 // #enddocregion implement
-  @Input() hero: Hero;
+  hero: Hero;
 
 // #docregion ctor
   constructor(

public/docs/_examples/tutorial/ts/app/hero-detail.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from 'angular2/core';
+import {Component, OnInit} from 'angular2/core';
 import {RouteParams} from 'angular2/router';
 
 import {Hero} from './hero';
@@ -10,7 +10,7 @@ import {HeroService} from './hero.service';
   styleUrls: ['app/hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
-  @Input() hero: Hero;
+  hero: Hero;
 
   constructor(private _heroService: HeroService,
     private _routeParams: RouteParams) {

public/docs/ts/latest/guide/component-styles.jade

@@ -8,7 +8,7 @@ include ../_util-fns
   On top of this, Angular has the ability to bundle *component styles*
   with our components enabling a more modular design than regular stylesheets.
   
-  In this chapter we how to load and apply these *component styles*.
+  In this chapter we learn how to load and apply these *component styles*.
   
   # Table Of Contents
 
@@ -176,7 +176,7 @@ a(id='loading-styles')
     `styles: [require('my.component.css')]`
 
     We set the `styles` property, **not** `styleUrls` property! The module bundler is loading the CSS strings, not Angular. 
-    Angular only sees the CSS strings *after* the bundler loaded them. To Angular it is as if
+    Angular only sees the CSS strings *after* the bundler loads them. To Angular it is as if
     we wrote the `styles` array by hand. 
     Refer to the module bundler's documentation for information on loading CSS in this manner.
   

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

@@ -974,7 +974,7 @@ code-example(format="").
 +makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts', null, 'app/js/phone_list/phone_list.module.ts')
 
 :marked
-  Finally, we can now pull everything together in `app.module.ts`. It here we'll
+  Finally, we can now pull everything together in `app.module.ts`. We'll
   import each of the three submodule files and register them as dependencies
   of the main application module:
   

public/resources/css/base/_type.scss

@@ -110,9 +110,7 @@ p code {
     opacity: 0.87;
   }
   h2 {
-    font-size: 15px;
+    font-size: 20px;
-    text-transform: uppercase;
-    color: #78909C;
   }
   h3 {
     font-size: 16px;

public/resources/css/module/_api.scss

@@ -76,6 +76,32 @@ input.api-filter {
 }
 
 .docs-content {
+  .anchor-offset {
+    display: block;
+    position: relative;
+    top: -250px;
+    visibility: hidden;
+  }
+
+  .anchor-focused {
+    background-color: transparent !important;
+
+    -moz-animation: fade 1s linear; /* Firefox */
+    -webkit-animation: fade 1s linear; /* Safari and Chrome */
+    -o-animation: fade 1s linear; /* Opera */
+    animation: fade 1s linear;
+  }
+
+  @keyframes fade {
+    0% { background-color: $sunshine }
+  }
+
+  .h2-api-docs {
+    font-size: 15px !important;
+    text-transform: uppercase !important;
+    color: #78909C !important;
+  }
+
   .api-list {
     list-style: none;
     padding: 0 0 ($unit * 4);
@@ -113,7 +139,7 @@ input.api-filter {
     color: #1a2326;
 
     &.selector {
-      margin: 0 0 8px 0;
+      margin: 0;
     }
 
     &.location-badge {
@@ -155,6 +181,32 @@ input.api-filter {
     padding: 0;
   }
 
+  .no-bg-with-indent {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 16px;
+    margin-top: 6px;
+    margin-bottom: 0;
+    background: none;
+  }
+
+  .code-background {
+    padding: 0 5px 0;
+
+    span.pln {
+      color: #1E88E5 !important;
+    }
+  }
+
+  .code-anchor {
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   code {
     font-size: 14px;
     color: #1a2326;

public/resources/css/module/_hero.scss

@@ -37,7 +37,7 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
     padding-top: 40px;
 
     .badges {
-      margin-top: 48px;
+      margin-top: $unit * 6;
     }
   }
 
@@ -65,6 +65,21 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
       border-radius: 2px;
       line-height: 20px;
       display: inline-block;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @media screen and (max-width: 599px) {
+    .badges {
+      margin-top: $unit;
+      padding-left: 0;
+    }
+
+    .hero-title-with-badges {
+      margin-bottom: $unit * 2;
     }
   }
 

public/resources/js/controllers/app-controller.js

@@ -34,6 +34,13 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
     userfeedback.api.startFeedback(configuration);
   };
 
+  // URL hash keeps track of which method the user wants to view in the API doc.
+  // Refer to _api.scss (.anchor-focused) and class.template.html (where ng-class is used) for details.
+  vm.isApiDocMemberFocused = function(memberName) {
+    var apiDocFocusedMember = window.location.hash.replace('#!#', '').replace('-anchor', '');
+    return apiDocFocusedMember === memberName;
+  };
+
   /*
    * Prettify Code
    *

tools/api-builder/angular.io-package/templates/class.template.html

@@ -7,7 +7,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 What it does
+    h2(class="h2-api-docs") What it does
   div(flex="80" flex-xs="100")
     :marked
     {%- if doc.whatItDoes %}
@@ -18,7 +18,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 How to use
+    h2(class="h2-api-docs") How to use
   div(flex="80" flex-xs="100")
     :marked
     {%- if doc.howToUse %}
@@ -27,12 +27,46 @@ include {$ relativePath(doc.path, '_util-fns') $}
       *Not yet documented*
     {% endif %}
 
+.div(class="row-margin" layout="row" layout-xs="column")
+  div(flex="20" flex-xs="100")
+    h2(class="h2-api-docs") Class Overview
+  div(flex="80" flex-xs="100")
+    code.no-bg class {$ doc.name $} {
+
+    {% if doc.statics.length %}
+    .div(layout="column")
+      {% for member in doc.statics %}{% if not member.internal %}
+        pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
+          a(class="code-anchor" href="#{$ member.name $}-anchor")
+            code(class="code-background") {$ member.name | indent(6, false) | trim $}
+          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+      {% endif %}{% endfor %}
+    {% endif %}
+    {% if doc.constructorDoc.name %}
+    .div(layout="column")
+      pre(class="prettyprint no-bg-with-indent")
+        a(class="code-anchor" href="#constructor")
+          code(class="code-background") {$ doc.constructorDoc.name $}
+        code {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+    {% endif %}
+    {% if doc.members.length %}
+    .div(layout="column")
+      {% for member in doc.members %}{% if not member.internal %}
+        pre(class="prettyprint no-bg-with-indent")
+          a(class="code-anchor" href="#{$ member.name $}-anchor")
+            code(class="code-background") {$ member.name | indent(6, false) | trim $}
+          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+      {% endif %}{% endfor %}
+    {% endif %}
+    p.selector
+      code.no-bg }
+
 {% block additional %}
 {% endblock %}
 
 .div(class="row-margin" layout="row" layout-xs="column")
   div(flex="20" flex-xs="100")
-    h2 Class Description
+    h2(class="h2-api-docs") Class Description
   div(class="class-description-content" flex="80" flex-xs="100")
     :marked
     {%- if doc.description.length > 2 %}
@@ -43,7 +77,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Class Export
+    h2(class="h2-api-docs") Class Export
   div(flex="80" flex-xs="100")
     pre.prettyprint.no-bg
       code.no-pln.
@@ -53,7 +87,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 {% block annotations %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Annotations
+    h2(class="h2-api-docs") Annotations
   div(flex="80" flex-xs="100")
     {%- for decorator in doc.decorators %}
       pre.prettyprint.no-bg
@@ -72,9 +106,10 @@ include {$ relativePath(doc.path, '_util-fns') $}
 {%- if doc.constructorDoc and not doc.constructorDoc.internal %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Constructor
+    h2(class="h2-api-docs") Constructor
   div(flex="80" flex-xs="100")
-    pre.prettyprint.no-bg
+    a(name="constructor" class="anchor-offset")
+    pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }")
       code.
         {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
     :marked
@@ -88,7 +123,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 {% if doc.statics.length %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Static Members
+    h2(class="h2-api-docs") Static Members
   div(flex="80" flex-xs="100")
   {% for member in doc.statics %}{% if not member.internal %}
     pre.prettyprint.no-bg
@@ -111,10 +146,11 @@ include {$ relativePath(doc.path, '_util-fns') $}
 {% if doc.members.length %}
 .div(layout="row" layout-xs="column" class="instance-members" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Instance Members
+    h2(class="h2-api-docs") Class Details
   div(flex="80" flex-xs="100")
     {% for member in doc.members %}{% if not member.internal %}
-    pre.prettyprint.no-bg
+    a(name="{$ member.name $}-anchor" class="anchor-offset")
+    pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
       code.
         {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 

tools/api-builder/angular.io-package/templates/directive.template.html

@@ -10,7 +10,7 @@
 {%- if doc.directiveOptions.selector.split(',').length %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Selectors
+    h2(class="h2-api-docs") Selectors
   div(flex="80" flex-xs="100")
     {% for selector in doc.directiveOptions.selector.split(',') %}
     p.selector
@@ -21,7 +21,7 @@
 {% if doc.outputs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Outputs
+    h2(class="h2-api-docs") Outputs
   div(flex="80" flex-xs="100")
   {% for binding, property in doc.outputs %}
     div(class="code-margin")
@@ -36,7 +36,7 @@
 {% if doc.inputs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Inputs
+    h2(class="h2-api-docs") Inputs
   div(flex="80" flex-xs="100")
     {% for binding, property in doc.inputs %}
     div(class="code-margin")
@@ -51,7 +51,7 @@
 {%- if doc.directiveOptions.exportAs %}
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Exported as
+    h2(class="h2-api-docs") Exported as
   div(flex="80" flex-xs="100")
     p.input
       code {$ doc.directiveOptions.exportAs $}

tools/api-builder/angular.io-package/templates/var.template.html

@@ -7,7 +7,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
 .div(layout="row" layout-xs="column" class="row-margin")
   div(flex="20" flex-xs="100")
-    h2 Variable Export
+    h2(class="h2-api-docs") Variable Export
   div(flex="80" flex-xs="100")
     pre.prettyprint.no-bg
       code.