iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): improve heading styles (#40427) 

This commit includes some general improvements to heading styles
(font-weight, margin/padding). It also adds a horizontal separator above
`<h2>` headings to segment important sections more easily.
(As a consequence, we can remove several `<hr />` elements right before
`<h2>` headings.)

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427
This commit is contained in:
George Kalpakas 2021-02-02 14:35:43 +02:00 committed by Misko Hevery
parent 6e42d67c38
commit a086976d68
35 changed files with 36 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
aio/content/guide/aot-metadata-errors.md
View File

@ -15,8 +15,6 @@ The following are metadata errors you may encounter, with explanations and sugge
[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br> [Tagged template expressions are not supported](#tagged-template-expressions-not-supported)<br>
[Symbol reference expected](#symbol-reference-expected)<br> [Symbol reference expected](#symbol-reference-expected)<br>
<hr>
{@a expression-form-not-supported} {@a expression-form-not-supported}
## Expression form not supported ## Expression form not supported
@ -47,8 +45,6 @@ Avoid this error by sticking to the compiler's [restricted expression syntax](gu
when writing Angular metadata when writing Angular metadata
and be wary of new or unusual TypeScript features. and be wary of new or unusual TypeScript features.
<hr>
{@a reference-to-a-local-symbol} {@a reference-to-a-local-symbol}
## Reference to a local (non-exported) symbol ## Reference to a local (non-exported) symbol
@ -128,8 +124,6 @@ The compiler needs the value of the `template` property _right now_ to generate
The variable reference alone is insufficient. The variable reference alone is insufficient.
Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)". Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
<hr>
{@a only-initialized-variables} {@a only-initialized-variables}
## Only initialized variables and constants ## Only initialized variables and constants
@ -187,8 +181,6 @@ export let someTemplate = '<h1>Greetings from Angular</h1>';
export class MyComponent {} export class MyComponent {}
``` ```
<hr>
{@a reference-to-a-non-exported-class} {@a reference-to-a-non-exported-class}
## Reference to a non-exported class ## Reference to a non-exported class
@ -228,7 +220,6 @@ export abstract class MyStrategy { }
] ]
... ...
``` ```
<hr>
{@a reference-to-a-non-exported-function} {@a reference-to-a-non-exported-function}
## Reference to a non-exported function ## Reference to a non-exported function
@ -266,7 +257,6 @@ export function myStrategy() { ... }
] ]
... ...
``` ```
<hr>
{@a function-calls-not-supported} {@a function-calls-not-supported}
## Function calls are not supported ## Function calls are not supported
@ -322,8 +312,6 @@ export function someValueFactory() {
... ...
``` ```
<hr>
{@a destructured-variable-not-supported} {@a destructured-variable-not-supported}
## Destructured variable or constant not supported ## Destructured variable or constant not supported
@ -364,8 +352,6 @@ import { configuration } from './configuration';
... ...
``` ```
<hr>
{@a could-not-resolve-type} {@a could-not-resolve-type}
## Could not resolve type ## Could not resolve type
@ -437,7 +423,6 @@ export class MyComponent {
constructor (@Inject(DOCUMENT) private doc: Document) { ... } constructor (@Inject(DOCUMENT) private doc: Document) { ... }
} }
``` ```
<hr>
{@a name-expected} {@a name-expected}
## Name expected ## Name expected
@ -462,8 +447,6 @@ Change the name of the property to something non-numeric.
provider: [{ provide: Foo, useValue: { '0': 'test' } }] provider: [{ provide: Foo, useValue: { '0': 'test' } }]
``` ```
<hr>
{@a unsupported-enum-member-name} {@a unsupported-enum-member-name}
## Unsupported enum member name ## Unsupported enum member name
@ -494,8 +477,6 @@ enum Colors {
Avoid referring to enums with complicated initializers or computed properties. Avoid referring to enums with complicated initializers or computed properties.
<hr>
{@a tagged-template-expressions-not-supported} {@a tagged-template-expressions-not-supported}
## Tagged template expressions are not supported ## Tagged template expressions are not supported
@ -520,8 +501,6 @@ is a _tag function_ native to JavaScript ES2015.
The AOT compiler does not support tagged template expressions; avoid them in metadata expressions. The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
<hr>
{@a symbol-reference-expected} {@a symbol-reference-expected}
## Symbol reference expected ## Symbol reference expected

7
aio/content/guide/architecture.md
View File

@ -114,13 +114,12 @@ The router interprets a link URL according to your app's view navigation rules a
To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules. To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules.
<div class="alert is-helpful"> <div class="alert is-helpful">
For a more detailed discussion, see [Routing and navigation](guide/router). For a more detailed discussion, see [Routing and navigation](guide/router).
</div> </div>
<hr/>
## What's next ## What's next

9
aio/content/guide/attribute-binding.md
View File

@ -74,10 +74,8 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
</div> </div>
<hr/>
{@a class-binding} {@a class-binding}
## Binding to the `class` attribute ## Binding to the `class` attribute
You can use class binding to add and remove CSS class names from an element's `class` attribute. You can use class binding to add and remove CSS class names from an element's `class` attribute.
@ -159,10 +157,8 @@ The following table summarizes class binding syntax.
</tr> </tr>
</table> </table>
<hr/>
{@a style-binding} {@a style-binding}
## Binding to the style attribute ## Binding to the style attribute
You can use style binding to set styles dynamically. You can use style binding to set styles dynamically.
@ -260,10 +256,7 @@ However, using the above style binding syntax without `NgStyle` is preferred bec
</div> </div>
<hr/>
{@a styling-precedence} {@a styling-precedence}
## Styling Precedence ## Styling Precedence
A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives). A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives).
@ -326,8 +319,6 @@ In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `widt
However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely. However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely.
<hr/>
## Injecting attribute values ## Injecting attribute values
There are cases where you need to differentiate the behavior of a [Component](api/core/Component) or [Directive](api/core/Directive) based on a static value set on the host element as an HTML attribute. For example, you might have a directive that needs to know the `type` of a `<button>` or `<input>` element. There are cases where you need to differentiate the behavior of a [Component](api/core/Component) or [Directive](api/core/Directive) based on a static value set on the host element as an HTML attribute. For example, you might have a directive that needs to know the `type` of a `<button>` or `<input>` element.

3
aio/content/guide/attribute-directives.md
View File

@ -311,10 +311,7 @@ Here's how the harness should work when you're done coding.
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight"> <img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
</div> </div>
<hr />
{@a ngNonBindable} {@a ngNonBindable}
## `ngNonBindable` ## `ngNonBindable`
With the built-in template primitive `ngNonBindable`, Angular won't With the built-in template primitive `ngNonBindable`, Angular won't

22
aio/content/guide/built-in-directives.md
View File

@ -10,10 +10,7 @@ See the <live-example></live-example> for a working example containing the code
For more detail, including how to build your own custom directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). For more detail, including how to build your own custom directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives).
<hr/>
{@a attribute-directives} {@a attribute-directives}
## Built-in attribute directives ## Built-in attribute directives
Attribute directives listen to and modify the behavior of Attribute directives listen to and modify the behavior of
@ -28,10 +25,7 @@ The most common attribute directives are as follows:
* [`NgStyle`](guide/built-in-directives#ngStyle)&mdash;adds and removes a set of HTML styles. * [`NgStyle`](guide/built-in-directives#ngStyle)&mdash;adds and removes a set of HTML styles.
* [`NgModel`](guide/built-in-directives#ngModel)&mdash;adds two-way data binding to an HTML form element. * [`NgModel`](guide/built-in-directives#ngModel)&mdash;adds two-way data binding to an HTML form element.
<hr/>
{@a ngClass} {@a ngClass}
## `NgClass` ## `NgClass`
Add or remove several CSS classes simultaneously with `ngClass`. Add or remove several CSS classes simultaneously with `ngClass`.
@ -62,10 +56,7 @@ both initially and when the dependent properties change.
</div> </div>
<hr/>
{@a ngStyle} {@a ngStyle}
## `NgStyle` ## `NgStyle`
Use `NgStyle` to set many inline styles simultaneously and dynamically, based on the state of the component. Use `NgStyle` to set many inline styles simultaneously and dynamically, based on the state of the component.
@ -95,10 +86,7 @@ Remember to call `setCurrentStyles()`, both initially and when the dependent pro
</div> </div>
<hr/>
{@a ngModel} {@a ngModel}
## `[(ngModel)]`: Two-way binding ## `[(ngModel)]`: Two-way binding
The `NgModel` directive allows you to display a data property and The `NgModel` directive allows you to display a data property and
@ -167,10 +155,7 @@ Here are all variations in action, including the uppercase version:
<img src='generated/images/guide/built-in-directives/ng-model-anim.gif' alt="NgModel variations"> <img src='generated/images/guide/built-in-directives/ng-model-anim.gif' alt="NgModel variations">
</div> </div>
<hr/>
{@a structural-directives} {@a structural-directives}
## Built-in _structural_ directives ## Built-in _structural_ directives
Structural directives are responsible for HTML layout. Structural directives are responsible for HTML layout.
@ -198,10 +183,7 @@ to group elements when there is no suitable host element for the directive.
</div> </div>
<hr/>
{@a ngIf} {@a ngIf}
## NgIf ## NgIf
You can add or remove an element from the DOM by applying an `NgIf` directive to You can add or remove an element from the DOM by applying an `NgIf` directive to
@ -265,8 +247,6 @@ The `nullCustomer` will not be displayed as long as it is `null`.
<code-example path="built-in-directives/src/app/app.component.html" region="NgIf-2b" header="src/app/app.component.html"></code-example> <code-example path="built-in-directives/src/app/app.component.html" region="NgIf-2b" header="src/app/app.component.html"></code-example>
<hr/>
{@a ngFor} {@a ngFor}
## `NgFor` ## `NgFor`
@ -383,8 +363,6 @@ they do not have special access to any private APIs that other directives can't
</div> </div>
<hr/>
{@a ngSwitch} {@a ngSwitch}
## The `NgSwitch` directives ## The `NgSwitch` directives

3
aio/content/guide/dependency-injection.md
View File

@ -90,11 +90,8 @@ The revised second version does depend on `Logger` service.
</code-tabs> </code-tabs>
In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes. In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes.
<hr />
## What's next ## What's next
* [Dependency providers](guide/dependency-injection-providers) * [Dependency providers](guide/dependency-injection-providers)

6
aio/content/guide/deployment.md
View File

@ -156,10 +156,7 @@ Check out [angular-cli-ghpages](https://github.com/angular-buch/angular-cli-ghpa
</div> </div>
<hr>
{@a server-configuration} {@a server-configuration}
## Server configuration ## Server configuration
This section covers changes you may have to make to the server or to files deployed on the server. This section covers changes you may have to make to the server or to files deployed on the server.
@ -299,10 +296,7 @@ The server must be configured to accept the application's requests.
Read about how to enable CORS for specific servers at Read about how to enable CORS for specific servers at
<a href="https://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>. <a href="https://enable-cors.org/server.html" title="Enabling CORS server">enable-cors.org</a>.
<hr>
{@a optimize} {@a optimize}
## Production optimizations ## Production optimizations
The `--prod` _meta-flag_ engages the following build optimization features. The `--prod` _meta-flag_ engages the following build optimization features.

2
aio/content/guide/elements.md
View File

@ -52,8 +52,6 @@ When your custom element is placed on a page, the browser creates an instance of
<img src="generated/images/guide/elements/customElement1.png" alt="Custom element in browser" class="left"> <img src="generated/images/guide/elements/customElement1.png" alt="Custom element in browser" class="left">
</div> </div>
<hr class="clear">
## Transforming components to custom elements ## Transforming components to custom elements
Angular provides the `createCustomElement()` function for converting an Angular component, Angular provides the `createCustomElement()` function for converting an Angular component,

2
aio/content/guide/entry-components.md
View File

@ -107,8 +107,6 @@ the tree shaker will throw it away. So, it's best to add only the components tha
as trim as possible. as trim as possible.
<hr />
## More on Angular modules ## More on Angular modules
You may also be interested in the following: You may also be interested in the following:

2
aio/content/guide/event-binding.md
View File

@ -59,8 +59,6 @@ In the following example, Angular checks to see if `myClick` is an event on the
If the target event name, `myClick` fails to match an element event or an output property of `ClickDirective`, Angular reports an "unknown directive" error. If the target event name, `myClick` fails to match an element event or an output property of `ClickDirective`, Angular reports an "unknown directive" error.
<hr />
## What's next ## What's next
For more information on how event binding works, see [How event binding works](guide/event-binding-concepts). For more information on how event binding works, see [How event binding works](guide/event-binding-concepts).

2
aio/content/guide/feature-modules.md
View File

@ -106,8 +106,6 @@ Now, in addition to the title that renders by default, the `CustomerDashboardCom
<img src="generated/images/guide/feature-modules/feature-module.png" alt="feature module component"> <img src="generated/images/guide/feature-modules/feature-module.png" alt="feature module component">
</div> </div>
<hr />
## More on NgModules ## More on NgModules
You may also be interested in the following: You may also be interested in the following:

