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

# Conflicts:
#	public/docs/ts/latest/tutorial/toh-pt5.jade

public/_includes/_hero.jade

@@ -1,14 +1,28 @@
-- var textFormat = ''
+// Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates
+- var textFormat = '';
 - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : '');
-
+- var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
+- var useBadges = docType || stability;
+  
 if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+  span(class="hero-title-with-badges" layout="row" layout-align="start center")
+    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
+    if useBadges
+      span(class="badges")
+        if docType
+          span(class="status-badge").
+            #{capitalize(docType)}
+        if stability
+          span(layout="row" class="status-badge")
+            // badge circle is filled based on stability by matching a css selector in _hero.scss
+            span(class="status-circle status-#{stability}")
+            span Stability: #{capitalize(stability)}
 
   if subtitle
     h2.hero-subtitle.text-subhead #{subtitle}
 
   else if current.path[0] == "docs"
-    != partial("_version-dropdown")
+    != partial("_version-dropdown")

public/docs/dart/latest/tutorial/toh-pt5-NEW.jade

@@ -445,7 +445,7 @@ code-example(format='').
     :marked
         Going back too far could take us out of the application.
         That's acceptable in a demo. We'd guard against it in a real application,
-        perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html).
+        perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
 :marked
     Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
 +makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".")

public/docs/ts/latest/guide/dependency-injection.jade

@@ -534,7 +534,7 @@ code-example(format, language="html").
 - var loggerlike = lang == 'dart' ? '' : 'We could provide a logger-like object. '
 :marked
   The `providers` array appears to hold a service class.
-  In reality it holds an instance of the [Provider](/docs/ts/latest/api/core/Provider-class.html) class that can create that service.
+  In reality it holds an instance of the [Provider](../api/core/Provider-class.html) class that can create that service.
 
   There are many ways to *provide* something that #{implements} `Logger`.
   The `Logger` class itself is an obvious and natural provider — it has the right shape and it's designed to be created.
@@ -563,13 +563,13 @@ code-example(format, language="html").
 // #docregion providers-provide-2
 :marked
   This is actually a short-hand expression for a provider registration that creates a new instance of the
-  [Provider](/docs/ts/latest/api/core/Provider-class.html) class.
+  [Provider](../api/core/Provider-class.html) class.
 // #enddocregion providers-provide-2
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-2')
 // #docregion providers-provide-3
 // Skip for Dart, where the provide() function won't pass type checking.
 :marked
