update dart docs to alpha.38
This commit is contained in:
Kathy Walrath
Naomi Black
parent
5afd02a34c
commit
9907ef265e
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
code-tabs
|
||||
code-pane(language="dart" name="web/main.dart" format="linenums").
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
import 'package:displaying_data/show_properties.dart';
|
||||
|
||||
|
|
@ -28,14 +29,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Displaying Data</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<display></display>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
description: Dart version of Angular 2 example, Displaying Data
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
transformers:
|
||||
- angular2:
|
||||
|
|
@ -258,12 +258,11 @@
|
|||
|
||||
p.
|
||||
Next, make FriendsService available to dependency injection
|
||||
by adding a <code>viewInjector</code> parameter to DisplayComponent's
|
||||
by adding a <code>viewBindings</code> parameter to DisplayComponent's
|
||||
<code>@Component</code> annotation:
|
||||
<!-- TODO: check with vsavkin: use viewInjector or hostInjector here? -->
|
||||
|
||||
code-example(language="dart").
|
||||
@Component(selector: 'display', <span class="pnk">viewInjector: const [FriendsService]</span>)
|
||||
@Component(selector: 'display', <span class="pnk">viewBindings: const [FriendsService]</span>)
|
||||
|
||||
.l-main-section
|
||||
h2#Conditionally-displaying-data-with-NgIf Conditionally display data using *ng-if
|
||||
|
|
@ -297,7 +296,7 @@
|
|||
import 'package:angular2/angular2.dart';
|
||||
import 'package:displaying_data/friends_service.dart';
|
||||
|
||||
@Component(selector: 'display', viewInjector: const [FriendsService])
|
||||
@Component(selector: 'display', viewBindings: const [FriendsService])
|
||||
@View(template: '''
|
||||
<p>My name: {{ myName }}</p>
|
||||
<p>Friends:</p>
|
||||
|
|
@ -326,6 +325,7 @@
|
|||
List<String> 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/bootstrap.dart';
|
||||
import 'package:displaying_data/show_properties.dart';
|
||||
|
||||
|
|
@ -336,14 +336,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Displaying Data</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<display></display>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
|
||||
|
|
@ -351,7 +350,7 @@
|
|||
description: Displaying Data example
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
transformers:
|
||||
- angular2:
|
||||
|
|
@ -431,16 +430,14 @@
|
|||
|
||||
p.
|
||||
The app's entry point—<code>main.dart</code>—imports
|
||||
<code>bootstrap.dart</code>.
|
||||
<code>angular2.dart</code> and <code>bootstrap.dart</code>.
|
||||
Both <code>show_properties.dart</code> and <code>friends_service.dart</code>
|
||||
import <code>angular2.dart</code> instead,
|
||||
because they use Angular APIs but aren't entry points.
|
||||
(They don't call <code>bootstrap()</code>.)
|
||||
See <a href="/docs/dart/latest/quickstart.html#performance">Performance,
|
||||
the transformer, and Angular 2 libraries</a> for more information.
|
||||
import only <code>angular2.dart</code>
|
||||
because they aren't entry points.
|
||||
|
||||
code-example(language="dart").
|
||||
// In web/main.dart:
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
...
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
description: Getting Started example
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
transformers:
|
||||
- angular2:
|
||||
|
|
@ -55,6 +55,7 @@
|
|||
|
||||
code-example(language="dart" escape="html").
|
||||
// web/main.dart
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
|
||||
@Component(selector: 'my-app')
|
||||
|
|
@ -78,12 +79,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Getting Started</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -167,6 +167,7 @@
|
|||
}
|
||||
}
|
||||
code-pane(language="dart" name="web/main.dart" format="linenums").
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
import 'package:user_input/todo_list.dart';
|
||||
|
||||
|
|
@ -177,14 +178,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>User Input</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<todo-list></todo-list>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
description: User Input example
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
transformers:
|
||||
- angular2:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<a href='https://angulardart.org'>Angular for Dart</a>
|
||||
for production applications.
|
||||
|
||||
|
||||
p.
|
||||
These instructions assume that you already have the
|
||||
<a href="https://www.dartlang.org/downloads/">Dart SDK</a>
|
||||
|
|
@ -38,27 +37,17 @@ 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.33</b>.
|
||||
<b>2.0.0-alpha.38</b>.
|
||||
|
||||
code-example(language="yaml" format="linenums").
|
||||
name: hello_world
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
transformers:
|
||||
- angular2:
|
||||
entry_points: web/main.dart
|
||||
p.
|
||||
In the same directory, run <code>pub get</code>
|
||||
to install the angular2 and browser packages
|
||||
(along with the packages they depend on):
|
||||
|
||||
code-example(language="sh").
|
||||
> <span class="blk">pub get</span>
|
||||
|
||||
//- PENDING: Create template? Link to pub/pubspec docs?
|
||||
|
||||
|
||||
//- STEP 2 - Import Angular ##########################
|
||||
.l-main-section
|
||||
|
|
@ -73,30 +62,25 @@ p.
|
|||
> <span class="blk">vim web/main.dart</span> # Use your favorite editor!
|
||||
|
||||
p.
|
||||
Edit <code>web/main.dart</code> to import the Angular bootstrap library:
|
||||
In the same directory, run <code>pub get</code>
|
||||
to install the angular2 and browser packages
|
||||
(along with the packages they depend on):
|
||||
|
||||
code-example(language="sh").
|
||||
> <span class="blk">pub get</span>
|
||||
|
||||
//- PENDING: Create template? Link to pub/pubspec docs?
|
||||
|
||||
p.
|
||||
Edit <code>web/main.dart</code> to import the angular2
|
||||
and bootstrap libraries:
|
||||
|
||||
code-example(language="dart" format="linenums").
|
||||
import 'package:angular2/angular2.dart';
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
//- STEP 3 - Define a component ##########################
|
||||
.l-main-section
|
||||
|
||||
.l-sub-section
|
||||
h3 Top-level Angular 2 libraries
|
||||
|
||||
p.
|
||||
The main Dart file for any Angular 2 app must import
|
||||
<code>'package:angular2/bootstrap.dart'</code>.
|
||||
If you put part of your app into one or more additional libraries,
|
||||
those additional libraries must import <code>angular2.dart</code>
|
||||
instead of <code>bootstrap.dart</code>,
|
||||
|
||||
p.
|
||||
The <code>bootstrap.dart</code> and <code>angular2.dart</code> files
|
||||
provide the same API,
|
||||
except that <code>bootstrap.dart</code> also provides a
|
||||
<code>bootstrap()</code> function, which you'll see a little later.
|
||||
For <a href="#performance">performance reasons</a>,
|
||||
use <code>angular2.dart</code> whenever possible.
|
||||
|
||||
h2#section-angular-create-account 3. Define a component
|
||||
|
||||
|
|
@ -104,7 +88,7 @@ p.
|
|||
Update <code>web/main.dart</code>, adding the following code
|
||||
after the imports:
|
||||
|
||||
code-example(language="dart" format="linenums:6").
|
||||
code-example(language="dart" format="linenums:4").
|
||||
@Component(
|
||||
selector: 'my-app'
|
||||
)
|
||||
|
|
@ -175,7 +159,7 @@ p.
|
|||
p.
|
||||
Add the following code to the bottom of <code>web/main.dart</code>:
|
||||
|
||||
code-example(language="dart" format="linenums:16").
|
||||
code-example(language="dart" format="linenums:14").
|
||||
main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
|
@ -202,12 +186,12 @@ p.
|
|||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Quickstart</title>
|
||||
|
||||
<script async src="main.dart" type="application/dart"></script>
|
||||
<script async src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
|
||||
<script type="application/dart" src="main.dart"></script>
|
||||
<script src="packages/browser/dart.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -228,7 +212,7 @@ p.
|
|||
Another option is to build and serve the app using <code>pub serve</code>,
|
||||
and then run it by visiting <b>http://localhost:8080</b> in any modern browser.
|
||||
Pub serve generates the JavaScript on the fly,
|
||||
which takes a few seconds when you first visit the page.
|
||||
which can take a while when you first visit the page.
|
||||
|
||||
p.
|
||||
Once the app is running,
|
||||
|
|
@ -249,13 +233,8 @@ p.
|
|||
> <span class="blk">pub build</span>
|
||||
Loading source assets...
|
||||
...
|
||||
Building hello_world... (5.7s)
|
||||
[Info from Dart2JS]:
|
||||
Compiling hello_world|web/main.dart...
|
||||
[Info from Dart2JS]:
|
||||
Took 0:00:19.177402 to compile hello_world|web/main.dart.
|
||||
Built 303 files to "build".
|
||||
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.33
|
||||
Built 333 files to "build".
|
||||
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.38
|
||||
|
||||
p.
|
||||
The generated JavaScript appears, along with supporting files,
|
||||
|
|
@ -274,7 +253,7 @@ p.
|
|||
name: hello_world
|
||||
version: 0.0.1
|
||||
dependencies:
|
||||
angular2: 2.0.0-alpha.33
|
||||
angular2: 2.0.0-alpha.38
|
||||
browser: ^0.10.0
|
||||
<span class="pnk">transformers:
|
||||
- angular2:
|
||||
|
|
@ -298,12 +277,8 @@ p.
|
|||
causes performance problems when compiled to JavaScript.
|
||||
Don't worry,
|
||||
the Angular transformer converts your entry points
|
||||
(<code>entry_points</code> in <code>pubspec.yaml</code>)
|
||||
so that they don't use mirrors.
|
||||
The transformer doesn't convert other libraries in your app,
|
||||
so be sure to
|
||||
import <code>angular2.dart</code> instead of <code>bootstrap.dart</code>
|
||||
in any libraries you create that use Angular 2
|
||||
but don't call <code>bootstrap()</code>.
|
||||
|
||||
|
||||
//- WHAT'S NEXT... ##########################
|
||||
|
|
|
|||
Loading…
Reference in New Issue