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:
commit
41d9204727
|
@ -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"
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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:
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
*
|
||||
|
|
|
@ -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) $}
|
||||
|
||||
|
|
|
@ -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 $}
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue