Skip to content

Commit 3c77a7f

Browse files
chalinkwalrath
authored andcommitted
docs(basics/di): minor edits following TS switch to provider object literal (angular#1600)
Minor edits: - Dart side adjustments following angular#1594. - Renamed example '3a' to just '3' and tweaked the logger message - Removed obsolete Dart block.
1 parent e6643b0 commit 3c77a7f

File tree

5 files changed

+32
-24
lines changed

5 files changed

+32
-24
lines changed

public/docs/_examples/dependency-injection/dart/lib/providers_component.dart

+10-7
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,18 @@ class ProviderComponent1 {
2929

3030
/// Component just used to ensure that shared E2E tests pass.
3131
@Component(
32-
selector: 'provider-3a',
32+
selector: 'provider-3',
3333
template: '{{log}}',
34-
providers: const [const Provider(Logger, useClass: Logger)]
34+
providers:
35+
// #docregion providers-3
36+
const [const Provider(Logger, useClass: Logger)]
37+
// #enddocregion providers-3
3538
)
36-
class ProviderComponent3a {
39+
class ProviderComponent3 {
3740
String log;
3841

39-
ProviderComponent3a(Logger logger) {
40-
logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
42+
ProviderComponent3(Logger logger) {
43+
logger.log('Hello from logger provided with useClass:Logger');
4144
log = logger.logs[0];
4245
}
4346
}
@@ -250,7 +253,7 @@ class ProviderComponent10 implements OnInit {
250253
template: '''
251254
<h2>Provider variations</h2>
252255
<div id="p1"><provider-1></provider-1></div>
253-
<div id="p3a"><provider-3a></provider-3a></div>
256+
<div id="p3"><provider-3></provider-3></div>
254257
<div id="p4"><provider-4></provider-4></div>
255258
<div id="p5"><provider-5></provider-5></div>
256259
<div id="p6a"><provider-6a></provider-6a></div>
@@ -261,7 +264,7 @@ class ProviderComponent10 implements OnInit {
261264
<div id="p10"><provider-10></provider-10></div>''',
262265
directives: const [
263266
ProviderComponent1,
264-
ProviderComponent3a,
267+
ProviderComponent3,
265268
ProviderComponent4,
266269
ProviderComponent5,
267270
ProviderComponent6a,

public/docs/_examples/dependency-injection/e2e-spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,9 @@ describe('Dependency Injection Tests', function () {
8080
expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
8181
});
8282

83-
it('P3a (provide) displays as expected', function () {
84-
expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }';
85-
expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
83+
it('P3 (provide) displays as expected', function () {
84+
expectedMsg = 'Hello from logger provided with useClass:Logger';
85+
expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
8686
});
8787

8888
it('P4 (useClass:BetterLogger) displays as expected', function () {

public/docs/_examples/dependency-injection/ts/app/providers.component.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,17 @@ export class ProviderComponent1 {
3131

3232
//////////////////////////////////////////
3333
@Component({
34-
selector: 'provider-3a',
34+
selector: 'provider-3',
3535
template: template,
3636
providers:
37-
// #docregion providers-3a
37+
// #docregion providers-3
3838
[{ provide: Logger, useClass: Logger }]
39-
// #enddocregion providers-3a
39+
// #enddocregion providers-3
4040
})
41-
export class ProviderComponent3a {
41+
export class ProviderComponent3 {
4242
log: string;
4343
constructor(logger: Logger) {
44-
logger.log('Hello from logger provided with { provide: Logger, useClass: Logger }');
44+
logger.log('Hello from logger provided with useClass:Logger');
4545
this.log = logger.logs[0];
4646
}
4747
}
@@ -252,7 +252,7 @@ export class ProviderComponent10 {
252252
template: `
253253
<h2>Provider variations</h2>
254254
<div id="p1"><provider-1></provider-1></div>
255-
<div id="p3a"><provider-3a></provider-3a></div>
255+
<div id="p3"><provider-3></provider-3></div>
256256
<div id="p4"><provider-4></provider-4></div>
257257
<div id="p5"><provider-5></provider-5></div>
258258
<div id="p6a"><provider-6a></provider-6a></div>
@@ -264,7 +264,7 @@ export class ProviderComponent10 {
264264
`,
265265
directives: [
266266
ProviderComponent1,
267-
ProviderComponent3a,
267+
ProviderComponent3,
268268
ProviderComponent4,
269269
ProviderComponent5,
270270
ProviderComponent6a,

public/docs/dart/latest/guide/dependency-injection.jade

+6-3
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,10 @@ block real-logger
4343
A real implementation would probably use the
4444
[logging package](https://pub.dartlang.org/packages/logging).
4545

46-
block optional-logger
47-
//- TBC.
46+
block canonical-provider-expr
47+
| &nbsp;that creates a new instance of the&nbsp;
48+
a(href="../api/core/Provider-class.html") Provider
49+
| &nbsp;class:
4850

4951
block provider-ctor-args
5052
- var _secondParam = 'named parameter, such as <code>useClass</code>'
@@ -61,7 +63,8 @@ block dart-diff-const-metadata
6163
Instead, we use constant literals or constant constructors.
6264
For example, a TypeScript program will use the
6365
object literal `{ provide: Logger, useClass: BetterLogger }`.
64-
A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`.
66+
A Dart annotation would instead use the constant value
67+
`const Provider(Logger, useClass: BetterLogger)`.
6568

6669
block dart-diff-const-metadata-ctor
6770
.callout.is-helpful

public/docs/ts/latest/guide/dependency-injection.jade

+6-4
Original file line numberDiff line numberDiff line change
@@ -518,14 +518,16 @@ code-example(format="nocode").
518518

519519
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
520520

521-
:marked
522-
This is actually a short-hand expression for a provider registration using the _provider_ object literal.
521+
p
522+
| This is actually a short-hand expression for a provider registration
523+
block canonical-provider-expr
524+
| &nbsp;using a <i>provider</i> object literal with two properties:
523525

524-
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
526+
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
525527

526528
block provider-ctor-args
527529
- var _secondParam = 'provider definition object';
528-
//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object';
530+
529531
:marked
530532
The first is the [token](#token) that serves as the key for both locating a dependency value
531533
and registering the provider.

0 commit comments

Comments
 (0)