Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(arch,hier-dep,temp-syntax,toh-5): misc copyedits #3375

Merged
merged 4 commits into from
Mar 15, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/docs/ts/latest/guide/architecture.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 2 additions & 3 deletions public/docs/ts/latest/guide/template-syntax.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand Down
27 changes: 13 additions & 14 deletions public/docs/ts/latest/tutorial/toh-pt5.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand All @@ -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.
Expand All @@ -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:
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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')

Expand Down Expand Up @@ -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

Expand Down