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.
This commit is contained in:
Patrice Chalin 2016-06-08 09:25:48 -07:00 committed by Kathy Walrath
parent e6643b0869
commit 3c77a7fcd1
5 changed files with 32 additions and 24 deletions

View File

@ -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: '''
<h2>Provider variations</h2>
<div id="p1"><provider-1></provider-1></div>
<div id="p3a"><provider-3a></provider-3a></div>
<div id="p3"><provider-3></provider-3></div>
<div id="p4"><provider-4></provider-4></div>
<div id="p5"><provider-5></provider-5></div>
<div id="p6a"><provider-6a></provider-6a></div>
@ -261,7 +264,7 @@ class ProviderComponent10 implements OnInit {
<div id="p10"><provider-10></provider-10></div>''',
directives: const [
ProviderComponent1,
ProviderComponent3a,
ProviderComponent3,
ProviderComponent4,
ProviderComponent5,
ProviderComponent6a,

View File

@ -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 () {

View File

@ -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: `
<h2>Provider variations</h2>
<div id="p1"><provider-1></provider-1></div>
<div id="p3a"><provider-3a></provider-3a></div>
<div id="p3"><provider-3></provider-3></div>
<div id="p4"><provider-4></provider-4></div>
<div id="p5"><provider-5></provider-5></div>
<div id="p6a"><provider-6a></provider-6a></div>
@ -264,7 +264,7 @@ export class ProviderComponent10 {
`,
directives: [
ProviderComponent1,
ProviderComponent3a,
ProviderComponent3,
ProviderComponent4,
ProviderComponent5,
ProviderComponent6a,

View File

@ -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
| &nbsp;that creates a new instance of the&nbsp;
a(href="../api/core/Provider-class.html") Provider
| &nbsp;class:
block provider-ctor-args
- var _secondParam = 'named parameter, such as <code>useClass</code>'
@ -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

View File

@ -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
| &nbsp;using a <i>provider</i> 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 <code>useClass</code>' : '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.