2
aio/content/guide/frequent-ngmodules.md
View File

@ -115,8 +115,6 @@ Angular returns an error telling you to use `CommonModule` instead.
<img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error"> <img src="generated/images/guide/frequent-ngmodules/browser-module-error.gif" width=750 alt="BrowserModule error">
</div> </div>
<hr />
## More on NgModules ## More on NgModules

2
aio/content/guide/hierarchical-dependency-injection.md
View File

@ -1183,8 +1183,6 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
</div> </div>
<hr />
## More on dependency injection ## More on dependency injection
For more information on Angular dependency injection, see the [DI Providers](guide/dependency-injection-providers) and [DI in Action](guide/dependency-injection-in-action) guides. For more information on Angular dependency injection, see the [DI Providers](guide/dependency-injection-providers) and [DI in Action](guide/dependency-injection-in-action) guides.

2
aio/content/guide/language-service.md
View File

@ -123,8 +123,6 @@ The HTML AST can only tell the compiler that there is some text with the charact
That's when the template parser produces an expression AST, which resides within the template AST. That's when the template parser produces an expression AST, which resides within the template AST.
The Angular Language Services then looks at `data.---` within its context, asks the TypeScript Language Service what the members of `data` are, and returns the list of possibilities. The Angular Language Services then looks at `data.---` within its context, asks the TypeScript Language Service what the members of `data` are, and returns the list of possibilities.
<hr>
## More information ## More information
* For more in-depth information on the implementation, see the * For more in-depth information on the implementation, see the

