honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

384
public/docs/dart/latest/guide/displaying-data.jade
View File

@ -17,22 +17,19 @@
a <code>pubspec.yaml</code> file: a <code>pubspec.yaml</code> file:
code-tabs code-tabs
code-pane(language="dart" name="main.dart" format="linenums"). code-pane(language="dart" name="web/main.dart" format="linenums").
// web/main.dart
library displaying_data;
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; 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 'show_properties.dart'; import 'package:displaying_data/show_properties.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
code-pane(language="html" name="index.html" format="linenums"). code-pane(language="html" name="web/index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -47,45 +44,45 @@
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data name: displaying_data
description: Dart version of Angular 2 example, Displaying Data description: Dart version of Angular 2 example, Displaying Data
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.23 angular2: 2.0.0-alpha.26
browser: any browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
p. p.
All of this code should look familiar from the previous page, All of this code should look familiar from the previous page,
except for the <code>library</code> and <code>part</code> statements except for the import of <code>show_properties.dart</code>
in <code>main.dart</code>. in <code>main.dart</code>.
Those statements let you implement part of the app in a different Dart file. That import statement lets you implement part of the app in a different Dart file.
All three of these files remain similar in the rest of the examples, All three of these files remain similar in the rest of the examples,
so we'll just focus on what's different. so we'll focus on what changes.
.l-main-section .l-main-section
h2#section-showing-properties-with-interpolation Showing properties with interpolation h2#section-showing-properties-with-interpolation Showing properties with interpolation
p. p.
The simple method for binding text into templates is through interpolation, The simple method for binding text into templates is through interpolation,
where you put the name of a property where you put the name of a property
inside <strong>{{ }}</strong>. inside <strong ng-non-bindable="">{{ }}</strong>.
p. p.
To see this working, create a Dart file under <code>web</code> To see this working, first create a <code>lib</code> directory.
named <code>show_properties.dart</code>, Under it, put a Dart file named <code>show_properties.dart</code>
and add the following: that contains the following code:
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums" escape="html").
// web/show_properties.dart // web/show_properties.dart
part of displaying_data; library displaying_data.show_properties;
@Component( import 'package:angular2/angular2.dart';
selector: 'display'
) @Component(selector: 'display')
@View( @View(template: '''
template: ''' <p>My name: {{ myName }}</p>
&lt;p>My name: {{ myName }}&lt/p> ''')
'''
)
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
} }
@ -94,8 +91,8 @@
You've just defined a component that encompasses a view and controller for the app. The view You've just defined a component that encompasses a view and controller for the app. The view
defines a template: defines a template:
code-example(language="html"). code-example(language="html" escape="html").
&lt;p&gt;My name: {{ myName }}&lt;/p&gt; <p>My name: {{ myName }}</p>
p. p.
Angular will automatically pull the value of <code>myName</code> and Angular will automatically pull the value of <code>myName</code> and
@ -132,85 +129,86 @@
&lt;p&gt;Current time: {{ time }}&lt;/p&gt; &lt;p&gt;Current time: {{ time }}&lt;/p&gt;
p. p.
Then give the <code>DisplayComponent</code> a starting value for time and Then import <code>dart:async</code> so you can use a Timer,
a call to update time and give the <code>DisplayComponent</code> a starting value for time and
via <code>setInterval</code>: create a periodic Timer call to update the time:
code-example(language="dart" format="linenums"). code-example(language="dart").
class DisplayComponent { import 'dart:async';
String myName = 'Alice'; ...
String time; class DisplayComponent {
Timer _timer; String myName = 'Alice';
String time;
Timer _timer;
DisplayComponent() { DisplayComponent() {
_updateTime(null); _updateTime(null);
_timer = new Timer.periodic(new Duration(seconds: 1), _updateTime); _timer = new Timer.periodic(new Duration(seconds: 1), _updateTime);
}
_updateTime(Timer _) {
time = new DateTime.now().toString();
}
} }
_updateTime(Timer _) {
time = new DateTime.now().toString();
}
}
p Reload the app, and you'll now see the seconds updating automatically. p Reload the app, and you'll now see the seconds updating automatically.
.l-main-section .l-main-section
h2#Create-an-array Display an iterable using *for h2#Create-an-array Display an iterable using *ng-for
p Moving up from a single value, create a property that's a list of values. p Moving up from a single value, create a property that's a list of values.
code-example(language="dart" format="linenums"). code-example(language="dart").
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String&gt; friendNames = const [
'Aarav',
'Martín',
'Shannon',
'Ariana',
'Kai'
];
} }
p. p.
You can then use this list in your template with the <code>for</code> directive to create copies of DOM elements You can then use this list in your template with
the <code>ng-for</code> directive to create copies of DOM elements
with one for each item in the list. with one for each item in the list.
code-example(language="dart" format="linenums"). code-example(language="dart").
@View( @View(template: '''
template: ''' &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p>My name: {{ myName }}&lt;/p> &lt;p&gt;Friends:&lt;/p&gt;
&lt;p>Friends:&lt;/p> &lt;ul&gt;
&lt;ul> &lt;li <span class="pnk">*ng-for="#name of friendNames"</span>&gt;
&lt;li *for="#name of friendNames">
{{ name }} {{ name }}
&lt;/li> &lt;/li&gt;
&lt;/ul> &lt;/ul&gt;
''' ''', <span class="pnk">directives: const [NgFor]</span>)
)
p.
To make this work, you'll also need to add the Angular <code>For</code> directive used by
the template to <code>show_properties.dart</code>, so that Angular knows to include it.
Add <code>For</code> using the optional <code>directives</code> parameter,
which contains a list of directives:
code-example(language="dart" format="linenums"). p.
@View( To make <code>ng-for</code> work,
template: ''' you need to add the Angular <code>NgFor</code> directive,
// ...HTML... so that Angular knows to include it.
''', Add <code>NgFor</code> using the optional <code>directives</code> parameter.
directives: const[For]
)
p Reload and you've got your list of friends! p Reload and you've got your list of friends!
p. p.
Again, Angular will mirror changes you make to this list over in the DOM. Add a new item and it appears in your Again, Angular will mirror changes you make to this list over in the DOM.
list. Delete one and Angular deletes the &lt;li&gt;. Reorder items and Angular makes the corresponding reorder of Add a new item and it appears in your list.
the DOM list. Delete one and Angular deletes the &lt;li&gt;.
Reorder items and Angular makes the corresponding reorder of the DOM list.
p Let's look at the few lines that do the work again: p Let's look at the few lines that do the work again:
code-example(language="html" format="linenums"). code-example(language="html").
&lt;li *for=&quot;#name of friendNames&quot;&gt; &lt;li *ng-for=&quot;#name of friendNames&quot;&gt;
{{ name }} {{ name }}
&lt;/li&gt; &lt;/li&gt;
p The way to read this is: p The way to read this is:
ul ul
li. li.
<code>*for</code>: Create a DOM element for each item in an <code>*ng-for</code>: Create a DOM element for each item in an
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>
such as a list. such as a list.
li <code>#name</code>: Refer to individual values of the iterable as <code>name</code>. li <code>#name</code>: Refer to individual values of the iterable as <code>name</code>.
@ -221,157 +219,151 @@
.l-main-section .l-main-section
h2#Create-a-class Create a model and inject it h2#Create-a-class Create a model and inject it
p. p.
Before we get too much further, we should mention that putting the model (list) directly into the controller isn't Before we get too much further, we should mention that
proper form. We should separate the concerns by having another class serve the role of model and inject it into putting the model (list) directly into the controller isn't proper form.
the controller. We should separate the concerns by having another class
serve the role of model and inject it into the controller.
p. p.
Make a <code>FriendsService</code> class to implement a model containing a list of friends. We'll put this in a new Make a <code>FriendsService</code> class to implement a model
<code>friends_service.dart</code> under <code>web/</code>. Here's what the class looks like: containing a list of friends.
Put this in a new file under <code>web/</code>
named <code>friends_service.dart</code>. Here's what the class looks like:
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums").
// web/friends_service.dart // web/friends_service.dart
part of displaying_data; library displaying_data.friends_service;
import 'package:angular2/angular2.dart';
@Injectable()
class FriendsService { class FriendsService {
List&lt;String&gt; friendNames = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai']; List&lt;String&gt; names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
} }
.callout.is-helpful
header Note
p.
Remember to tie <code>friends_service.dart</code> into the library's main file:
add <code>part friends_service.dart</code> to <code>main.dart</code>.
p. p.
Now you can replace the current list of friends in DisplayComponent. Now you can replace the current list of friends in DisplayComponent.
First add a FriendsService parameter to the constructor. Import <code>friends_service.dart</code>,
and add a FriendsService parameter to the constructor.
Then set <code>friendNames</code> to the names provided by the service. Then set <code>friendNames</code> to the names provided by the service.
code-example(language="dart" format="linenums"). code-example(language="dart").
// In web/show_properties.dart // In web/show_properties.dart
<span class="pnk">import 'package:displaying_data/friends_service.dart';</span>
...
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
List<String> friendNames; List&lt;String&gt; friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(<span class="pnk">FriendsService friendsService</span>) {
friendNames = friendsService.names; <span class="pnk">friendNames = friendsService.names;</span>
} }
} }
p. p.
Next, make FriendsService available to dependency injection Next, make FriendsService available to dependency injection
by adding an <code>injectables</code> parameter to DisplayComponent's by adding an <code>appInjector</code> parameter to DisplayComponent's
<code>@Component</code> annotation: <code>@Component</code> annotation:
code-example(language="dart" format="linenums"). code-example(language="dart").
@Component( @Component(selector: 'display', <span class="pnk">appInjector: const [FriendsService]</span>)
selector: 'display',
injectables: const[FriendsService]
)
.l-main-section .l-main-section
h2#Conditionally-displaying-data-with-If Conditionally display data using *if h2#Conditionally-displaying-data-with-NgIf Conditionally display data using *ng-if
p. p.
Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>*if</code>. The Lastly, before we move on, let's handle showing parts of our UI conditionally with <code>*ng-if</code>. The
<code>If</code> directive adds or removes elements from the DOM based on the expression you provide. <code>NgIf</code> directive adds or removes elements from the DOM based on the expression you provide.
p See it in action by adding a paragraph at the end of your template: p See it in action by adding a paragraph at the end of your template:
code-example(language="html"). code-example(language="html").
&lt;p *if=&quot;names.length &gt; 3&quot;&gt;You have many friends!&lt;/p&gt; &lt;p *ng-if="friendNames.length &gt; 3"&gt;You have many friends!&lt;/p&gt;
p. p.
Also add <code>If</code> to the list of directives, Also add <code>NgIf</code> to the list of directives,
so Angular knows to include it: so Angular knows to include it:
code-example(language="dart"). code-example(language="dart").
directives: const[For, If] directives: const[NgFor, <span class="pnk">NgIf</span>]
p. p.
The list current has 5 items, so if you run the app you'll see the message The list currently has 5 items, so if you run the app you'll see the message
congratulating you on your many friends. congratulating you on your many friends.
Remove two items from the list, reload your browser, Remove two items from the list, reload your browser,
and see that the message no longer displays. and see that the message no longer displays.
<!-- PENDING: mention somewhere that once you start a web server,
you can just refresh the browser to see your changes. -->
p Here's the final code. p Here's the final code.
code-tabs code-tabs
code-pane(language="dart" name="show_properties.dart" format="linenums"). code-pane(language="dart" name="lib/show_properties.dart" format="linenums").
// web/show_properties.dart library displaying_data.show_properties;
part of displaying_data;
@Component( import 'package:angular2/angular2.dart';
selector: 'display', import 'package:displaying_data/friends_service.dart';
injectables: const[FriendsService]
) @Component(selector: 'display', appInjector: const [FriendsService])
@View( @View(template: '''
template: ''' &lt;p&gt;My name: {{ myName }}&lt;/p&gt;
&lt;p>My name: {{ myName }}&lt;/p> &lt;p&gt;Friends:&lt;/p&gt;
&lt;p>Friends:&lt;/p> &lt;ul&gt;
&lt;ul> &lt;li *ng-for="#name of friendNames"&gt;
&lt;li *for="#name of friendNames">
{{ name }} {{ name }}
&lt;/li> &lt;/li&gt;
&lt;/ul> &lt;/ul&gt;
''', &lt;p *ng-if="friendNames.length &gt; 3"&gt;You have many friends!&lt;/p&gt;
directives: const[For] ''', directives: const [NgFor, NgIf])
)
class DisplayComponent { class DisplayComponent {
String myName = 'Alice'; String myName = 'Alice';
List&lt;String> friendNames; List&lt;String&gt; friendNames;
DisplayComponent(FriendsService friendsService) { DisplayComponent(FriendsService friendsService) {
friendNames = friendsService.names; friendNames = friendsService.names;
} }
} }
code-pane(language="dart" name="friends_service.dart" format="linenums"). code-pane(language="dart" name="lib/friends_service.dart" format="linenums").
// web/friends_service.dart library displaying_data.friends_service;
part of displaying_data;
class FriendsService {
List&lt;String> names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
code-pane(language="dart" name="main.dart" format="linenums").
// web/main.dart
library displaying_data;
import 'dart:async';
import 'package:angular2/angular2.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;
part 'show_properties.dart'; @Injectable()
part 'friends_service.dart'; class FriendsService {
List&lt;String&gt; names = ['Aarav', 'Martín', 'Shannon', 'Ariana', 'Kai'];
}
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:displaying_data/show_properties.dart';
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(DisplayComponent); bootstrap(DisplayComponent);
} }
code-pane(language="html" name="index.html" format="linenums"). code-pane(language="html" name="web/index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;display&gt;&lt;/display&gt; &lt;display&gt;&lt;/display&gt;
&lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt; &lt;script type="application/dart" src="main.dart"&gt;&lt;/script&gt;
&lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt; &lt;script src="packages/browser/dart.js"&gt;&lt;/script&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: displaying_data name: displaying_data
description: Dart version of Angular 2 example, Displaying Data description: Displaying Data example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.23 angular2: 2.0.0-alpha.26
browser: any browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
.l-main-section .l-main-section
h2#section-explanations Explanations h2#section-explanations Explanations
@ -380,40 +372,74 @@
p. p.
Dart offers a few ways to implement an app in multiple files. Dart offers a few ways to implement an app in multiple files.
In this guide, all the code for each example is in a single library; In this guide, each example is in a single package,
each Dart file under <code>web</code> is part of that library. and each Dart file implements a separate library.
For a bigger project, you might split the code into libraries
in two or more packages.
p. p.
To let the code in <code>main.dart</code> To use the API defined in <code>show_properties.dart</code>,
use the code in <code>show_properties.dart</code>, <code>main.dart</code> must import that file.
declare a library in <code>main.dart</code>. The import statement uses the package name
Then make <code>show_properties.dart</code> part of that library. (defined in <code>pubspec.yaml</code> to be <b>displaying_data</b>)
and the path to <code>show_properties.dart</code>
(starting at the app's top directory,
but omitting the <code>lib/</code> directory).
code-tabs code-example(language="dart").
code-pane(language="dart" name="main.dart" format="linenums"). // In web/main.dart:
// web/main.dart ...
library displaying_data; import 'package:displaying_data/show_properties.dart';
// imports... ...
part 'show_properties.dart';
// Code goes here... // In lib/show_properties.dart:
code-pane(language="dart" name="show_properties.dar" format="linenums"). library displaying_data.show_properties;
// web/show_properties.dart ...
part of displaying_data;
// Code goes here...
p. p.
Another way to split Dart code is to The name that <code>show_properties.dart</code> specifies for its library
define multiple libraries in a single package. is similar to the path used to import the library,
The additional libraries go under a <code>lib</code> directory but with no ".dart" suffix and
parallel to <code>web</code>. with dots (<code>.</code>) instead of slashes (<code>/</code>).
<!-- PENDING: show or point to an example --> <a href="https://www.dartlang.org/articles/style-guide/#do-name-libraries-and-source-files-using-lowercasewithunderscores">Naming
conventions for libraries</a>,
along with lots of other helpful information, are in the
<a href="https://www.dartlang.org/articles/style-guide/">Dart Style Guide</a>.
p. p.
Yet another approach, often used when some of the code is highly reusable, Another import lets <code>show_properties.dart</code>
is to split the code into libraries in two or more packages. use the API defined in <code>friends_service.dart</code>:
code-example(language="dart").
// In lib/show_properties.dart:
library displaying_data.show_properties;
...
import 'package:displaying_data/friends_service.dart';
...
// In lib/friends_service.dart:
library displaying_data.friends_service;
...
p.
Because both <code>show_properties.dart</code> and <code>friends_service.dart</code>
are under <code>lib</code>,
the import could instead use a relative path:
code-example(language="dart").
// In lib/show_properties.dart:
library displaying_data.show_properties;
...
import 'friends_service.dart';
...
// In lib/friends_service.dart:
library displaying_data.friends_service;
...
p. p.
For more information on implementing Dart libraries, see For more information on implementing Dart libraries, see
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a> <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html#libraries-and-visibility">Libraries and visibility</a>
in the in the
<a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>. <a href="https://www.dartlang.org/docs/dart-up-and-running/ch02.html">Dart language tour</a>.

33
public/docs/dart/latest/guide/making-components.jade
View File

@ -11,18 +11,16 @@
component that uses a <code>&lt;child&gt;</code> component like so: component that uses a <code>&lt;child&gt;</code> component like so:
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums").
part of making_components; library parent_child.parent;
@Component( import 'package:angular2/angular2.dart';
selector: 'parent' import 'package:parent_child/child.dart';
)
@View( @Component(selector: 'parent')
template: ''' @View(template: '''
&lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt;
<span class="pnk">&lt;child&gt;&lt;/child&gt;</span> <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 { class ParentComponent {
String message = "I'm the parent"; 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: p You then just need to write the <code>ChildComponent</code> class to make it work:
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums").
part of making_components; library parent_child.child;
@Component( import 'package:angular2/angular2.dart';
selector: 'child'
) @Component(selector: 'child')
@View( @View(template: '''
template: '''
&lt;p&gt; {{ message }} &lt;/p&gt; &lt;p&gt; {{ message }} &lt;/p&gt;
''' ''')
)
class ChildComponent { class ChildComponent {
String message = "I'm the child"; 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]

38
public/docs/dart/latest/guide/setup.jade
View File

@ -27,11 +27,14 @@
code-example(language="yaml"). code-example(language="yaml").
# pubspec.yaml # pubspec.yaml
name: getting_started name: getting_started
description: Dart version of Angular 2 example, Getting Started description: Getting Started example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.23 angular2: 2.0.0-alpha.26
browser: any browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
p. p.
Run <b>pub get</b> to download the packages your app depends on. 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> (<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 and creating a top-level <code>main()</code> function that calls
Angular's <code>bootstrap()</code> function. Angular's <code>bootstrap()</code> function.
code-example(language="javascript"). code-example(language="dart" escape="html").
// web/main.dart // web/main.dart
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; 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( @Component(selector: 'my-app')
selector: 'my-app' @View(template: '<h1>My first Angular 2 App</h1>')
) class AppComponent {}
@View(
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
)
class AppComponent {
}
main() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
@ -73,12 +72,13 @@
.l-main-section .l-main-section
h2#section-create-an-entry-point Create an HTML file h2#section-create-an-entry-point Create an HTML file
p. 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 Edit <code>index.html</code> to add a <code>&lt;my-app&gt;</code> element
and call <code>main.dart</code>. and call <code>main.dart</code>.
code-example(language="html"). code-example(language="html").
&lt;!-- web/index.html --> &lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -98,14 +98,6 @@
Now run the app. How you do this depends on your tools. Now run the app. How you do this depends on your tools.
ul 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. li.
If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>, If you're using <b>WebStorm</b> or <b>IntelliJ IDEA</b>,
right-click <b>web/index.html</b>, right-click <b>web/index.html</b>,

106
public/docs/dart/latest/guide/user-input.jade
View File

@ -44,11 +44,14 @@
Then add a method that adds new items Then add a method that adds new items
to the list. to the list.
code-example(language="dart" format="linenums"). code-example(language="dart").
class TodoList { class TodoList {
List&lt;String&gt; todos = List&lt;String&gt; todos =[
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; 'Eat breakfast',
'Walk dog',
'Breathe',
'Learn Angular'
];
addTodo(String todo) { addTodo(String todo) {
todos.add(todo); todos.add(todo);
} }
@ -67,12 +70,12 @@
.l-main-section .l-main-section
h2#section-display-the-list-of-todos Display the list of todos h2#section-display-the-list-of-todos Display the list of todos
p. 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. its text to the value.
code-example(language="html" format="linenums"). code-example(language="html").
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; &lt;li *ng-for=&quot;#todo of todos&quot;&gt;
{{ todo }} {{ todo }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
@ -101,54 +104,54 @@
<a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>, <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
so be sure to import that library. so be sure to import that library.
code-tabs code-example(language="dart").
code-pane(language="dart" name="todo_list.dart" format="linenums"). import 'dart:html';
// In the template: ...
&lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
// In the component controller class: // In the template:
doneTyping(KeyboardEvent event) { &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;
if (event.keyCode == KeyCode.ENTER) { ...
InputElement e = event.target;
addTodo(e.value); // In the component controller class:
e.value = null; 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 .l-main-section
h2#section-final-code Final code h2#section-final-code Final code
code-tabs code-tabs
code-pane(language="dart" name="todo_list.dart" format="linenums"). code-pane(language="dart" name="lib/todo_list.dart" format="linenums").
// web/todo_list.dart library user_input.todo_list;
part of user_input;
@Component( import 'dart:html';
selector: 'todo-list' import 'package:angular2/angular2.dart';
)
@Component(selector: 'todo-list')
@View( @View(
// Without r before ''' (a raw string), $event breaks Angular. // An alternative to using \$event is to use a raw string instead.
// An alternative to a raw string is to use \$event instead. // For example, change "template: '''" to "template: r'''".
template: r''' template: '''
&lt;ul&gt; &lt;ul&gt;
&lt;li *for=&quot;#todo of todos&quot;&gt; &lt;li *ng-for="#todo of todos"&gt;
{{ todo }} {{ todo }}
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&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; &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
''', ''', directives: const [NgFor])
directives: const[For]
)
class TodoList { class TodoList {
List&lt;String&gt; todos = List&lt;String&gt; todos = [
['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular']; 'Eat breakfast',
'Walk dog',
'Breathe',
'Learn Angular'
];
addTodo(String todo) { addTodo(String todo) {
todos.add(todo); todos.add(todo);
@ -162,24 +165,19 @@
} }
} }
} }
code-pane(language="dart" name="main.dart" format="linenums"). code-pane(language="dart" name="web/main.dart" format="linenums").
// web/main.dart
library user_input;
import 'dart:html';
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; 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() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(TodoList); bootstrap(TodoList);
} }
code-pane(language="html" name="index.html" format="linenums"). code-pane(language="html" name="web/index.html" format="linenums").
&lt;!-- web/index.html --&gt;
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -194,10 +192,12 @@
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
code-pane(language="yaml" name="pubspec.yaml" format="linenums"). code-pane(language="yaml" name="pubspec.yaml" format="linenums").
# pubspec.yaml
name: user_input name: user_input
description: Dart version of Angular 2 example, Responding to User Input description: User Input example
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.23 angular2: 2.0.0-alpha.26
browser: any browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart

30
public/docs/dart/latest/quickstart.jade
View File

@ -38,14 +38,14 @@ p.
specify the angular2 and browser packages as dependencies, specify the angular2 and browser packages as dependencies,
as well as the angular2 transformer. as well as the angular2 transformer.
Angular 2 is changing rapidly, so provide an exact version: 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"). code-example(language="yaml" format="linenums").
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.25 angular2: 2.0.0-alpha.26
browser: ^0.10.0+2 browser: ^0.10.0
transformers: transformers:
- angular2: - angular2:
entry_points: web/main.dart entry_points: web/main.dart
@ -79,8 +79,8 @@ p.
code-example(language="dart" format="linenums"). code-example(language="dart" format="linenums").
import 'package:angular2/angular2.dart'; import 'package:angular2/angular2.dart';
import 'package:angular2/src/reflection/reflection.dart' show reflector; 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 ########################## //- STEP 3 - Define a component ##########################
.l-main-section .l-main-section
@ -90,7 +90,7 @@ p.
Update <code>web/main.dart</code>, adding the following code Update <code>web/main.dart</code>, adding the following code
after the imports: after the imports:
code-example(language="dart" format="linenums:5"). code-example(language="dart" format="linenums:6").
@Component( @Component(
selector: 'my-app' selector: 'my-app'
) )
@ -161,7 +161,7 @@ p.
p. p.
Add the following code to the bottom of <code>web/main.dart</code>: 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() { main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(AppComponent); bootstrap(AppComponent);
@ -245,16 +245,16 @@ p.
code-example(language="basic"). code-example(language="basic").
&gt; <span class="blk">pub build</span> &gt; <span class="blk">pub build</span>
Loading source assets... Loading source assets...
Loading angular2 transformers... Loading angular2 transformers...
INFO: Formatter is being overwritten. INFO: Formatter is being overwritten.
Building hello_world... (3.1s) Building hello_world... (3.8s)
[Info from Dart2JS]: [Info from Dart2JS]:
Compiling hello_world|web/main.dart... Compiling hello_world|web/main.dart...
[Info from Dart2JS]: [Info from Dart2JS]:
Took 0:00:16.123086 to compile hello_world|web/main.dart. Took 0:00:15.612746 to compile hello_world|web/main.dart.
Built 41 files to "build". Built 63 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.25 //- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.26
p. p.
The generated JavaScript appears, along with supporting files, The generated JavaScript appears, along with supporting files,
@ -273,8 +273,8 @@ p.
name: hello_world name: hello_world
version: 0.0.1 version: 0.0.1
dependencies: dependencies:
angular2: 2.0.0-alpha.25 angular2: 2.0.0-alpha.26
browser: ^0.10.0+2 browser: ^0.10.0
<span class="pnk">transformers: <span class="pnk">transformers:
- angular2: - angular2:
entry_points: web/main.dart</span> entry_points: web/main.dart</span>