From c2bb6ad9350e2245196713635e6c250b610d3ace Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 15 Mar 2017 03:54:03 -0700 Subject: [PATCH] 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 --- public/docs/ts/latest/guide/architecture.jade | 2 +- .../hierarchical-dependency-injection.jade | 1 + .../docs/ts/latest/guide/template-syntax.jade | 5 ++-- public/docs/ts/latest/tutorial/toh-pt5.jade | 27 +++++++++---------- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index e6dabb52b2..00b8c324d1 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -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 diff --git a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade index ea4968f2b1..a1dc5c4d1f 100644 --- a/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade +++ b/public/docs/ts/latest/guide/hierarchical-dependency-injection.jade @@ -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. diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 6b25a680d4..4fe2f2a483 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -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%") style property td +makeExample('template-syntax/ts/src/app/app.component.html', 'style-binding-syntax-1')(format=".") - :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. diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index ab6aa21da9..d3c314fc13 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -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 dashboard.component.html and replace the repeated `
` 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