2
aio/content/guide/lazy-loading-ngmodules.md
View File

@ -323,8 +323,6 @@ ngOnInit() {
For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas). For more information with a working example, see the [routing tutorial section on preloading](guide/router-tutorial-toh#preloading-background-loading-of-feature-areas).
<hr>
## More on NgModules and routing ## More on NgModules and routing
You may also be interested in the following: You may also be interested in the following:

2
aio/content/guide/ngmodule-api.md
View File

@ -220,8 +220,6 @@ The following table summarizes the `@NgModule` metadata properties.
</table> </table>
<hr />
## More on NgModules ## More on NgModules
You may also be interested in the following: You may also be interested in the following:

53
aio/content/guide/ngmodule-faq.md
View File

@ -12,17 +12,14 @@ Add [declarable](guide/bootstrapping#the-declarations-array) classes&mdash;compo
Declare these classes in _exactly one_ module of the application. Declare these classes in _exactly one_ module of the application.
Declare them in a module if they belong to that particular module. Declare them in a module if they belong to that particular module.
<hr/>
{@a q-declarable} {@a q-declarable}
## What is a _declarable_? ## What is a _declarable_?
Declarables are the class types&mdash;components, directives, and pipes&mdash;that Declarables are the class types&mdash;components, directives, and pipes&mdash;that
you can add to a module's `declarations` list. you can add to a module's `declarations` list.
They're the only classes that you can add to `declarations`. They're the only classes that you can add to `declarations`.
<hr/>
## What classes should I _not_ add to `declarations`? ## What classes should I _not_ add to `declarations`?
@ -39,8 +36,6 @@ For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` because the
* Non-Angular classes and objects, such as * Non-Angular classes and objects, such as
strings, numbers, functions, entity models, configurations, business logic, and helper classes. strings, numbers, functions, entity models, configurations, business logic, and helper classes.
<hr/>
## Why list the same component in multiple `NgModule` properties? ## Why list the same component in multiple `NgModule` properties?
@ -56,7 +51,6 @@ Membership in one list doesn't imply membership in another list.
* A component could be exported for inclusion in an external component's template * A component could be exported for inclusion in an external component's template
as well as dynamically loaded in a pop-up dialog. as well as dynamically loaded in a pop-up dialog.
<hr/>
## What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? ## What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
@ -70,7 +64,6 @@ The "x" class isn't visible to other modules until you add it to the `exports` l
</div> </div>
<hr/>
## What should I import? ## What should I import?
@ -89,10 +82,8 @@ components, directives, and pipes.
Import [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) only in the root `AppModule`. Import [BrowserModule](guide/ngmodule-faq#q-browser-vs-common-module) only in the root `AppModule`.
<hr/>
{@a q-browser-vs-common-module} {@a q-browser-vs-common-module}
## Should I import `BrowserModule` or `CommonModule`? ## Should I import `BrowserModule` or `CommonModule`?
The root application module, `AppModule`, of almost every browser application The root application module, `AppModule`, of almost every browser application
@ -110,10 +101,8 @@ They need the common directives. They don't need to re-install the app-wide prov
Importing `CommonModule` also frees feature modules for use on _any_ target platform, not just browsers. Importing `CommonModule` also frees feature modules for use on _any_ target platform, not just browsers.
<hr/>
{@a q-reimport} {@a q-reimport}
## What if I import the same module twice? ## What if I import the same module twice?
That's not a problem. When three modules all import Module 'A', That's not a problem. When three modules all import Module 'A',
@ -126,10 +115,8 @@ When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to
Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'. Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.
<hr/>
{@a q-reexport} {@a q-reexport}
## What should I export? ## What should I export?
Export [declarable](guide/bootstrapping#the-declarations-array) classes that components in _other_ NgModules Export [declarable](guide/bootstrapping#the-declarations-array) classes that components in _other_ NgModules
@ -143,7 +130,6 @@ it's declared in this NgModule or in an imported NgModule.
You _can_ re-export entire imported NgModules, which effectively re-export all of their exported classes. You _can_ re-export entire imported NgModules, which effectively re-export all of their exported classes.
An NgModule can even export a module that it doesn't import. An NgModule can even export a module that it doesn't import.
<hr/>
## What should I *not* export? ## What should I *not* export?
@ -159,9 +145,6 @@ While there's no harm in exporting them, there's also no benefit.
For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything. For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
Its only purpose is to add http service providers to the application as a whole. Its only purpose is to add http service providers to the application as a whole.
<hr/>
## Can I re-export classes and modules? ## Can I re-export classes and modules?
@ -185,9 +168,6 @@ For example, there's no point in re-exporting `HttpClientModule` because it does
Its only purpose is to add http service providers to the application as a whole. Its only purpose is to add http service providers to the application as a whole.
<hr/>
## What is the `forRoot()` method? ## What is the `forRoot()` method?
The `forRoot()` static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons. A good example of `forRoot()` is the `RouterModule.forRoot()` method. The `forRoot()` static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons. A good example of `forRoot()` is the `RouterModule.forRoot()` method.
@ -211,9 +191,6 @@ configure services in root and feature modules respectively.
Follow this convention when you write similar modules with configurable service providers. Follow this convention when you write similar modules with configurable service providers.
<hr/>
## Why is a service provided in a feature module visible everywhere? ## Why is a service provided in a feature module visible everywhere?
Providers listed in the `@NgModule.providers` of a bootstrapped module have application scope. Providers listed in the `@NgModule.providers` of a bootstrapped module have application scope.
@ -238,10 +215,8 @@ not just the classes declared in the `HeroModule`.
To limit access to a service, consider lazy loading the NgModule that provides that service. See [How do I restrict service scope to a module?](guide/ngmodule-faq#service-scope) for more information. To limit access to a service, consider lazy loading the NgModule that provides that service. See [How do I restrict service scope to a module?](guide/ngmodule-faq#service-scope) for more information.
<hr/>
{@a q-lazy-loaded-module-provider-visibility} {@a q-lazy-loaded-module-provider-visibility}
## Why is a service provided in a lazy-loaded module visible only to that module? ## Why is a service provided in a lazy-loaded module visible only to that module?
Unlike providers of the modules loaded at launch, Unlike providers of the modules loaded at launch,
@ -257,8 +232,6 @@ These providers are insulated from changes to application providers with the sam
When the router creates a component within the lazy-loaded context, When the router creates a component within the lazy-loaded context,
Angular prefers service instances created from these providers to the service instances of the application root injector. Angular prefers service instances created from these providers to the service instances of the application root injector.
<hr/>
## What if two modules provide the same service? ## What if two modules provide the same service?
@ -277,10 +250,8 @@ that also provides a service for token 'X', then NgModule A's service definition
The service provided by the root `AppModule` takes precedence over services provided by imported NgModules. The service provided by the root `AppModule` takes precedence over services provided by imported NgModules.
The `AppModule` always wins. The `AppModule` always wins.
<hr/>
{@a service-scope} {@a service-scope}
## How do I restrict service scope to a module? ## How do I restrict service scope to a module?
When a module is loaded at application launch, When a module is loaded at application launch,
@ -329,11 +300,8 @@ Define child routes and let the router load module components into that outlet.
Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable. Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable.
<hr/>
{@a q-root-component-or-module} {@a q-root-component-or-module}
## Should I add application-wide providers to the root `AppModule` or the root `AppComponent`? ## Should I add application-wide providers to the root `AppModule` or the root `AppComponent`?
Define application-wide providers by specifying `providedIn: 'root'` on its `@Injectable()` decorator (in the case of services) or at `InjectionToken` construction (in the case where tokens are provided). Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module. Define application-wide providers by specifying `providedIn: 'root'` on its `@Injectable()` decorator (in the case of services) or at `InjectionToken` construction (in the case where tokens are provided). Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module.
@ -366,10 +334,8 @@ But in routed applications, routing operates at the root level
where `AppComponent` services don't exist. where `AppComponent` services don't exist.
This means that lazy-loaded modules can't reach them. This means that lazy-loaded modules can't reach them.
<hr/>
{@a q-component-or-module} {@a q-component-or-module}
## Should I add other providers to a module or a component? ## Should I add other providers to a module or a component?
Providers should be configured using `@Injectable` syntax. If possible, they should be provided in the application root (`providedIn: 'root'`). Services that are configured this way are lazily loaded if they are only used from a lazily loaded context. Providers should be configured using `@Injectable` syntax. If possible, they should be provided in the application root (`providedIn: 'root'`). Services that are configured this way are lazily loaded if they are only used from a lazily loaded context.
@ -389,11 +355,8 @@ The changes that editor makes in its service don't touch the instances elsewhere
[Always register _application-wide_ services with the root `AppModule`](guide/ngmodule-faq#q-root-component-or-module), [Always register _application-wide_ services with the root `AppModule`](guide/ngmodule-faq#q-root-component-or-module),
not the root `AppComponent`. not the root `AppComponent`.
<hr/>
{@a q-why-bad} {@a q-why-bad}
## Why is it bad if a shared module provides a service to a lazy-loaded module? ## Why is it bad if a shared module provides a service to a lazy-loaded module?
### The eagerly loaded scenario ### The eagerly loaded scenario
@ -426,10 +389,8 @@ Then toggle between the "Contact" and "Heroes" links a few times.
The username goes bonkers as the Angular creates a new `UserService` instance each time. The username goes bonkers as the Angular creates a new `UserService` instance each time.
I'd like to see the error so I can include it.--> I'd like to see the error so I can include it.-->
<hr/>
{@a q-why-child-injector} {@a q-why-child-injector}
## Why does lazy loading create a child injector? ## Why does lazy loading create a child injector?
Angular adds `@NgModule.providers` to the application root injector, unless the NgModule is lazy-loaded. Angular adds `@NgModule.providers` to the application root injector, unless the NgModule is lazy-loaded.
@ -453,10 +414,8 @@ Angular must add the lazy-loaded module's providers to an injector somewhere.
It can't add them to the app root injector because that injector is closed to new providers. It can't add them to the app root injector because that injector is closed to new providers.
So Angular creates a new child injector for the lazy-loaded module context. So Angular creates a new child injector for the lazy-loaded module context.
<hr/>
{@a q-is-it-loaded} {@a q-is-it-loaded}
## How can I tell if an NgModule or service was previously loaded? ## How can I tell if an NgModule or service was previously loaded?
Some NgModules and their services should be loaded only once by the root `AppModule`. Some NgModules and their services should be loaded only once by the root `AppModule`.
@ -472,10 +431,8 @@ Here is a custom constructor for an NgModule called `GreetingModule`.
<code-example path="ngmodules/src/app/greeting/greeting.module.ts" region="ctor" header="src/app/greeting/greeting.module.ts (Constructor)"></code-example> <code-example path="ngmodules/src/app/greeting/greeting.module.ts" region="ctor" header="src/app/greeting/greeting.module.ts (Constructor)"></code-example>
<hr/>
{@a q-entry-component-defined} {@a q-entry-component-defined}
## What is an `entry component`? ## What is an `entry component`?
An entry component is any component that Angular loads _imperatively_ by type. An entry component is any component that Angular loads _imperatively_ by type.
@ -498,7 +455,6 @@ loads the component dynamically into a `RouterOutlet`.
For more information, see [Entry Components](guide/entry-components). For more information, see [Entry Components](guide/entry-components).
<hr/>
## What's the difference between a _bootstrap_ component and an _entry component_? ## What's the difference between a _bootstrap_ component and an _entry component_?
@ -514,7 +470,6 @@ although doing so is harmless.
For more information, see [Entry Components](guide/entry-components). For more information, see [Entry Components](guide/entry-components).
<hr/>
## When do I add components to _entryComponents_? ## When do I add components to _entryComponents_?
@ -535,8 +490,6 @@ in the templates of other components.
For more information, see [Entry Components](guide/entry-components). For more information, see [Entry Components](guide/entry-components).
<hr/>
## Why does Angular need _entryComponents_? ## Why does Angular need _entryComponents_?
@ -559,7 +512,6 @@ and every component reachable from an entry component.
If a component isn't an _entry component_ or wasn't found in a template, If a component isn't an _entry component_ or wasn't found in a template,
the compiler omits it. the compiler omits it.
<hr/>
## What kinds of modules should I have and how should I use them? ## What kinds of modules should I have and how should I use them?
@ -593,7 +545,6 @@ For more information, see [Feature Modules](guide/feature-modules) and
[Module Types](guide/module-types) [Module Types](guide/module-types)
## What's the difference between NgModules and JavaScript Modules? ## What's the difference between NgModules and JavaScript Modules?
In an Angular app, NgModules and JavaScript modules work together. In an Angular app, NgModules and JavaScript modules work together.
@ -610,10 +561,8 @@ You _export_ this NgModule's classes so they can be imported and used by compone
For more information, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule). For more information, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
<hr/>
{@a q-template-reference} {@a q-template-reference}
## How does Angular find components, directives, and pipes in a template?<br>What is a <i><b>template reference</b></i>? ## How does Angular find components, directives, and pipes in a template?<br>What is a <i><b>template reference</b></i>?
The [Angular compiler](guide/ngmodule-faq#q-angular-compiler) looks inside component templates The [Angular compiler](guide/ngmodule-faq#q-angular-compiler) looks inside component templates
@ -626,10 +575,8 @@ The compiler finds a pipe if the pipe's *name* appears within the pipe syntax of
Angular only matches selectors and pipe names for classes that are declared by this module Angular only matches selectors and pipe names for classes that are declared by this module
or exported by a module that this module imports. or exported by a module that this module imports.
<hr/>
{@a q-angular-compiler} {@a q-angular-compiler}
## What is the Angular compiler? ## What is the Angular compiler?
The Angular compiler converts the application code you write into highly performant JavaScript code. The Angular compiler converts the application code you write into highly performant JavaScript code.

2
aio/content/guide/ngmodules.md
View File

@ -57,8 +57,6 @@ The [Angular CLI](cli) generates the following basic `AppModule` when creating a
At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping). At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).
<hr />
## More on NgModules ## More on NgModules
You may also be interested in the following: You may also be interested in the following:

4
aio/content/guide/property-binding.md
View File

@ -18,8 +18,6 @@ To get the most out of property binding, you should be familiar with the followi
* [Basics of templates](guide/glossary#template) * [Basics of templates](guide/glossary#template)
* [Binding syntax](guide/binding-syntax) * [Binding syntax](guide/binding-syntax)
<hr />
## Understanding the flow of data ## Understanding the flow of data
Property binding moves a value in one direction, from a component's property into a target element property. Property binding moves a value in one direction, from a component's property into a target element property.
@ -196,8 +194,6 @@ The following binding pairs do the same thing.
You can use either form when rendering data values as strings, though interpolation is preferable for readability. You can use either form when rendering data values as strings, though interpolation is preferable for readability.
However, when setting an element property to a non-string data value, you must use property binding. However, when setting an element property to a non-string data value, you must use property binding.
<hr />
## What's next ## What's next
* [Property binding best practices](guide/property-binding-best-practices) * [Property binding best practices](guide/property-binding-best-practices)

3
aio/content/guide/providers.md
View File

@ -97,9 +97,6 @@ Child modules and component injectors are independent of each other, and create
For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection). For more information, see [Hierarchical injectors](guide/hierarchical-dependency-injection).
<hr>
## More on NgModules ## More on NgModules
You may also be interested in: You may also be interested in:

3
aio/content/guide/router.md
View File

@ -19,10 +19,7 @@ Before creating a route, you should be familiar with the following:
For an introduction to Angular with a ready-made app, see [Getting Started](start). For an introduction to Angular with a ready-made app, see [Getting Started](start).
For a more in-depth experience of building an Angular app, see the [Tour of Heroes](tutorial) tutorial. Both guide you through using component classes and templates. For a more in-depth experience of building an Angular app, see the [Tour of Heroes](tutorial) tutorial. Both guide you through using component classes and templates.
<hr />
{@a basics} {@a basics}
## Generate an app with routing enabled ## Generate an app with routing enabled
The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes. The following command uses the Angular CLI to generate a basic Angular app with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.

2
aio/content/guide/service-worker-communications.md
View File

@ -7,8 +7,6 @@ Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the
A basic understanding of the following: A basic understanding of the following:
* [Getting Started with Service Workers](guide/service-worker-getting-started). * [Getting Started with Service Workers](guide/service-worker-getting-started).
<hr />
## `SwUpdate` service ## `SwUpdate` service

2
aio/content/guide/service-worker-devops.md
View File

@ -7,8 +7,6 @@ This page is a reference for deploying and supporting production apps that use t
A basic understanding of the following: A basic understanding of the following:
* [Service Worker Communication](guide/service-worker-communications). * [Service Worker Communication](guide/service-worker-communications).
<hr />
## Service worker and caching of app resources ## Service worker and caching of app resources
Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated. Conceptually, you can imagine the Angular service worker as a forward cache or a CDN edge that is installed in the end user's web browser. The service worker's job is to satisfy requests made by the Angular app for resources or data from a local cache, without needing to wait for the network. Like any cache, it has rules for how content is expired and updated.

2
aio/content/guide/service-worker-getting-started.md
View File

@ -158,8 +158,6 @@ If you look at the `http-server` logs, you can see the service worker requesting
The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version. The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
<hr />
## More on Angular service workers ## More on Angular service workers
You may also be interested in the following: You may also be interested in the following:

2
aio/content/guide/sharing-ngmodules.md
View File

@ -53,8 +53,6 @@ The most common way to get a hold of shared services is through Angular
To read about sharing services, see [Providers](guide/providers). To read about sharing services, see [Providers](guide/providers).
<hr />
## More on NgModules ## More on NgModules
You may also be interested in the following: You may also be interested in the following:

2
aio/content/guide/singleton-services.md
View File

@ -171,8 +171,6 @@ Here are the two files in their entirety for reference:
</code-pane> </code-pane>
</code-tabs> </code-tabs>
<hr />
## More on NgModules ## More on NgModules
You may also be interested in: You may also be interested in:

1
aio/content/guide/template-syntax.md
View File

@ -53,7 +53,6 @@ For more information, see the [Security](guide/security) page.
</div> </div>
<hr />
## More on template syntax ## More on template syntax

2
aio/content/guide/test-debugging.md
View File

@ -24,5 +24,3 @@ Debug specs in the browser in the same way that you debug an application.
<div class="lightbox"> <div class="lightbox">
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging"> <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
</div> </div>
<hr>

2
aio/content/guide/testing-attribute-directives.md
View File

@ -74,5 +74,3 @@ A few techniques are noteworthy:
and its `defaultColor`. and its `defaultColor`.
- `DebugElement.properties` affords access to the artificial custom property that is set by the directive. - `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
<hr>

36
aio/content/guide/testing-components-scenarios.md
View File

@ -124,10 +124,7 @@ There is no harm in calling `detectChanges()` more often than is strictly necess
</div> </div>
<hr>
{@a dispatch-event} {@a dispatch-event}
#### Change an input value with _dispatchEvent()_ #### Change an input value with _dispatchEvent()_
To simulate user input, you can find the input element and set its `value` property. To simulate user input, you can find the input element and set its `value` property.
@ -143,8 +140,6 @@ The following example demonstrates the proper sequence.
<code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" header="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example> <code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" header="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example>
<hr>
## Component with external files ## Component with external files
The `BannerComponent` above is defined with an _inline template_ and _inline css_, specified in the `@Component.template` and `@Component.styles` properties respectively. The `BannerComponent` above is defined with an _inline template_ and _inline css_, specified in the `@Component.template` and `@Component.styles` properties respectively.
@ -291,10 +286,7 @@ The remaining tests confirm the logic of the component when the service returns
The second test validates the effect of changing the user name. The second test validates the effect of changing the user name.
The third test checks that the component displays the proper message when there is no logged-in user. The third test checks that the component displays the proper message when there is no logged-in user.
<hr>
{@a component-with-async-service} {@a component-with-async-service}
## Component with async service ## Component with async service
In this sample, the `AboutComponent` template hosts a `TwainComponent`. In this sample, the `AboutComponent` template hosts a `TwainComponent`.
@ -670,8 +662,6 @@ can give you that information and make assertions about the state of the view.
path="testing/src/app/twain/twain.component.spec.ts" path="testing/src/app/twain/twain.component.spec.ts"
region="spy-done-test"></code-example> region="spy-done-test"></code-example>
<hr>
{@a marble-testing} {@a marble-testing}
## Component marble tests ## Component marble tests
@ -776,10 +766,7 @@ RxJS marble testing is a rich subject, beyond the scope of this guide.
Learn about it on the web, starting with the Learn about it on the web, starting with the
[official documentation](https://rxjs.dev/guide/testing/marble-testing). [official documentation](https://rxjs.dev/guide/testing/marble-testing).
<hr>
{@a component-with-input-output} {@a component-with-input-output}
## Component with inputs and outputs ## Component with inputs and outputs
A component with inputs and outputs typically appears inside the view template of a host component. A component with inputs and outputs typically appears inside the view template of a host component.
@ -970,10 +957,7 @@ Here's the previous test, rewritten using the click helper.
header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)"> header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)">
</code-example> </code-example>
<hr>
{@a component-inside-test-host} {@a component-inside-test-host}
## Component inside a test host ## Component inside a test host
The previous tests played the role of the host `DashboardComponent` themselves. The previous tests played the role of the host `DashboardComponent` themselves.
@ -1032,10 +1016,7 @@ The tests themselves are almost identical to the stand-alone version:
Only the selected event test differs. It confirms that the selected `DashboardHeroComponent` hero Only the selected event test differs. It confirms that the selected `DashboardHeroComponent` hero
really does find its way up through the event binding to the host component. really does find its way up through the event binding to the host component.
<hr>
{@a routing-component} {@a routing-component}
## Routing component ## Routing component
A _routing component_ is a component that tells the `Router` to navigate to another component. A _routing component_ is a component that tells the `Router` to navigate to another component.
@ -1186,8 +1167,6 @@ New heroes have `id=0` and a blank `name`. This test confirms that the component
region="route-no-id" region="route-no-id"
header="app/hero/hero-detail.component.spec.ts (no id)"></code-example> header="app/hero/hero-detail.component.spec.ts (no id)"></code-example>
<hr>
## Nested component tests ## Nested component tests
Component templates often have nested components, whose templates Component templates often have nested components, whose templates
@ -1309,8 +1288,6 @@ The Angular compiler creates the `BannerComponentStub` for the `<app-banner>` el
and applies the `RouterLinkStubDirective` to the anchors with the `routerLink` attribute, and applies the `RouterLinkStubDirective` to the anchors with the `routerLink` attribute,
but it ignores the `<app-welcome>` and `<router-outlet>` tags. but it ignores the `<app-welcome>` and `<router-outlet>` tags.
<hr>
{@a routerlink} {@a routerlink}
## Components with _RouterLink_ ## Components with _RouterLink_
@ -1417,10 +1394,7 @@ tests with the `RouterTestingModule`.
</div> </div>
<hr>
{@a page-object} {@a page-object}
## Use a _page_ object ## Use a _page_ object
The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons. The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
@ -1474,8 +1448,6 @@ Here are a few more `HeroDetailComponent` tests to reinforce the point.
region="selected-tests" region="selected-tests"
header="app/hero/hero-detail.component.spec.ts (selected tests)"></code-example> header="app/hero/hero-detail.component.spec.ts (selected tests)"></code-example>
<hr>
{@a compile-components} {@a compile-components}
## Calling _compileComponents()_ ## Calling _compileComponents()_
@ -1619,10 +1591,7 @@ even though it is never required when running `ng test`.
The tests in this guide only call `compileComponents` when necessary. The tests in this guide only call `compileComponents` when necessary.
<hr>
{@a import-module} {@a import-module}
## Setup with module imports ## Setup with module imports
Earlier component tests configured the testing module with a few `declarations` like this: Earlier component tests configured the testing module with a few `declarations` like this:
@ -1705,10 +1674,7 @@ the module is small, as feature modules tend to be.
</div> </div>
<hr>
{@a component-override} {@a component-override}
## Override component providers ## Override component providers
The `HeroDetailComponent` provides its own `HeroDetailService`. The `HeroDetailComponent` provides its own `HeroDetailService`.
@ -1817,5 +1783,3 @@ The `TestBed` offers similar `overrideDirective`, `overrideModule`, and `overrid
for digging into and replacing parts of these other classes. for digging into and replacing parts of these other classes.
Explore the options and combinations on your own. Explore the options and combinations on your own.
<hr>

6
aio/content/guide/testing-utility-apis.md
View File

@ -144,10 +144,7 @@ Here's a summary of the stand-alone functions, in order of likely utility:
</tr> </tr>
</table> </table>
<hr>
{@a testbed-class-summary} {@a testbed-class-summary}
## _TestBed_ class summary ## _TestBed_ class summary
The `TestBed` class is one of the principal Angular testing utilities. The `TestBed` class is one of the principal Angular testing utilities.
@ -789,6 +786,3 @@ The Angular `By` class has three static methods for common predicates:
- `By.directive(directive)` - return elements that Angular matched to an instance of the directive class. - `By.directive(directive)` - return elements that Angular matched to an instance of the directive class.
<code-example path="testing/src/app/hero/hero-list.component.spec.ts" region="by" header="app/hero/hero-list.component.spec.ts"></code-example> <code-example path="testing/src/app/hero/hero-list.component.spec.ts" region="by" header="app/hero/hero-list.component.spec.ts"></code-example>
<hr>

2
aio/content/guide/testing.md
View File

@ -275,8 +275,6 @@ Now you can run the following commands to use the `--no-sandbox` flag:
</div> </div>
<hr />
## More info on testing ## More info on testing
After you've set up your app for testing, you may find the following testing guides useful. After you've set up your app for testing, you may find the following testing guides useful.

3
aio/content/start/index.md
View File

@ -15,11 +15,8 @@ To get the most out of this tutorial you should already have a basic understandi
* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") * [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript")
* [TypeScript](https://www.typescriptlang.org/ "The TypeScript language") * [TypeScript](https://www.typescriptlang.org/ "The TypeScript language")
<hr />
{@a components} {@a components}
## Take a tour of the example application ## Take a tour of the example application
You build Angular applications with components. You build Angular applications with components.

37
aio/src/styles/0-base/_typography.scss
View File

@ -13,13 +13,14 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $deepgray; color: $deepgray;
margin-bottom: 0;
font-weight: 500;
} }
h1 { h1 {
@include font-size(24); @include font-size(24);
font-weight: 500;
display: inline-block; display: inline-block;
margin: 8px 0px; margin: 1.6rem 0;
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
margin-top: 0; margin-top: 0;
@ -27,38 +28,48 @@ h1 {
} }
h2 { h2 {
@include font-size(22); border-top: 1px solid $lightgray;
font-weight: 500;
margin: 32px 0px 24px;
clear: both; clear: both;
@include font-size(22);
margin-top: 4rem;
padding-top: 4rem;
.page-about &,
.page-api &,
.page-contribute &,
.page-events &,
.page-features &,
.page-home &,
.page-presskit &,
.page-resources & {
border-top: 0;
margin-top: 2rem;
padding-top: 0;
}
} }
h3 { h3 {
@include font-size(20); @include font-size(20);
font-weight: 400; margin-top: 3rem;
margin: 24px 0px 12px;
clear: both; clear: both;
} }
h4 { h4 {
@include font-size(18); @include font-size(18);
font-weight: 400; margin-top: 3rem;
margin: 8px 0px;
clear: both; clear: both;
} }
h5 { h5 {
@include font-size(16); @include font-size(16);
font-weight: 500; margin-top: 2rem;
margin: 8px 0px;
clear: both; clear: both;
} }
h6 { h6 {
@include font-size(16); @include font-size(16);
font-weight: 500;
color: $mediumgray; color: $mediumgray;
margin: 8px 0px; margin-top: 2rem;
clear: both; clear: both;
} }

1
aio/src/styles/2-modules/_api-list.scss
View File

@ -29,6 +29,7 @@ aio-api-list {
h2 { h2 {
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px;
} }
} }
} }