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
|
||||
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
|
||||
- `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 tax return component has the following characteristics:
|
||||
|
||||
* Is its own tax return editing session.
|
||||
* 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.
|
||||
|
|
|
@ -21,7 +21,7 @@ style.
|
|||
|
||||
a#toc
|
||||
:marked
|
||||
### Table of contents
|
||||
### Contents
|
||||
|
||||
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
|
||||
td
|
||||
+makeExample('template-syntax/ts/src/app/app.component.html', 'style-binding-syntax-1')(format=".")
|
||||
</div>
|
||||
|
||||
:marked
|
||||
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
|
||||
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
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
## Refactor routes to a _Routing Module_
|
||||
|
||||
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)
|
||||
to protect against unwanted or unauthorized navigations.
|
||||
Routing considerations could quickly dominate this module and obscure its primary purpose which is to
|
||||
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)
|
||||
to protect against unwanted or unauthorized navigations.
|
||||
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.
|
||||
|
||||
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
|
||||
class dedicated to routing should be some kind of 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.
|
||||
|
||||
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` 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`.
|
||||
|
||||
* No `declarations`! Declarations are the responsibility of the companion module.
|
||||
|
@ -676,7 +676,7 @@ block extract-id
|
|||
|
||||
### 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).
|
||||
|
||||
Here is the revised `AppModule`, compared to its pre-refactor state:
|
||||
|
@ -770,7 +770,7 @@ block heroes-component-cleanup
|
|||
:marked
|
||||
### 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_
|
||||
by telling the router where to go.
|
||||
|
||||
|
@ -863,9 +863,8 @@ block css-files
|
|||
|
||||
+makeExcerpt('src/app/app.component.ts (active router links)', 'template')
|
||||
|
||||
block style-urls
|
||||
:marked
|
||||
Add a `styleUrls` property that points to this CSS file as follows.
|
||||
:marked
|
||||
Add a `styleUrls` property that refers to this CSS file as follows:
|
||||
|
||||
+makeExcerpt('src/app/app.component.ts','styleUrls')
|
||||
|
||||
|
@ -935,7 +934,7 @@ block file-tree-end
|
|||
.file index.html
|
||||
.file styles.css
|
||||
.file systemjs.config.js
|
||||
.file tsconfig.json
|
||||
.file tsconfig.json
|
||||
.file node_modules ...
|
||||
.file package.json
|
||||
|
||||
|
|
Loading…
Reference in New Issue