-  The [provide](/docs/ts/latest/api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
+  The [provide](../api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
 // #enddocregion providers-provide-3
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
 // #docregion providers-provide-4-1
@@ -802,7 +802,7 @@ code-example(format, language="html").
 // #docregion tokens-opaque-1
 <a id="opaque-token"></a>
 - var lang = current.path[1]
-- var opaquetoken = lang == 'dart' ? '<code>OpaqueToken</code>' : '<a href="/docs/ts/latest/api/core/OpaqueToken-class.html"><code>OpaqueToken</code></a>'
+- var opaquetoken = lang == 'dart' ? '<code>OpaqueToken</code>' : '<a href="../api/core/OpaqueToken-class.html"><code>OpaqueToken</code></a>'
 h3 OpaqueToken
 p.
   The solution is to define and use an !{opaquetoken}.

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

@@ -200,7 +200,7 @@ code-example(format="").
   **We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
 
   The `container`,`form-group`, `form-control`, and `btn` classes 
-  come from [Twitter Boostrap](http://getbootstrap.com/css/). Purely cosmetic.
+  come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic.
   We're using Bootstrap to gussy up our form.
   Hey, what's a form without a little style!
 
@@ -477,7 +477,7 @@ figure.image-display
 .l-sub-section
   :marked
     Why "ngForm"? 
-    A directive's [exportAs](/docs/ts/latest/api/core/DirectiveMetadata-class.html#!#exportAs) property 
+    A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property 
     tells Angular how to link local variable to the directive.
     We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
     

public/docs/ts/latest/guide/lifecycle-hooks.jade

@@ -467,7 +467,7 @@ figure.image-display
 .l-sub-section
   :marked
     We see also that the `ngOnChanges` method is called in contradiction of the 
-    [incorrect API documentation](/docs/ts/latest/api/core/DoCheck-interface.html).
+    [incorrect API documentation](../api/core/DoCheck-interface.html).
 
 .l-main-section
 :marked

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

@@ -533,8 +533,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](/docs/ts/latest/api/core/ViewChild-var.html) and
+    [viewChild](../api/core/ViewChild-var.html) and
-    [contentChild](/docs/ts/latest/api/core/ContentChild-var.html).
+    [contentChild](../api/core/ContentChild-var.html).
 // #enddocregion property-binding-6
 
 // TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
@@ -829,7 +829,7 @@ code-example(format="", language="html").
   <a id="custom-event"></a>
   ### Custom events with EventEmitter
 
-  Directives typically raise custom events with an Angular [EventEmitter](/docs/ts/latest/api/core/EventEmitter-class.html).
+  Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html).
   A directive creates an `EventEmitter` and exposes it as a property.
   The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
   Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -1224,7 +1224,7 @@ figure.image-display
 // #docregion directives-ngFor-7
 .l-sub-section
   :marked
-    Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](/docs/ts/latest/api/common/NgFor-directive.html).
+    Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html).
 // #enddocregion directives-ngFor-7
 
 // #docregion directives-ngForTrackBy-1

public/docs/ts/latest/testing/application-under-test.jade

@@ -3,7 +3,7 @@ include ../_util-fns
 :marked
   We’ll need an Angular application to test, one as simple as possible while having most of the angular features we want to test.
 
-  What better app than our own [The Tour of Heroes](../tutorial/toh-pt5)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there.
+  What better app than our own [The Tour of Heroes](../tutorial/toh-pt5.html)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there.
   
   We might end up modifying it a bit, because it doesn't have everything we want to test, but it's the perfect starting point.
   

public/docs/ts/latest/tutorial/toh-pt5.jade

@@ -752,7 +752,7 @@ code-example(format='').
  :marked
    Going back too far could take us out of the application. 
    That's acceptable in a demo. We'd guard against it in a real application,
-   perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html).
+   perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
    
    回退太多步儿会离开我们的应用。
    在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。

public/news.jade

@@ -5,6 +5,19 @@
   .clear
 
 .grid-fluid
+  .c6
+    .article-card
+      .date April 19, 2016
+      .title
+        a(
+        target="_blank"
+        href="https://angularjs.blogspot.com/2016/04/angular-2-react-native.html"
+        ) Angular 2 + React Native
+      p The Angular 2 and React Native story started last summer [...] we are now pleased to share a library to build your own React Native applications with Angular 2 for iOS and Android...
+      .author
+        img(src="/resources/images/bios/marclaval.jpg")
+        .posted Guest posted by <b>Marc Laval</b>
+
   .c6
     .article-card
       .date March 30, 2016
@@ -18,19 +31,7 @@
       .author
         img(src="/resources/images/bios/shield-bio-placeholder.png")
         .posted Guest posted by <b>Nathan Walker</b>
-  .c6
+ 
-    .article-card
-      .date March 16, 2016
-      .title
-        a(
-        target="_blank"
-        href="https://angularjs.blogspot.com/2016/03/angular-material-2-alpha-preview.html"
-        ) Angular Material 2: Alpha preview!
-      p On Tuesday, we released angular2-material alpha.0 - titanium-octopus, kicking off the public availability of the initial set of Angular Material 2 components. What is Angular Material? The goal of the Angular Material...
-      .author
-        img(src="/resources/images/bios/jelbourn.jpg")
-        .posted Posted by <b>Jeremy Elbourn</b>
-
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
     h3.text-headline.text-uppercase  Developer Community
