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.
This commit is contained in:
Zhicheng Wang 2016-04-21 22:48:35 +08:00
commit 41d9204727
14 changed files with 139 additions and 30 deletions

View File

@ -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"

View File

@ -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")

View File

@ -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 -->

View File

@ -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(

View File

@ -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) {

View File

@ -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.

View File

@ -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:

View File

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

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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
*

View File

@ -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) $}

View File

@ -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 $}

View File

@ -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.