From 3c77a7fcd1d9aaebc0f248b6e95d57e32a87df13 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 8 Jun 2016 09:25:48 -0700 Subject: [PATCH] docs(basics/di): minor edits following TS switch to provider object literal (#1600) Minor edits: - Dart side adjustments following #1594. - Renamed example '3a' to just '3' and tweaked the logger message - Removed obsolete Dart block. --- .../dart/lib/providers_component.dart | 17 ++++++++++------- .../_examples/dependency-injection/e2e-spec.ts | 6 +++--- .../ts/app/providers.component.ts | 14 +++++++------- .../dart/latest/guide/dependency-injection.jade | 9 ++++++--- .../ts/latest/guide/dependency-injection.jade | 10 ++++++---- 5 files changed, 32 insertions(+), 24 deletions(-) diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart index 11f2184242..a52ea6d267 100644 --- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart +++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart @@ -29,15 +29,18 @@ class ProviderComponent1 { /// Component just used to ensure that shared E2E tests pass. @Component( - selector: 'provider-3a', + selector: 'provider-3', template: '{{log}}', - providers: const [const Provider(Logger, useClass: Logger)] + providers: + // #docregion providers-3 + const [const Provider(Logger, useClass: Logger)] + // #enddocregion providers-3 ) -class ProviderComponent3a { +class ProviderComponent3 { String log; - ProviderComponent3a(Logger logger) { - logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}'); + ProviderComponent3(Logger logger) { + logger.log('Hello from logger provided with useClass:Logger'); log = logger.logs[0]; } } @@ -250,7 +253,7 @@ class ProviderComponent10 implements OnInit { template: '''

Provider variations

-
+
@@ -261,7 +264,7 @@ class ProviderComponent10 implements OnInit {
''', directives: const [ ProviderComponent1, - ProviderComponent3a, + ProviderComponent3, ProviderComponent4, ProviderComponent5, ProviderComponent6a, diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts index d4625478f3..51b73ad40f 100644 --- a/public/docs/_examples/dependency-injection/e2e-spec.ts +++ b/public/docs/_examples/dependency-injection/e2e-spec.ts @@ -80,9 +80,9 @@ describe('Dependency Injection Tests', function () { expect(element(by.css('#p1')).getText()).toEqual(expectedMsg); }); - it('P3a (provide) displays as expected', function () { - expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }'; - expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg); + it('P3 (provide) displays as expected', function () { + expectedMsg = 'Hello from logger provided with useClass:Logger'; + expect(element(by.css('#p3')).getText()).toEqual(expectedMsg); }); it('P4 (useClass:BetterLogger) displays as expected', function () { diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts index 61c53bb862..74c36d8e62 100644 --- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts +++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts @@ -31,17 +31,17 @@ export class ProviderComponent1 { ////////////////////////////////////////// @Component({ - selector: 'provider-3a', + selector: 'provider-3', template: template, providers: - // #docregion providers-3a + // #docregion providers-3 [{ provide: Logger, useClass: Logger }] - // #enddocregion providers-3a + // #enddocregion providers-3 }) -export class ProviderComponent3a { +export class ProviderComponent3 { log: string; constructor(logger: Logger) { - logger.log('Hello from logger provided with { provide: Logger, useClass: Logger }'); + logger.log('Hello from logger provided with useClass:Logger'); this.log = logger.logs[0]; } } @@ -252,7 +252,7 @@ export class ProviderComponent10 { template: `

Provider variations

-
+
@@ -264,7 +264,7 @@ export class ProviderComponent10 { `, directives: [ ProviderComponent1, - ProviderComponent3a, + ProviderComponent3, ProviderComponent4, ProviderComponent5, ProviderComponent6a, diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade index 0f991c5673..aaef0260d9 100644 --- a/public/docs/dart/latest/guide/dependency-injection.jade +++ b/public/docs/dart/latest/guide/dependency-injection.jade @@ -43,8 +43,10 @@ block real-logger A real implementation would probably use the [logging package](https://pub.dartlang.org/packages/logging). -block optional-logger - //- TBC. +block canonical-provider-expr + |  that creates a new instance of the  + a(href="../api/core/Provider-class.html") Provider + |  class: block provider-ctor-args - var _secondParam = 'named parameter, such as useClass' @@ -61,7 +63,8 @@ block dart-diff-const-metadata Instead, we use constant literals or constant constructors. For example, a TypeScript program will use the object literal `{ provide: Logger, useClass: BetterLogger }`. - A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`. + A Dart annotation would instead use the constant value + `const Provider(Logger, useClass: BetterLogger)`. block dart-diff-const-metadata-ctor .callout.is-helpful diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 9e5ccf2f7d..94e0ec0111 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -518,14 +518,16 @@ code-example(format="nocode"). +makeExample('dependency-injection/ts/app/providers.component.ts','providers-1') -:marked - This is actually a short-hand expression for a provider registration using the _provider_ object literal. +p + | This is actually a short-hand expression for a provider registration + block canonical-provider-expr + |  using a provider object literal with two properties: -+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a') ++makeExample('dependency-injection/ts/app/providers.component.ts','providers-3') block provider-ctor-args - var _secondParam = 'provider definition object'; -//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as useClass' : 'provider definition object'; + :marked The first is the [token](#token) that serves as the key for both locating a dependency value and registering the provider.