@@ -62,6 +63,19 @@
         img(src="/resources/images/bios/shield-bio-placeholder.png")
         .posted Posted by <b>Ekaterina Prigara</b>
 .grid-fluid
+  .c6
+    .article-card
+      .date April 5, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://m12.io/blog/we-launched-angular-2-project"
+        ) After six months of development we launched on Angular 2
+      p This article is about why and how we came up with the idea of using Angular 2 as a foundation for our web project [...]. Hopefully, for some of us, it will serve as an encouragement...
+      .author
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>Marcin Ryzycki</b>
+          
   .c6
     .article-card
       .date March 21, 2016
@@ -74,19 +88,6 @@
       .author
         img(src="/resources/images/bios/pascalprecht.jpg")
         .posted Posted by <b>Pascal Precht</b>
-
-  .c6
-    .article-card
-      .date March 21, 2016
-      .title
-        a(
-        target="_blank"
-        href="https://www.mediacurrent.com/blog/blog-series-weather-underground-angular-2-introduction"
-        ) Building Wunderground.com with Drupal & Angular 2: An Introduction
-      p For the wunderground.com project, our mandate was to use the same Drupal 7 platform originally built for weather.com. [...] instead of starting a new project using Angular 1...
-      .author
-        img(src="/resources/images/bios/shield-bio-placeholder.png")
-        .posted Posted by <b>Matt Davis</b>
           
 
 .grid-fluid.l-space-bottom-2.l-space-top-4

public/resources/css/module/_dropdown.scss

@@ -5,19 +5,30 @@
   .dropdown-button {
     background: rgba($snow, .1);
     border: none;
+    border-radius: 3px;
     text-transform: none;
     font-weight: normal;
+    font-size: 14px;
     line-height: $unit * 4;
     padding: 0px ($unit * 4) 0px ($unit * 2);
+    margin: (1.25 * $unit) 0;
     cursor: pointer;
     position: relative;
     z-index: $layer-1;
     opacity: 0.87;
+    letter-spacing: .010em;
+    min-height:4.5 * $unit;
+    white-space:nowrap;
+    -webkit-font-smoothing:antialiased;
+    -webkit-user-select:none;
 
     .icon {
       position: absolute;
-      top: 5px;
+      top: 50%;
       right: $unit;
+      -ms-transform: translateY(-50%);
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%);
       z-index: $layer-1;
       font-size: 20px;
       opacity: .87;
@@ -28,7 +39,7 @@
     background: $snow;
     box-shadow: 0px 2px 5px rgba($coal, .3);
     position: absolute;
-    top: 0px;
+    top: 1.25 * $unit;
     left: 0px;
     z-index: $layer-5;
     display: none;

public/resources/css/module/_example-title.scss

@@ -9,7 +9,7 @@
   background: #1976D2;
   box-shadow: none;
   // temporary hack to remove space between example title and code-example
-  margin-bottom: -18px;
+  margin-bottom: -5px;
   z-index: 1;
   position: relative;
   border-bottom-right-radius: 0;

public/resources/css/module/_hero.scss

@@ -1,15 +1,44 @@
-$hero-padding: ($unit * 10) ($unit * 6) ($unit * 5);
+$hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
 
 .hero {
   position: relative;
   padding: $hero-padding;
-  height: $unit * 8;
+  height: $unit * 10;
+
+  .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;
+  }
 
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
     height: auto;
     padding-top: 40px;
+
+    .badges {
+      margin-top: 48px;
+    }
   }
 
   &.is-large {
@@ -24,7 +53,28 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 5);
     }
   }
 
+  .badges {
+    padding-left: 8px;
+
+    .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;
+    }
+  }
+
+  button {
+    // Override md-button from angular material to align language select with hero title.
+    margin: 0 !important;
+  }
+
   .hero-title {
+    display: inline; // title will be inline with badges
     text-transform: uppercase;
     margin: 0;
     opacity: .87;
@@ -93,4 +143,4 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 5);
       display: block;
     }
   }
