Merge branch 'master' of github.com:angular/angular.io
# Conflicts: # public/docs/ts/latest/tutorial/toh-pt5.jade
This commit is contained in:
Zhicheng Wang
commit
b007e835db
|
|
@ -1,11 +1,25 @@
|
|||
- 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")
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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=".")
|
||||
|
|
|
|||
|
|
@ -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}.
|
||||
|
|
|
|||
|
|
@ -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".
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[contentChild](/docs/ts/latest/api/core/ContentChild-var.html).
|
||||
[viewChild](../api/core/ViewChild-var.html) and
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
|
||||
|
|
|
|||
|
|
@ -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,18 +31,6 @@
|
|||
.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
|
||||
|
|
@ -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
|
||||
|
|
@ -75,19 +89,6 @@
|
|||
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
|
||||
.c12.text-center
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = function() {
|
||||
return {
|
||||
name: 'docsNotRequired'
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = function() {
|
||||
return {
|
||||
name: 'experimental'
|
||||
};
|
||||
};
|
||||
|
|
@ -2,5 +2,8 @@ module.exports = [
|
|||
require('./deprecated'),
|
||||
require('./howToUse'),
|
||||
require('./whatItDoes'),
|
||||
require('./internal')
|
||||
require('./internal'),
|
||||
require('./stable'),
|
||||
require('./experimental'),
|
||||
require('./docsNotRequired'),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = function() {
|
||||
return {
|
||||
name: 'stable'
|
||||
};
|
||||
};
|
||||
|
|
@ -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 -%}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
|
||||
{% block body %}
|
||||
include {$ relativePath(doc.path, '_util-fns') $}
|
||||
.l-main-section
|
||||
h2(class="variable export")
|
||||
pre.prettyprint
|
||||
|
||||
.div(layout="row" layout-xs="column" class="row-margin")
|
||||
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) $}
|
||||
|
||||
|
|
@ -18,6 +21,6 @@ include {$ relativePath(doc.path, '_util-fns') $}
|
|||
{%- if doc.notYetDocumented %}
|
||||
*Not Yet Documented*
|
||||
{% else %}
|
||||
{$ doc.description | indentForMarkdown(4) | trimBlankLines $}
|
||||
{$ doc.description | indentForMarkdown(2) | trimBlankLines $}
|
||||
{% endif -%}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue