Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit e958be2

Browse files
chalinthso
chalin
authored and
thso
committed
docs(dev guide): attribute-directives - updated dart/ts code and new dart prose
Mainly copyedits and prep for extension + example code cleanup & bug fix + fix bug in default color initialization
1 parent ac92e77 commit e958be2

17 files changed

+201
-216
lines changed

‎public/_includes/_util-fns.jade

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
11
//- Mixins and associated functions
22
3-
- var _docsFor = 'ts'; // or 'dart' or 'js'.
3+
//- _docsFor: used to identify the language this version of the docs if for;
4+
//- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
5+
- var _docsFor = '';
46

7+
//- Simple "macros" used via interpolation in text:
8+
//- e.g., the #{_priv}el variable has an `@Input` #{_decorator}.
9+
10+
//- Use #{_decorator} whereever the word "decorator" is expected, provided it is not
11+
//- preceded by the article "a". (E.g., will be "annotation" for Dart)
12+
- var _decorator = 'decorator';
13+
14+
//- Used to prefix identifiers that are private. In Dart this will be '_'.
15+
- var _priv = '';
16+
17+
//- Use to conditionally include the block that follows +ifDocsFor(...).
18+
//- Generally favor use of Jade named blocks instead. ifDocsFor is convenient
19+
//- for prose that should appear only in one language version.
520
mixin ifDocsFor(lang)
621
if _docsFor.toLowerCase() === lang.toLowerCase()
722
block
823

24+
//- Use to map inlined (prose) TS paths into, say, Dart paths via the
25+
//- adjustExamplePath transformer function.
926
mixin adjExPath(path)
1027
if adjustExamplePath
1128
| #{adjustExamplePath(path)}

‎public/docs/_examples/attribute-directives/dart/lib/app_component.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import 'highlight_directive.dart';
66
@Component(
77
selector: 'my-app',
88
templateUrl: 'app_component.html',
9-
directives: const [Highlight])
9+
directives: const [HighlightDirective])
1010
class AppComponent {
1111
String color;
1212
}

‎public/docs/_examples/attribute-directives/dart/lib/app_component.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ <h4>Pick a highlight color</h4>
77
<input type="radio" name="colors" (click)="color='yellow'">Yellow
88
<input type="radio" name="colors" (click)="color='cyan'">Cyan
99
</div>
10-
<!-- #docregion span -->
11-
<p><span [my-highlight]="color">Highlight me!</span></p>
12-
<!-- #enddocregion span -->
10+
<!-- #docregion pHost -->
11+
<p [myHighlight]="color">Highlight me!</p>
12+
<!-- #enddocregion pHost -->
1313
<!-- #enddocregion v2 -->
1414

1515
<!-- #docregion defaultColor -->
16-
<p><span [my-highlight]="color" [default-color]="'violet'">
16+
<p [myHighlight]="color" [defaultColor]="'violet'">
1717
Highlight me too!
18-
</span></p>
18+
</p>
1919
<!-- #enddocregion defaultColor -->
2020
<!-- #enddocregion -->

‎public/docs/_examples/attribute-directives/dart/lib/app_component_1.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<!-- #docregion -->
22
<h1>My First Attribute Directive</h1>
3-
<span my-highlight>Highlight me!</span>
3+
<p myHighlight>Highlight me!</p>

‎public/docs/_examples/attribute-directives/dart/lib/highlight_directive.dart

+22-31
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,42 @@
22
// #docregion full
33
import 'package:angular2/core.dart';
44

5-
@Directive(selector: '[my-highlight]', host: const {
5+
@Directive(selector: '[myHighlight]', host: const {
66
'(mouseenter)': 'onMouseEnter()',
77
'(mouseleave)': 'onMouseLeave()'
88
})
99
// #docregion class-1
10-
class Highlight {
11-
// #enddocregion class-1
12-
// #enddocregion full
13-
/*
14-
// #docregion highlight
15-
@Input() myHighlight: string;
16-
// #enddocregion highlight
17-
*/
18-
// #docregion full
19-
// #docregion class-1
20-
// #docregion color
21-
@Input('my-highlight') String highlightColor;
22-
// #enddocregion color
23-
10+
class HighlightDirective {
2411
String _defaultColor = 'red';
12+
final dynamic _el;
13+
14+
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
2515
// #enddocregion class-1
16+
2617
// #docregion defaultColor
2718
@Input() set defaultColor(String colorName) {
2819
_defaultColor = (colorName ?? _defaultColor);
2920
}
3021
// #enddocregion defaultColor
31-
// #docregion class-1
32-
33-
final ElementRef _element;
34-
35-
// #docregion mouse-enter
36-
onMouseEnter() {
37-
_highlight(highlightColor ?? _defaultColor);
38-
}
22+
// #docregion class-1
3923

40-
// #enddocregion mouse-enter
41-
onMouseLeave() {
42-
_highlight(null);
43-
}
24+
// #docregion color
25+
@Input('myHighlight') String highlightColor;
26+
// #enddocregion color
27+
28+
// #docregion mouse-enter
29+
void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); }
30+
// #enddocregion mouse-enter
31+
void onMouseLeave() { _highlight(); }
4432

45-
void _highlight(String color) {
46-
_element.nativeElement.style.backgroundColor = color;
33+
void _highlight([String color]) {
34+
if(_el != null) _el.style.backgroundColor = color;
4735
}
48-
49-
Highlight(this._element);
5036
}
5137
// #enddocregion class-1
5238
// #enddocregion full
39+
/*
40+
// #docregion highlight
41+
@Input() String myHighlight;
42+
// #enddocregion highlight
43+
*/

‎public/docs/_examples/attribute-directives/dart/lib/highlight_directive_1.dart

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ library attribute_directives.highlight_directive;
33

44
import 'package:angular2/core.dart';
55

6-
@Directive(selector: '[my-highlight]')
7-
class Highlight {
8-
Highlight(ElementRef element) {
6+
@Directive(selector: '[myHighlight]')
7+
class HighlightDirective {
8+
HighlightDirective(ElementRef element) {
99
element.nativeElement.style.backgroundColor = 'yellow';
1010
}
1111
}

‎public/docs/_examples/attribute-directives/dart/lib/highlight_directive_2.dart

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
11
// #docregion
22
import 'package:angular2/core.dart';
33

4-
@Directive(selector: '[my-highlight]',
5-
// #docregion host
4+
@Directive(selector: '[myHighlight]',
5+
// #docregion host
66
host: const {
77
'(mouseenter)': 'onMouseEnter()',
88
'(mouseleave)': 'onMouseLeave()'
99
}
10-
// #enddocregion host
11-
)
12-
class Highlight {
13-
final ElementRef _element;
14-
// #docregion mouse-methods
15-
onMouseEnter() {
16-
_highlight("yellow");
17-
}
10+
// #enddocregion host
11+
)
12+
class HighlightDirective {
13+
// #docregion ctor
14+
final dynamic _el;
1815

19-
onMouseLeave() {
20-
_highlight(null);
21-
}
22-
// #enddocregion mouse-methods
16+
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
17+
// #enddocregion ctor
2318

24-
void _highlight(String color) {
25-
_element.nativeElement.style.backgroundColor = color;
26-
}
19+
// #docregion mouse-methods
20+
void onMouseEnter() { _highlight("yellow"); }
21+
void onMouseLeave() { _highlight(); }
2722

28-
// #docregion ctor
29-
Highlight(this._element);
30-
// #enddocregion ctor
23+
void _highlight([String color]) {
24+
if (_el != null) _el.style.backgroundColor = color;
25+
}
26+
// #enddocregion mouse-methods
3127
}
3228
// #enddocregion

‎public/docs/_examples/attribute-directives/ts/app/app.component.1.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<!-- #docregion -->
22
<h1>My First Attribute Directive</h1>
3-
<span myHighlight>Highlight me!</span>
4-
<!-- #enddocregion -->
3+
<p myHighlight>Highlight me!</p>
4+
<!-- #enddocregion -->

‎public/docs/_examples/attribute-directives/ts/app/app.component.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@ <h4>Pick a highlight color</h4>
77
<input type="radio" name="colors" (click)="color='yellow'">Yellow
88
<input type="radio" name="colors" (click)="color='cyan'">Cyan
99
</div>
10-
11-
<!-- #docregion span -->
10+
<!-- #docregion pHost -->
1211
<p [myHighlight]="color">Highlight me!</p>
13-
<!-- #enddocregion span -->
12+
<!-- #enddocregion pHost -->
1413
<!-- #enddocregion v2 -->
1514

1615
<!-- #docregion defaultColor -->
1716
<p [myHighlight]="color" [defaultColor]="'violet'">
1817
Highlight me too!
1918
</p>
2019
<!-- #enddocregion defaultColor -->
21-
22-
<!-- #enddocregion -->
20+
<!-- #enddocregion -->

‎public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
// #docregion
22
import { Directive, ElementRef, Input } from '@angular/core';
33

4-
@Directive({
5-
selector: '[myHighlight]'
6-
})
7-
4+
@Directive({ selector: '[myHighlight]' })
85
export class HighlightDirective {
96
constructor(el: ElementRef) {
107
el.nativeElement.style.backgroundColor = 'yellow';
118
}
129
}
13-
// #enddocregion

‎public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts

+16-22
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,28 @@ import { Directive, ElementRef, Input } from '@angular/core';
99
'(mouseleave)': 'onMouseLeave()'
1010
}
1111
})
12-
1312
// #docregion class-1
1413
export class HighlightDirective {
15-
1614
private _defaultColor = 'red';
17-
private el:HTMLElement;
18-
// #enddocregion class-1
19-
// #enddocregion full
20-
/*
21-
// #docregion highlight
22-
@Input() myHighlight: string;
23-
// #enddocregion highlight
24-
*/
25-
// #docregion full
15+
private el: HTMLElement;
16+
17+
constructor(el: ElementRef) { this.el = el.nativeElement; }
18+
// #enddocregion class-1
2619

27-
// #docregion defaultColor
20+
// #docregion defaultColor
2821
@Input() set defaultColor(colorName:string){
2922
this._defaultColor = colorName || this._defaultColor;
3023
}
31-
// #enddocregion defaultColor
32-
// #docregion class-1
24+
// #enddocregion defaultColor
25+
// #docregion class-1
3326

34-
// #docregion color
27+
// #docregion color
3528
@Input('myHighlight') highlightColor: string;
36-
// #enddocregion color
29+
// #enddocregion color
3730

38-
// #enddocregion class-1
39-
// #docregion class-1
40-
constructor(el: ElementRef) { this.el = el.nativeElement; }
41-
42-
// #docregion mouse-enter
31+
// #docregion mouse-enter
4332
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
44-
// #enddocregion mouse-enter
33+
// #enddocregion mouse-enter
4534
onMouseLeave() { this.highlight(null); }
4635

4736
private highlight(color:string) {
@@ -50,3 +39,8 @@ export class HighlightDirective {
5039
}
5140
// #enddocregion class-1
5241
// #enddocregion full
42+
/*
43+
// #docregion highlight
44+
@Input() myHighlight: string;
45+
// #enddocregion highlight
46+
*/

‎public/docs/_examples/attribute-directives/ts/index.html

-3
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,7 @@
1919
System.import('app').catch(function(err){ console.error(err); });
2020
</script>
2121
</head>
22-
23-
2422
<body>
2523
<my-app>loading...</my-app>
2624
</body>
27-
2825
</html>

‎public/docs/dart/latest/_util-fns.jade

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
include ../../../_includes/_util-fns
22

3+
//- See the _util-fns file included above for a description of the use of these variables.
34
- var _docsFor = 'dart';
4-
5-
mixin privateVar(varName)
6-
| _#{varName}
5+
- var _decorator = 'annotation';
6+
- var _priv = '_';
77

88
mixin liveExampleLink(linkText, exampleUrlPartName)
99
a(href='https://angular-examples.github.io/#{exampleUrlPartName}')= linkText
1010

1111
mixin liveExampleLink2(linkText, exampleUrlPartName)
1212
- var liveExampleSourceLinkText = attributes.srcLinkText || 'view source'
13-
span.
14-
#[+liveExampleLink(linkText, exampleUrlPartName)]
15-
(#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}') #{liveExampleSourceLinkText}])
13+
| #[+liveExampleLink(linkText, exampleUrlPartName)]
14+
| (#[a(href='https://github.com/angular-examples/#{exampleUrlPartName}') #{liveExampleSourceLinkText}])
1615

1716
//- Deprecated
1817
mixin liveExLinks(exampleUrlPartName)
@@ -42,8 +41,8 @@ mixin liveExLinks(exampleUrlPartName)
4241
- if(!_title || !adjustExamplePath) return _title;
4342
- var title = _title.trim();
4443
- // Assume title is a path if it ends with an extension like '.foo',
45-
- // optionally followed by '(excerpt)' with or without parentheses.
46-
- var matches = title.match(/(.*\.\w+)($|\s*\(?excerpt\)?$)/);
44+
- // optionally followed by some comment in parentheses.
45+
- var matches = title.match(/(.*\.\w+)($|\s*\([\w ]+\)?$)/);
4746
- if(matches && matches.length == 3) {
4847
- // e.g. matches == ['abc.ts (excerpt)', 'abc.ts', ' (excerpt)']
4948
- var path = adjustExamplePath(matches[1]);

‎public/docs/dart/latest/guide/attribute-directives.jade

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
include ../_util-fns
1+
extends ../../../ts/latest/guide/attribute-directives.jade
22

3-
:marked
4-
We're working on the Dart version of this chapter.
5-
In the meantime, please see these resources:
6-
7-
* [Attribute Directives](/docs/ts/latest/guide/attribute-directives.html):
8-
The TypeScript version of this chapter
9-
10-
* [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/attribute-directives/dart):
11-
A preliminary version of the example code that will appear in this chapter
3+
block includes
4+
include ../_util-fns
125

6+
block highlight-directive-1
7+
:marked
8+
We begin by importing the Angular `core`.
9+
Then we define the directive metadata by means of the `@Directive` annotation.

‎public/docs/ts/latest/_util-fns.jade

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
include ../../../_includes/_util-fns
22

3-
- var docsFor = 'ts';
4-
5-
mixin privateVar(varName)
6-
| #{varName}
3+
//- See the _util-fns file included above for a description of the use of these variables.
4+
- var _docsFor = 'ts';
5+
- var _decorator = 'decorator';
6+
- var _priv = '';
77

88
mixin liveExampleLink(linkText, exampleUrlPartName)
99
a(href='/resources/live-examples/#{exampleUrlPartName}/ts/plnkr.html')= linkText
1010

1111
mixin liveExampleLink2(linkText, exampleUrlPartName)
1212
//- In Dart this also gives a link to the source.
13-
span.
14-
#[+liveExampleLink(linkText, exampleUrlPartName)]
13+
| #[+liveExampleLink(linkText, exampleUrlPartName)]

0 commit comments

Comments
 (0)