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:
parent
e6643b0869
commit
3c77a7fcd1
|
@ -29,15 +29,18 @@ class ProviderComponent1 {
|
||||||
|
|
||||||
/// Component just used to ensure that shared E2E tests pass.
|
/// Component just used to ensure that shared E2E tests pass.
|
||||||
@Component(
|
@Component(
|
||||||
selector: 'provider-3a',
|
selector: 'provider-3',
|
||||||
template: '{{log}}',
|
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;
|
String log;
|
||||||
|
|
||||||
ProviderComponent3a(Logger logger) {
|
ProviderComponent3(Logger logger) {
|
||||||
logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
|
logger.log('Hello from logger provided with useClass:Logger');
|
||||||
log = logger.logs[0];
|
log = logger.logs[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -250,7 +253,7 @@ class ProviderComponent10 implements OnInit {
|
||||||
template: '''
|
template: '''
|
||||||
<h2>Provider variations</h2>
|
<h2>Provider variations</h2>
|
||||||
<div id="p1"><provider-1></provider-1></div>
|
<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="p4"><provider-4></provider-4></div>
|
||||||
<div id="p5"><provider-5></provider-5></div>
|
<div id="p5"><provider-5></provider-5></div>
|
||||||
<div id="p6a"><provider-6a></provider-6a></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>''',
|
<div id="p10"><provider-10></provider-10></div>''',
|
||||||
directives: const [
|
directives: const [
|
||||||
ProviderComponent1,
|
ProviderComponent1,
|
||||||
ProviderComponent3a,
|
ProviderComponent3,
|
||||||
ProviderComponent4,
|
ProviderComponent4,
|
||||||
ProviderComponent5,
|
ProviderComponent5,
|
||||||
ProviderComponent6a,
|
ProviderComponent6a,
|
||||||
|
|
|
@ -80,9 +80,9 @@ describe('Dependency Injection Tests', function () {
|
||||||
expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
|
expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('P3a (provide) displays as expected', function () {
|
it('P3 (provide) displays as expected', function () {
|
||||||
expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }';
|
expectedMsg = 'Hello from logger provided with useClass:Logger';
|
||||||
expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
|
expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('P4 (useClass:BetterLogger) displays as expected', function () {
|
it('P4 (useClass:BetterLogger) displays as expected', function () {
|
||||||
|
|
|
@ -31,17 +31,17 @@ export class ProviderComponent1 {
|
||||||
|
|
||||||
//////////////////////////////////////////
|
//////////////////////////////////////////
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'provider-3a',
|
selector: 'provider-3',
|
||||||
template: template,
|
template: template,
|
||||||
providers:
|
providers:
|
||||||
// #docregion providers-3a
|
// #docregion providers-3
|
||||||
[{ provide: Logger, useClass: Logger }]
|
[{ provide: Logger, useClass: Logger }]
|
||||||
// #enddocregion providers-3a
|
// #enddocregion providers-3
|
||||||
})
|
})
|
||||||
export class ProviderComponent3a {
|
export class ProviderComponent3 {
|
||||||
log: string;
|
log: string;
|
||||||
constructor(logger: Logger) {
|
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];
|
this.log = logger.logs[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -252,7 +252,7 @@ export class ProviderComponent10 {
|
||||||
template: `
|
template: `
|
||||||
<h2>Provider variations</h2>
|
<h2>Provider variations</h2>
|
||||||
<div id="p1"><provider-1></provider-1></div>
|
<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="p4"><provider-4></provider-4></div>
|
||||||
<div id="p5"><provider-5></provider-5></div>
|
<div id="p5"><provider-5></provider-5></div>
|
||||||
<div id="p6a"><provider-6a></provider-6a></div>
|
<div id="p6a"><provider-6a></provider-6a></div>
|
||||||
|
@ -264,7 +264,7 @@ export class ProviderComponent10 {
|
||||||
`,
|
`,
|
||||||
directives: [
|
directives: [
|
||||||
ProviderComponent1,
|
ProviderComponent1,
|
||||||
ProviderComponent3a,
|
ProviderComponent3,
|
||||||
ProviderComponent4,
|
ProviderComponent4,
|
||||||
ProviderComponent5,
|
ProviderComponent5,
|
||||||
ProviderComponent6a,
|
ProviderComponent6a,
|
||||||
|
|
|
@ -43,8 +43,10 @@ block real-logger
|
||||||
A real implementation would probably use the
|
A real implementation would probably use the
|
||||||
[logging package](https://pub.dartlang.org/packages/logging).
|
[logging package](https://pub.dartlang.org/packages/logging).
|
||||||
|
|
||||||
block optional-logger
|
block canonical-provider-expr
|
||||||
//- TBC.
|
| that creates a new instance of the
|
||||||
|
a(href="../api/core/Provider-class.html") Provider
|
||||||
|
| class:
|
||||||
|
|
||||||
block provider-ctor-args
|
block provider-ctor-args
|
||||||
- var _secondParam = 'named parameter, such as <code>useClass</code>'
|
- 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.
|
Instead, we use constant literals or constant constructors.
|
||||||
For example, a TypeScript program will use the
|
For example, a TypeScript program will use the
|
||||||
object literal `{ provide: Logger, useClass: BetterLogger }`.
|
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
|
block dart-diff-const-metadata-ctor
|
||||||
.callout.is-helpful
|
.callout.is-helpful
|
||||||
|
|
|
@ -518,14 +518,16 @@ code-example(format="nocode").
|
||||||
|
|
||||||
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
|
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
|
||||||
|
|
||||||
:marked
|
p
|
||||||
This is actually a short-hand expression for a provider registration using the _provider_ object literal.
|
| This is actually a short-hand expression for a provider registration
|
||||||
|
block canonical-provider-expr
|
||||||
|
| 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
|
block provider-ctor-args
|
||||||
- var _secondParam = 'provider definition object';
|
- var _secondParam = 'provider definition object';
|
||||||
//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object';
|
|
||||||
:marked
|
:marked
|
||||||
The first is the [token](#token) that serves as the key for both locating a dependency value
|
The first is the [token](#token) that serves as the key for both locating a dependency value
|
||||||
and registering the provider.
|
and registering the provider.
|
||||||
|
|
Loading…
Reference in New Issue