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

docs(template-syntax): review and update Dart to new doc design #1465

Merged
merged 4 commits into from
May 25, 2016
Merged

docs(template-syntax): review and update Dart to new doc design #1465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55d527f
ts template-syntax.jade without docregion tags
chalin May 21, 2016
535e739
updated guide/template-syntax for dart and ts
chalin May 21, 2016
38daeba
post-review updates
chalin May 24, 2016
7abed79
clarify style property naming in Dart
chalin May 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions public/_includes/_util-fns.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
- var _an = 'an';

//- TS arrays vs. Dart lists
- var _Array = 'Array';
- var _array = 'array';
//- Deprecate now that we have the articles _a and _an
- var _an_array = 'an array';
Expand All @@ -32,15 +33,18 @@
//- Location of sample code
- var _liveLink = 'live link';

//- Other
- var _truthy = 'truthy';
- var _falsey = 'falsey';

//- Used to prefix identifiers that are private. In Dart this will be '_'.
- var _priv = '';

//- Use to conditionally include the block that follows +ifDocsFor(...).
//- Generally favor use of Jade named blocks instead. ifDocsFor is convenient
//- for prose that should appear only in one language version.
mixin ifDocsFor(lang)
if _docsFor.toLowerCase() === lang.toLowerCase()
mixin ifDocsFor(langPattern)
if _docsFor.toLowerCase().match(langPattern.toLowerCase())
block

//- Use to map inlined (prose) TS paths into, say, Dart paths via the
Expand Down
Empty file added public/docs/_examples/template-syntax/dart/example-config.json
View file
Open in desktop
Whitespace-only changes.
18 changes: 11 additions & 7 deletions public/docs/_examples/template-syntax/dart/lib/app_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'dart:convert';
import 'dart:html';

import 'package:angular2/core.dart';
import 'package:angular2/common.dart';