-}
+}

tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js

@@ -58,12 +58,32 @@ module.exports = function addJadeDataDocsProcessor() {
           // GET DATA FOR EACH PAGE (CLASS, VARS, FUNCTIONS)
           var modulePageInfo  = _(doc.exports)
           .map(function(exportDoc) {
+
+            // STABILITY STATUS
+            // Supported tags:
+            // @stable
+            // @experimental
+            // @deprecated
+            // Default is the empty string (no badge)
+            // Do not capitalize the strings, they are intended for use in constructing a css class from _hero.scss
+            // and used in _hero.jade
+            var stability = '';
+            if (_.has(exportDoc, 'stable')) {
+              stability = 'stable';
+            } else if (_.has(exportDoc, 'experimental')) {
+              stability = 'experimental';
+            } else if (_.has(exportDoc, 'deprecated')) {
+              stability = 'deprecated';
+            }
+
             var dataDoc = {
               name: exportDoc.name + '-' + exportDoc.docType,
               title: exportDoc.name,
               docType: exportDoc.docType,
-              exportDoc: exportDoc
+              exportDoc: exportDoc,
+              stability: stability
             };
+
             if (exportDoc.symbolTypeName) dataDoc.varType = titleCase(exportDoc.symbolTypeName);
             if (exportDoc.originalModule) dataDoc.originalModule = exportDoc.originalModule;
             return dataDoc;

tools/api-builder/angular.io-package/tag-defs/docsNotRequired.js

@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'docsNotRequired'
+  };
+};

tools/api-builder/angular.io-package/tag-defs/experimental.js

@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'experimental'
+  };
+};

tools/api-builder/angular.io-package/tag-defs/index.js

@@ -2,5 +2,8 @@ module.exports = [
   require('./deprecated'),
   require('./howToUse'),
   require('./whatItDoes'),
-  require('./internal')
+  require('./internal'),
+  require('./stable'),
+  require('./experimental'),
+  require('./docsNotRequired'),
 ];

tools/api-builder/angular.io-package/tag-defs/stable.js

@@ -0,0 +1,5 @@
+module.exports = function() {
+  return {
+    name: 'stable'
+  };
+};

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

@@ -1,3 +1,4 @@
+{# Use this document to generate the _data.json files for harp.js. This acts as the link between dgeni, jade, and harp #}
 {
 {%- for item in doc.data %}
   "{$ item.name $}" : {
@@ -11,6 +12,9 @@
     {%- if item.originalModule %}
     "originalModule" : "{$ item.originalModule $}",
     {%- endif %}
+    {%- if item.stability %}
+    "stability" : "{$ item.stability $}",
+    {%- endif %}
     "docType": "{$ item.docType $}"
   }{% if not loop.last %},{% endif %}
 {% endfor -%}

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

@@ -4,20 +4,23 @@
 
 {% block body %}
 include {$ relativePath(doc.path, '_util-fns') $}
-.l-main-section
+
-  h2(class="variable export")
+.div(layout="row" layout-xs="column" class="row-margin")
-    pre.prettyprint
+  div(flex="20" flex-xs="100")
+    h2 Variable Export
+  div(flex="80" flex-xs="100")
+    pre.prettyprint.no-bg
       code.
         export {$ doc.name $}{$ returnType(doc.returnType) $}
 
-  p.location-badge.
+p.location-badge.
-    exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
-    defined in {$ githubViewLink(doc) $}
+  defined in {$ githubViewLink(doc) $}
 
-  :marked
+:marked
 {%- if doc.notYetDocumented %}
     *Not Yet Documented*
 {% else %}
-{$ doc.description | indentForMarkdown(4) | trimBlankLines $}
+{$ doc.description | indentForMarkdown(2) | trimBlankLines $}
 {% endif -%}
 {% endblock %}