honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #139 from angular/kwalrath-dart-25

Browse Source 
Update the Dart guide's code and text to alpha.26 (from 23)
This commit is contained in:
Kathy Walrath
2015-06-08 15:46:59 -07:00
parent e3e8bb5689 299700c26c
commit 8a6138bf2c
5 changed files with 302 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/dart/latest/guide/displaying-data.jade
+205 -179
View File
File diff suppressed because it is too large Load Diff
public/docs/dart/latest/guide/making-components.jade
+14 -19
View File
@@ -11,18 +11,16 @@
component that uses a <code>&lt;child&gt;</code> component like so:
code-example(language="dart" format="linenums").
part of making_components;
library parent_child.parent;
@Component(
selector: 'parent'
)
@View(
template: '''
import 'package:angular2/angular2.dart';
import 'package:parent_child/child.dart';
@Component(selector: 'parent')
@View(template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
''',
directives: const[<span class="pnk">ChildComponent</span>]
)
''', directives: const [<span class="pnk">ChildComponent]</span>)
class ParentComponent {
String message = "I'm the parent";
}
@@ -30,19 +28,16 @@
p You then just need to write the <code>ChildComponent</code> class to make it work:
code-example(language="dart" format="linenums").
part of making_components;
library parent_child.child;
@Component(
selector: 'child'
)
@View(
template: '''
import 'package:angular2/angular2.dart';
@Component(selector: 'child')
@View(template: '''
&lt;p&gt; {{ message }} &lt;/p&gt;
'''
)
''')
class ChildComponent {
String message = "I'm the child";
}
//p.
[TODO: Motivate communication between components with iterator example that passes index to the child]
//- [TODO: Motivate communication between components with iterator example that passes index to the child]
public/docs/dart/latest/guide/setup.jade
+15 -23
View File
@@ -27,11 +27,14 @@
code-example(language="yaml").
# pubspec.yaml
name: getting_started
description: Dart version of Angular 2 example, Getting Started
description: Getting Started example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.23
browser: any
angular2: 2.0.0-alpha.26
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
p.
Run <b>pub get</b> to download the packages your app depends on.
(<a href="https://www.dartlang.org/tools/">Dart-savvy editors and IDEs</a>
@@ -50,20 +53,16 @@
and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function.
code-example(language="javascript").
code-example(language="dart" escape="html").
// web/main.dart
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
)
class AppComponent {
}
@Component(selector: 'my-app')
@View(template: '<h1>My first Angular 2 App</h1>')
class AppComponent {}
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
@@ -73,12 +72,13 @@
.l-main-section
h2#section-create-an-entry-point Create an HTML file
p.
In the <code>web/</code> directoryapp, create an HTML file (<code>index.html</code>).
In the <code>web/</code> directory of your app,
create an HTML file (<code>index.html</code>).
Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
and call <code>main.dart</code>.
code-example(language="html").
&lt;!-- web/index.html -->
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
@@ -98,14 +98,6 @@
Now run the app. How you do this depends on your tools.
ul
li.
If you're using <b>Dart Editor</b>,
right-click <b>web/index.html</b>,
and choose <b>Open in Dartium</b>.
This starts a web server
and opens your app in Dartium,
an experimental version of the Chromium browser that contains the Dart VM.
li.
If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>,
right-click <b>web/index.html</b>,
public/docs/dart/latest/guide/user-input.jade
+53 -53
View File
@@ -44,11 +44,14 @@
Then add a method that adds new items
to the list.
code-example(language="dart" format="linenums").
code-example(language="dart").
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
List&lt;String&gt; todos =[
'Eat breakfast',
'Walk dog',
'Breathe',
'Learn Angular'
];
addTodo(String todo) {
todos.add(todo);
}
@@ -67,12 +70,12 @@
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
Using the <code>*ng-for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
its text to the value.
code-example(language="html" format="linenums").
code-example(language="html").
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *ng-for=&quot;#todo of todos&quot;&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
@@ -101,54 +104,54 @@
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library.
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// In the template:
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
code-example(language="dart").
import 'dart:html';
...
// In the component controller class:
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
// In the template:
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
...
// In the component controller class:
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
code-pane(language="dart" name="main.dart" format="linenums").
library user_input;
import 'dart:html';
...
}
.l-main-section
h2#section-final-code Final code
code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums").
// web/todo_list.dart
part of user_input;
code-pane(language="dart" name="lib/todo_list.dart" format="linenums").
library user_input.todo_list;
@Component(
selector: 'todo-list'
)
import 'dart:html';
import 'package:angular2/angular2.dart';
@Component(selector: 'todo-list')
@View(
// Without r before ''' (a raw string), $event breaks Angular.
// An alternative to a raw string is to use \$event instead.
template: r'''
// An alternative to using \$event is to use a raw string instead.
// For example, change "template: '''" to "template: r'''".
template: '''
&lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt;
&lt;li *ng-for="#todo of todos"&gt;
{{ todo }}
&lt;/li&gt;
&lt;/ul&gt;
&lt;input #todotext (keyup)="doneTyping($event)"&gt;
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
&lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''',
directives: const[For]
)
''', directives: const [NgFor])
class TodoList {
List&lt;String&gt; todos =
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];
List&lt;String&gt; todos = [
'Eat breakfast',
'Walk dog',
'Breathe',
'Learn Angular'
];
addTodo(String todo) {
todos.add(todo);
@@ -162,24 +165,19 @@
}
}
}
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library user_input;
import 'dart:html';
code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
part 'todo_list.dart';
import 'package:user_input/todo_list.dart';
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList);
}
code-pane(language="html" name="index.html" format="linenums").
&lt;!-- web/index.html --&gt;
code-pane(language="html" name="web/index.html" format="linenums").
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
@@ -194,10 +192,12 @@
&lt;/body&gt;
&lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: user_input
description: Dart version of Angular 2 example, Responding to User Input
description: User Input example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.23
browser: any
angular2: 2.0.0-alpha.26
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
public/docs/dart/latest/quickstart.jade
+15 -15
View File
@@ -38,14 +38,14 @@ p.
specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer.
Angular 2 is changing rapidly, so provide an exact version:
<b>2.0.0-alpha.25</b>.
<b>2.0.0-alpha.26</b>.
code-example(language="yaml" format="linenums").
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.25
browser: ^0.10.0+2
angular2: 2.0.0-alpha.26
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
@@ -79,8 +79,8 @@ p.
code-example(language="dart" format="linenums").
import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector;
import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;
import 'package:angular2/src/reflection/reflection_capabilities.dart'
show ReflectionCapabilities;
//- STEP 3 - Define a component ##########################
.l-main-section
@@ -90,7 +90,7 @@ p.
Update <code>web/main.dart</code>, adding the following code
after the imports:
code-example(language="dart" format="linenums:5").
code-example(language="dart" format="linenums:6").
@Component(
selector: 'my-app'
)
@@ -161,7 +161,7 @@ p.
p.
Add the following code to the bottom of <code>web/main.dart</code>:
code-example(language="dart" format="linenums:15").
code-example(language="dart" format="linenums:16").
main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent);
@@ -245,16 +245,16 @@ p.
code-example(language="basic").
&gt; <span class="blk">pub build</span>
Loading source assets...
Loading angular2 transformers...
Loading source assets...
Loading angular2 transformers...
INFO: Formatter is being overwritten.
Building hello_world... (3.1s)
Building hello_world... (3.8s)
[Info from Dart2JS]:
Compiling hello_world|web/main.dart...
[Info from Dart2JS]:
Took 0:00:16.123086 to compile hello_world|web/main.dart.
Built 41 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.25
Took 0:00:15.612746 to compile hello_world|web/main.dart.
Built 63 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.26
p.
The generated JavaScript appears, along with supporting files,
@@ -273,8 +273,8 @@ p.
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.25
browser: ^0.10.0+2
angular2: 2.0.0-alpha.26
browser: ^0.10.0
<span class="pnk">transformers:
- angular2:
entry_points: web/main.dart</span>