import 'hero.dart';
import 'hero_detail_component.dart';
Expand Down Expand Up @@ -40,7 +41,9 @@ class AppComponent implements OnInit, AfterViewInit {
bool isSpecial = true;
bool isUnchanged = true;
bool isSelected = false;
final Color colorRed = Color.red;
Color color = Color.red;
var colorEnum = Color;

List<Hero> heroes;
Hero currentHero;
Expand All @@ -56,7 +59,7 @@ class AppComponent implements OnInit, AfterViewInit {
final Hero nullHero = null;
Map product = {'name': 'frimfram', 'price': 42};
FormElement form;
String clickity = '';
String clicked = '';
String clickMessage = '';
String clickMessage2 = '';
final String iconUrl = 'assets/images/ng-logo.png';
Expand Down Expand Up @@ -87,14 +90,14 @@ class AppComponent implements OnInit, AfterViewInit {

int getVal() => val;

void onCancel(MouseEvent event) {
DivElement el = event.target;
void onCancel(UIEvent event) {
HtmlElement el = event?.target;
var evtMsg = event != null ? 'Event target is ${el.innerHtml}.' : '';
alerter('Canceled. $evtMsg');
}

void onClickMe(MouseEvent event) {
DivElement el = event.target;
void onClickMe(UIEvent event) {
HtmlElement el = event?.target;
var evtMsg = event != null ? 'Event target class is ${el.className}.' : '';
alerter('Click me. $evtMsg');
}
Expand All @@ -103,9 +106,10 @@ class AppComponent implements OnInit, AfterViewInit {
alerter('Deleted hero: ${hero?.firstName}');
}

bool onSave([MouseEvent event = null]) {
bool onSave([UIEvent event = null]) {
HtmlElement el = event?.target;
var evtMsg =
event != null ? ' Event target is ${event.target.innerHtml}.' : '';
event != null ? ' Event target is ${el.innerHtml}.' : '';
alerter('Saved. $evtMsg');
return false;
}
Expand Down
81 changes: 37 additions & 44 deletions public/docs/_examples/template-syntax/dart/lib/app_component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ <h1>Template Syntax</h1>
</div>
<br>
<a href="#star-prefix">* prefix and &lt;template&gt;</a><br>
<a href="#local-vars">Template local variables</a><br>
<a href="#ref-vars">Template reference variables</a><br>
<a href="#inputs-and-outputs">Inputs and outputs</a><br>
<a href="#pipes">Pipes</a><br>
<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
<!--<a href="#enums">Enums</a><br>-->
<a href="#enums">Enums</a><br>

<!-- Interpolation and expressions -->
<hr><h2 id="interpolation">Interpolation</h2>
Expand Down Expand Up @@ -105,9 +105,9 @@ <h3>
<!-- #docregion event-binding-syntax-1 -->
<button (click) = "onSave()">Save</button>
<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
<div (myClick)="clickity=$event">click me</div>
<div (myClick)="clicked=$event">click me</div>
<!-- #enddocregion event-binding-syntax-1 -->
{{clickity}}
{{clicked}}
<br><br>

<div>
Expand Down Expand Up @@ -184,15 +184,14 @@ <h3>
<!-- #enddocregion property-binding-5 -->

<!-- #docregion property-binding-6 -->
<!-- BAD! HeroDetailComponent.hero expects a Hero object,
not the string "currentHero".

<hero-detail hero="currentHero"></hero-detail> -->
<!-- ERROR: HeroDetailComponent.hero expects a
Hero object, not the string "currentHero" -->
<!-- #enddocregion property-binding-6 -->

<!-- In checked mode, uncommenting the hero-detail above causes this:
EXCEPTION: type 'String' is not a subtype of type 'Hero' of 'value'. -->

<div *ngIf="false">
<!-- #docregion property-binding-6 -->
<hero-detail hero="currentHero"></hero-detail>
<!-- #enddocregion property-binding-6 -->
</div>
<!-- #docregion property-binding-7 -->
<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
<!-- #enddocregion property-binding-7 -->
Expand All @@ -202,7 +201,7 @@ <h3>
Property bound: <img [src]="heroImageUrl">

<div>The interpolated title is {{title}}</div>
<div [textContent]="'The [textContent] title is '+title"></div>
<div [innerHTML]="'The [innerHTML] title is '+title"></div>
<!-- #enddocregion property-binding-vs-interpolation -->

<a class="to-toc" href="#toc">top</a>
Expand Down Expand Up @@ -258,9 +257,7 @@ <h3>
<!-- #docregion class-binding-2 -->
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly</div>
<p><b>Note:</b> "Bad curly" should be smaller but isn't, due to
<a href="http://github.com/angular/angular/issues/6901">issue #6901</a>.</p>
[className]="badCurly">Bad curly</div>
<!-- #enddocregion class-binding-2 -->

<!-- #docregion class-binding-3 -->
Expand Down Expand Up @@ -443,7 +440,7 @@ <h3>Use setStyles() - CSS property names</h3>
<!-- #enddocregion NgIf-1 -->

<!-- #docregion NgIf-2 -->
<!-- not displayed because nullHero is false.
<!-- because of the ngIf guard
`nullHero.firstName` never has a chance to fail -->
<div *ngIf="nullHero != null">Hello, {{nullHero.firstName}}</div>

Expand Down Expand Up @@ -504,10 +501,10 @@ <h3>Use setStyles() - CSS property names</h3>
<!-- #enddocregion NgSwitch -->

<!-- with <template> -->
<template ngSwitchWhen="Eenie"><span>Eenie</span></template>
<template ngSwitchWhen="Meanie"><span>Meanie</span></template>
<template ngSwitchWhen="Miney"><span>Miney</span></template>
<template ngSwitchWhen="Moe"><span>Moe</span></template>
<template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The objective was to show the result of desugaring the *ngSwitchWhen without any optimizations. The chapter material is complex enough, so I preferred that the reader not be forced to recall that if the template expression is a string constant then:
<foo [x]="'s'">
is equivalent to
<foo x="s">
Besides, this is what matches the TS example. Let me know if you agree with this reasoning.

<template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template>
<template [ngSwitchWhen]="'Miney'"><span>Miney</span></template>
<template [ngSwitchWhen]="'Moe'"><span>Moe</span></template>
<template ngSwitchDefault><span>other</span></template>

<!-- #docregion NgSwitch -->
Expand Down Expand Up @@ -651,8 +648,8 @@ <h3>*ngFor expansion</h3>

<a class="to-toc" href="#toc">top</a>

<!-- template local variable -->
<hr><h2 id="local-vars">Template local variables</h2>
<!-- template reference variable -->
<hr><h2 id="ref-vars">Template reference variables</h2>

<!-- #docregion ref-phone -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
Expand Down Expand Up @@ -682,7 +679,7 @@ <h4>Example Form</h4>
<br><br>

<!-- btn refers to the button element; show its disabled state -->
<button #btn disabled [textContent]="'disabled by attribute: ' + btn.disabled.toString()"></button>
<button #btn disabled [innerHTML]="'disabled by attribute: ' + btn.disabled.toString()"></button>

<a class="to-toc" href="#toc">top</a>

Expand All @@ -708,13 +705,15 @@ <h4>Example Form</h4>
<hr><h2 id="pipes">Pipes</h2>

<!-- #docregion pipes-1 -->
<!-- Force title to uppercase -->
<div>{{ title | uppercase }}</div>
<div>Title through uppercase pipe: {{title | uppercase}}</div>
<!-- #enddocregion pipes-1 -->

<!-- #docregion pipes-2 -->
<!-- Pipe chaining: force title to uppercase, then to lowercase -->
<div>{{ title | uppercase | lowercase }}</div>
<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
<div>
Title through a pipe chain:
{{title | uppercase | lowercase}}
</div>
<!-- #enddocregion pipes-2 -->

<!-- #docregion pipes-3 -->
Expand All @@ -723,16 +722,14 @@ <h4>Example Form</h4>
<!-- #enddocregion pipes-3 -->

<!-- #docregion pipes-json -->
<!-- We don't suggest using json for debugging; you'd probably use toString() instead.
Is there a good use for the json pipe in Dart? -->
<!--<div>{{currentHero | json}}</div>-->
<div>{{currentHero}}</div>
<!-- #enddocregion pipes-json -->

<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>

<div>
<!-- pipe price to USD and display the $ symbol -->
<label>Price: </label>{{product['price'] | currency:'$'}}
<label>Price: </label>{{product['price'] | currency:'USD':false}}
</div>

<a class="to-toc" href="#toc">top</a>
Expand All @@ -759,7 +756,6 @@ <h4>Example Form</h4>
</div>



<!--
The null hero's name is {{nullHero.firstName}}

Expand All @@ -784,19 +780,16 @@ <h4>Example Form</h4>

<a class="to-toc" href="#toc">top</a>

<!-- Todo: discuss this in the Style binding section -->
<!-- TODO: discuss this in the Style binding section -->
<!-- enums in bindings -->

<hr><h2 id="enums">Enums in binding</h2>

<!--<p>The name of the Color.red enum is {{color}}</p>-->
<p>The current color number is {{color}}</p>
<p><button [style.color]="color.toString()" (click)="colorToggle()">Enum Toggle</button>

<a class="to-toc" href="#toc">top</a>

<!-- #docregion my-first-app -->
<h3>My First Angular Application</h3>
<!-- #enddocregion my-first-app -->
<p>
<!-- #docregion enums -->
The name of the Color.red enum is {{colorRed}}.<br>
The current color is {{color}} and its index is {{color.index}}.<br>
<button [style.color]="color.toString()" (click)="colorToggle()">Enum Toggle</button>
<!-- #enddocregion enums -->
</p>

<a class="to-toc" href="#toc">top</a>
Loading