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:
Patrice Chalin 2017-03-15 03:54:03 -07:00 committed by Jesús Rodríguez
parent 2fbca288c2
commit c2bb6ad935
4 changed files with 17 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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