Merge remote-tracking branch 'origin/master'
# Conflicts: # public/docs/ts/latest/guide/dependency-injection.jade
This commit is contained in:
Zhicheng Wang
commit
6b8e09bf2b
|
|
@ -960,8 +960,9 @@ function devGuideExamplesWatch(shredOptions, postShredAction) {
|
|||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_fragments/**',
|
||||
'**/dart/build/**' ]});
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**',
|
||||
'**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
|
||||
var files = globby.sync( [includePattern], { ignore: ignoreThese });
|
||||
gulp.watch([files], {readDelay: 500}, function (event, done) {
|
||||
gutil.log('Dev Guide example changed')
|
||||
gutil.log('Event type: ' + event.type); // added, changed, or deleted
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Architecture overview",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/architecture.html"
|
||||
"title": "Architecture Overview",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"title": "Attribute Directives",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Dependency injection",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/dependency-injection.html"
|
||||
"title": "Dependency Injection",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Displaying data",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/displaying-data.html"
|
||||
"title": "Displaying Data",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Forms",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/forms.html"
|
||||
"title": "Forms",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"title": "Hierarchical Dependency Injection",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"title": "Pipes",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"title": "QuickStart"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "HTTP client (server communication)",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/server-communication.html"
|
||||
"title": "HTTP Client (Server Communication)",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Template Syntax",
|
||||
"docHref": "https://angular.io/docs/ts/latest/guide/template-syntax.html"
|
||||
"title": "Template Syntax",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"title": "Tour of Heroes: The Hero Editor",
|
||||
"docPart": "tutorial",
|
||||
"docHref": "toh-pt1.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"title": "Tour of Heroes: Master/Detail",
|
||||
"docPart": "tutorial",
|
||||
"docHref": "toh-pt2.html"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// #docregion pt2
|
||||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
class Hero {
|
||||
|
|
@ -29,7 +29,7 @@ class Hero {
|
|||
</div>
|
||||
</div>
|
||||
''',
|
||||
// #docregion styles-1
|
||||
// #docregion styles
|
||||
styles: const [
|
||||
'''
|
||||
.selected {
|
||||
|
|
@ -80,21 +80,21 @@ class Hero {
|
|||
}
|
||||
'''
|
||||
])
|
||||
// #enddocregion styles-1
|
||||
// #enddocregion styles
|
||||
class AppComponent {
|
||||
final String title = 'Tour of Heroes';
|
||||
final List<Hero> heroes = mockHeroes;
|
||||
// #docregion selected-hero-1
|
||||
// #docregion selected-hero
|
||||
Hero selectedHero;
|
||||
// #enddocregion selected-hero-1
|
||||
// #enddocregion selected-hero
|
||||
|
||||
// #docregion on-select-1
|
||||
// #docregion on-select
|
||||
onSelect(Hero hero) {
|
||||
selectedHero = hero;
|
||||
}
|
||||
// #enddocregion on-select-1
|
||||
// #enddocregion on-select
|
||||
}
|
||||
// #enddocregion pt2
|
||||
// #enddocregion
|
||||
|
||||
// #docregion hero-array
|
||||
final List<Hero> mockHeroes = [
|
||||
|
|
@ -109,6 +109,3 @@ final List<Hero> mockHeroes = [
|
|||
new Hero(19, 'Magma'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
// #enddocregion hero-array
|
||||
|
||||
// #enddocregion pt2
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
// #docregion pt2
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:angular2_tour_of_heroes/app_component.dart';
|
||||
|
||||
main() {
|
||||
void main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
// #enddocregion pt2
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"title": "Tour of Heroes: Multiple Components",
|
||||
"docPart": "tutorial",
|
||||
"docHref": "toh-pt3.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"title": "Tour of Heroes: Services",
|
||||
"docPart": "tutorial",
|
||||
"docHref": "toh-pt4.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"title": "Tour of Heroes: Routing",
|
||||
"docPart": "tutorial",
|
||||
"docHref": "toh-pt5.html"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "User input",
|
||||
"docHref": "https://angular.io/docs/dart/latest/guide/user-input.html"
|
||||
"title": "User Input",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <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
|
||||
|
|
|
|||
|
|
@ -6,14 +6,12 @@ include ../_util-fns
|
|||
We’ll expand our Tour of Heroes app to display a list of heroes,
|
||||
allow the user to select a hero, and display the hero’s details.
|
||||
|
||||
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
|
||||
:marked
|
||||
Let’s take stock of what we’ll need to display a list of heroes.
|
||||
First, we need a list of heroes. We want to display those heroes in the view’s template,
|
||||
so we’ll need a way to do that.
|
||||
|
||||
.callout.is-helpful
|
||||
header Source code
|
||||
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Where We Left Off
|
||||
|
|
@ -48,7 +46,7 @@ code-example(language="bash").
|
|||
### Creating heroes
|
||||
Let’s create a list of ten heroes at the bottom of `app_component.dart`.
|
||||
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (Hero list)')(format=".")
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'hero-array', 'app_component.dart (hero list)')(format=".")
|
||||
|
||||
:marked
|
||||
The `mockHeroes` list is of type `Hero`, the class defined in part one,
|
||||
|
|
@ -59,7 +57,7 @@ code-example(language="bash").
|
|||
### Exposing heroes
|
||||
Let’s create a public property in `AppComponent` that exposes the heroes for binding.
|
||||
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (Hero list property)')
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'hero-array-1', 'app_component.dart (hero list property)')
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
@ -72,7 +70,7 @@ code-example(language="bash").
|
|||
Our component has `heroes`. Let’s create an unordered list in our template to display them.
|
||||
We’ll insert the following chunk of HTML below the title and above the hero details.
|
||||
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (Heroes template)')(format=".")
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-template-1', 'app_component.dart (heroes template)')(format=".")
|
||||
|
||||
:marked
|
||||
Now we have a template that we can fill with our heroes.
|
||||
|
|
@ -103,7 +101,7 @@ code-example(language="bash").
|
|||
“*take each hero in the `heroes` list, store it in the local `hero` variable,
|
||||
and make it available to the corresponding template instance*”.
|
||||
|
||||
The `let` keyword before "hero" identifies the `hero` as a template input variable.
|
||||
The `let` keyword before "hero" identifies `hero` as a template input variable.
|
||||
We can reference this variable within the template to access a hero’s properties.
|
||||
|
||||
Learn more about `ngFor` and template input variables in the
|
||||
|
|
@ -126,21 +124,20 @@ code-example(language="bash").
|
|||
Let’s add some styles to our component by setting the `styles` argument of the `@Component` annotation
|
||||
to the following CSS classes:
|
||||
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'styles-1', 'app_component.dart (Styling)')(format=".")
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'styles', 'app_component.dart (styles)')(format=".")
|
||||
|
||||
:marked
|
||||
Notice that we again use the triple-quote notation for multi-line strings.
|
||||
|
||||
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
|
||||
We'll do this in a later chapter. For now let's keep rolling.
|
||||
|
||||
When we assign styles to a component they are scoped to that specific component.
|
||||
Our styles will only apply to our `AppComponent` and won't "leak" to the outer HTML.
|
||||
|
||||
Our template for displaying the heroes should now look like this:
|
||||
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (Styled heroes)')
|
||||
|
||||
:marked
|
||||
That's a lot of styles! We can put them inline as shown here, or we can move them out to their own file which will make it easier to code our component.
|
||||
We'll do this in a later chapter. For now let's keep rolling.
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'heroes-styled', 'app_component.dart (styled heroes)')
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -156,7 +153,7 @@ code-example(language="bash").
|
|||
### Click event
|
||||
We modify the `<li>` by inserting an Angular event binding to its click event.
|
||||
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (Capturing the click event)')(format=".")
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-click', 'app_component.dart (template excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Focus on the event binding
|
||||
|
|
@ -185,21 +182,21 @@ code-example(language="bash").
|
|||
We no longer need the static `hero` property of the `AppComponent`.
|
||||
**Replace** it with this simple `selectedHero` property:
|
||||
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero-1', 'app_component.dart (selectedHero)')
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'selected-hero', 'app_component.dart (selectedHero)')
|
||||
|
||||
:marked
|
||||
We’ve decided that none of the heroes should be selected before the user picks a hero so
|
||||
we won’t initialize the `selectedHero` as we were doing with `hero`.
|
||||
|
||||
Now **add an `onSelect` method** that sets the `selectedHero` property to the `hero` the user clicked.
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'on-select-1', 'app_component.dart (onSelect)')(format=".")
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'on-select', 'app_component.dart (onSelect)')(format=".")
|
||||
|
||||
:marked
|
||||
We will be showing the selected hero's details in our template.
|
||||
At the moment, it is still referring to the old `hero` property.
|
||||
Let’s fix the template to bind to the new `selectedHero` property.
|
||||
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (Binding to the selectedHero\'s name)')(format=".")
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'selectedHero-details', 'app_component.dart (template excerpt)')(format=".")
|
||||
:marked
|
||||
### Hide the empty detail with ngIf
|
||||
|
||||
|
|
@ -261,16 +258,16 @@ code-example(language="bash").
|
|||
|
||||
The key is the name of the CSS class (`selected`). The value is `true` if the two heroes match and `false` otherwise.
|
||||
We’re saying “*apply the `selected` class if the heroes match, remove it if they don’t*”.
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (Setting the CSS class)')(format=".")
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-1', 'app_component.dart (setting the CSS class)')(format=".")
|
||||
:marked
|
||||
Notice in the template that the `class.selected` is surrounded in square brackets (`[]`).
|
||||
This is the syntax for a Property Binding, a binding in which data flows one way
|
||||
This is the syntax for a **property binding**, a binding in which data flows one way
|
||||
from the data source (the expression `hero == selectedHero`) to a property of `class`.
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (Styling each hero)')(format=".")
|
||||
+makeExample('toh-2/dart-snippets/app_component_snippets_pt2.dart', 'class-selected-2', 'app_component.dart (styling each hero)')(format=".")
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
Learn more about [Property Binding](../guide/template-syntax.html#property-binding)
|
||||
Learn more about [property bindings](../guide/template-syntax.html#property-binding)
|
||||
in the Template Syntax chapter.
|
||||
|
||||
:marked
|
||||
|
|
@ -285,7 +282,7 @@ code-example(language="bash").
|
|||
|
||||
Here's the complete `app_component.dart` as it stands now:
|
||||
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', 'pt2', 'app_component.dart')
|
||||
+makeExample('toh-2/dart/lib/app_component.dart', '', 'app_component.dart')
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -296,6 +293,8 @@ code-example(language="bash").
|
|||
* We added the ability to select a hero and show the hero’s details
|
||||
* We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template
|
||||
|
||||
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
|
||||
:marked
|
||||
### The Road Ahead
|
||||
Our Tour of Heroes has grown, but it’s far from complete.
|
||||
We can't put the entire app into a single component.
|
||||
|
|
|
|||
|
|
@ -809,16 +809,18 @@ 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 <i>provider</i> object literal with two properties:
|
||||
p
|
||||
| 这实际上是用_provider_对象的字面量注册供应商的缩写表达式。
|
||||
|
||||
这实际上是使用_provider_对象常量注册供应商的缩写表达式。
|
||||
|
||||
+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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue