docs(arch,hier-dep,temp-syntax,toh-5): misc copyedits (#3375)
* docs(architecture): copyedit Follow-up fix to https://github.com/angular/angular.io/commit/e6741efd8f4fad20ca519d8eb99 ec0c7d102577d#commitcomment-21321447 * docs(hierarchical-dependency): copyedit * doc(template-syntax): copyedits * docs(toh-5): remove unnecessary block, trim whitespace
This commit is contained in:
parent
2fbca288c2
commit
c2bb6ad935
@ -252,7 +252,7 @@ block ts-decorator
|
|||||||
The `@Component` decorator takes a required configuration object with the
|
The `@Component` decorator takes a required configuration object with the
|
||||||
information Angular needs to create and present the component and its view.
|
information Angular needs to create and present the component and its view.
|
||||||
|
|
||||||
Here are a few of the most useful @Component configuration options:
|
Here are a few of the most useful `@Component` configuration options:
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
- `selector`: CSS selector that tells Angular to create and insert an instance of this component
|
- `selector`: CSS selector that tells Angular to create and insert an instance of this component
|
||||||
|
@ -115,6 +115,7 @@ figure.image-display
|
|||||||
Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
|
Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
|
||||||
|
|
||||||
Each tax return component has the following characteristics:
|
Each tax return component has the following characteristics:
|
||||||
|
|
||||||
* Is its own tax return editing session.
|
* Is its own tax return editing session.
|
||||||
* Can change a tax return without affecting a return in another component.
|
* Can change a tax return without affecting a return in another component.
|
||||||
* Has the ability to save the changes to its tax return or cancel them.
|
* Has the ability to save the changes to its tax return or cancel them.
|
||||||
|
@ -21,7 +21,7 @@ style.
|
|||||||
|
|
||||||
a#toc
|
a#toc
|
||||||
:marked
|
:marked
|
||||||
### Table of contents
|
### Contents
|
||||||
|
|
||||||
This guide covers the basic elements of the Angular template syntax, elements you'll need to construct the view:
|
This guide covers the basic elements of the Angular template syntax, elements you'll need to construct the view:
|
||||||
|
|
||||||
@ -528,7 +528,6 @@ table(width="100%")
|
|||||||
<code>style</code> property
|
<code>style</code> property
|
||||||
td
|
td
|
||||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'style-binding-syntax-1')(format=".")
|
+makeExample('template-syntax/ts/src/app/app.component.html', 'style-binding-syntax-1')(format=".")
|
||||||
</div>
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
With this broad view in mind, you're ready to look at binding types in detail.
|
With this broad view in mind, you're ready to look at binding types in detail.
|
||||||
@ -699,7 +698,7 @@ a#one-time-initialization
|
|||||||
|
|
||||||
:marked
|
:marked
|
||||||
Fortunately, Angular data binding is on alert for dangerous HTML.
|
Fortunately, Angular data binding is on alert for dangerous HTML.
|
||||||
It *sanitizes* the values before displaying them.
|
It [*sanitizes*](security#sanitization-and-security-contexts) the values before displaying them.
|
||||||
It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
|
It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
|
||||||
nor property binding.
|
nor property binding.
|
||||||
|
|
||||||
|
@ -608,7 +608,7 @@ block extract-id
|
|||||||
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
|
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
|
||||||
|
|
||||||
Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
|
Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
|
||||||
When hovering over a hero block, the target URL should display in the browser status bar
|
When hovering over a hero block, the target URL should display in the browser status bar
|
||||||
and the user should be able to copy the link or open the hero detail view in a new tab.
|
and the user should be able to copy the link or open the hero detail view in a new tab.
|
||||||
|
|
||||||
To achieve this effect, reopen the <span ngio-ex>dashboard.component.html</span> and replace the repeated `<div *ngFor...>` tags
|
To achieve this effect, reopen the <span ngio-ex>dashboard.component.html</span> and replace the repeated `<div *ngFor...>` tags
|
||||||
@ -643,19 +643,19 @@ block extract-id
|
|||||||
:marked
|
:marked
|
||||||
## Refactor routes to a _Routing Module_
|
## Refactor routes to a _Routing Module_
|
||||||
|
|
||||||
Almost 20 lines of `AppModule` are devoted to configuring four routes.
|
Almost 20 lines of `AppModule` are devoted to configuring four routes.
|
||||||
Most applications have many more routes and they [add guard services](../guide/router.html#guards)
|
Most applications have many more routes and they [add guard services](../guide/router.html#guards)
|
||||||
to protect against unwanted or unauthorized navigations.
|
to protect against unwanted or unauthorized navigations.
|
||||||
Routing considerations could quickly dominate this module and obscure its primary purpose which is to
|
Routing considerations could quickly dominate this module and obscure its primary purpose which is to
|
||||||
establish key facts about the entire app for the Angular compiler.
|
establish key facts about the entire app for the Angular compiler.
|
||||||
|
|
||||||
We should refactor the routing configuration into its own class.
|
We should refactor the routing configuration into its own class.
|
||||||
What kind of class?
|
What kind of class?
|
||||||
The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
|
The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
|
||||||
class dedicated to routing should be some kind of module.
|
class dedicated to routing should be some kind of module.
|
||||||
It should be a [_Routing Module_](../guide/router.html#routing-module).
|
It should be a [_Routing Module_](../guide/router.html#routing-module).
|
||||||
|
|
||||||
By convention the name of a _Routing Module_ contains the word "Routing" and
|
By convention the name of a _Routing Module_ contains the word "Routing" and
|
||||||
aligns with the name of the module that declares the components navigated to.
|
aligns with the name of the module that declares the components navigated to.
|
||||||
|
|
||||||
Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
|
Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
|
||||||
@ -667,7 +667,7 @@ block extract-id
|
|||||||
|
|
||||||
* Adds `RouterModule.forRoot(routes)` to `imports`.
|
* Adds `RouterModule.forRoot(routes)` to `imports`.
|
||||||
|
|
||||||
* Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
|
* Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables
|
||||||
such as `RouterLink` and `RouterOutlet`.
|
such as `RouterLink` and `RouterOutlet`.
|
||||||
|
|
||||||
* No `declarations`! Declarations are the responsibility of the companion module.
|
* No `declarations`! Declarations are the responsibility of the companion module.
|
||||||
@ -676,7 +676,7 @@ block extract-id
|
|||||||
|
|
||||||
### Update _AppModule_
|
### Update _AppModule_
|
||||||
|
|
||||||
Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
|
Now delete the routing configuration from `AppModule` and import the `AppRoutingModule`
|
||||||
(_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
|
(_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
|
||||||
|
|
||||||
Here is the revised `AppModule`, compared to its pre-refactor state:
|
Here is the revised `AppModule`, compared to its pre-refactor state:
|
||||||
@ -770,7 +770,7 @@ block heroes-component-cleanup
|
|||||||
:marked
|
:marked
|
||||||
### Update the _HeroesComponent_ class.
|
### Update the _HeroesComponent_ class.
|
||||||
|
|
||||||
The `HeroesComponent` navigates to the `HeroDetailComponent` in response to a button click.
|
The `HeroesComponent` navigates to the `HeroDetailComponent` in response to a button click.
|
||||||
The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
|
The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
|
||||||
by telling the router where to go.
|
by telling the router where to go.
|
||||||
|
|
||||||
@ -863,9 +863,8 @@ block css-files
|
|||||||
|
|
||||||
+makeExcerpt('src/app/app.component.ts (active router links)', 'template')
|
+makeExcerpt('src/app/app.component.ts (active router links)', 'template')
|
||||||
|
|
||||||
block style-urls
|
:marked
|
||||||
:marked
|
Add a `styleUrls` property that refers to this CSS file as follows:
|
||||||
Add a `styleUrls` property that points to this CSS file as follows.
|
|
||||||
|
|
||||||
+makeExcerpt('src/app/app.component.ts','styleUrls')
|
+makeExcerpt('src/app/app.component.ts','styleUrls')
|
||||||
|
|
||||||
@ -935,7 +934,7 @@ block file-tree-end
|
|||||||
.file index.html
|
.file index.html
|
||||||
.file styles.css
|
.file styles.css
|
||||||
.file systemjs.config.js
|
.file systemjs.config.js
|
||||||
.file tsconfig.json
|
.file tsconfig.json
|
||||||
.file node_modules ...
|
.file node_modules ...
|
||||||
.file package.json
|
.file package.json
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user