iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dart QS to resemble TS one, use _examples

Browse Source
This commit is contained in:
Kathy Walrath 2015-10-15 23:25:02 -07:00 committed by Naomi Black
parent 93a646d63f
commit 9826612970
9 changed files with 196 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -2,6 +2,11 @@ node_modules
bower_components bower_components
jspm_packages jspm_packages
typings typings
packages
build
pubspec.lock
.pub
.packages
*.map *.map
.DS_Store .DS_Store
.idea .idea

2
public/doc-shredder/doc-shredder.js
View File

@ -86,7 +86,7 @@ function createShredPackage(shredOptions) {
readFilesProcessor.sourceFiles = [ { readFilesProcessor.sourceFiles = [ {
// Process all candidate files in `src` and its subfolders ... // Process all candidate files in `src` and its subfolders ...
include: includeFiles, include: includeFiles,
exclude: ['**/node_modules/**', '**/typings/**'], exclude: ['**/node_modules/**', '**/typings/**', '**/packages/**', '**/build/**'],
// When calculating the relative path to these files use this as the base path. // When calculating the relative path to these files use this as the base path.
// So `src/foo/bar.js` will have relative path of `foo/bar.js` // So `src/foo/bar.js` will have relative path of `foo/bar.js`
basePath: options.examplesDir basePath: options.examplesDir

9
public/docs/_examples/gettingstarted/dart/ex1/pubspec.yaml Normal file
View File

@ -0,0 +1,9 @@
# #docregion
name: angular2-getting-started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.42
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart

15
public/docs/_examples/gettingstarted/dart/ex1/web/index.html Normal file
View File

@ -0,0 +1,15 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<!-- #docregion loaddart -->
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
<!-- #enddocregion loaddart -->
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

10
public/docs/_examples/gettingstarted/dart/ex1/web/main.dart Normal file
View File

@ -0,0 +1,10 @@
// #docregion
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
class AppComponent {}
main() {
bootstrap(AppComponent);
}

11
public/docs/_examples/gettingstarted/dart/ex2/pubspec.yaml Normal file
View File

@ -0,0 +1,11 @@
# #docregion
name: angular2-getting-started
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.42
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0
transformers:
- angular2:
entry_points: web/main.dart
- dart_to_js_script_rewriter

15
public/docs/_examples/gettingstarted/dart/ex2/web/index.html Normal file
View File

@ -0,0 +1,15 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<!-- #docregion loaddart -->
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
<!-- #enddocregion loaddart -->
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

10
public/docs/_examples/gettingstarted/dart/ex2/web/main.dart Normal file
View File

@ -0,0 +1,10 @@
// #docregion
import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';
@Component(selector: 'my-app', template: '<h1>My First Angular 2 App</h1>')
class AppComponent {}
main() {
bootstrap(AppComponent);
}

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

@ -1,9 +1,14 @@
include ../../../_includes/_util-fns
:markdown
Let's start from zero and build a super simple Angular 2 application in Dart.
.callout.is-helpful .callout.is-helpful
header Angular 2 is currently in Developer Preview header Don't want Dart?
p. :markdown
We recommend using Although we're getting started in Dart, you can also write Angular 2 apps
<a href='https://angulardart.org'>Angular for Dart</a> in TypeScript and JavaScript.
for production applications. Just select either of those languages from the combo-box in the banner.
p. p.
These instructions assume that you already have the These instructions assume that you already have the
@ -15,21 +20,20 @@ p.
You can also download You can also download
<a href="https://www.dartlang.org/tools/">Dart plugins for <a href="https://www.dartlang.org/tools/">Dart plugins for
other IDEs and editors</a>. other IDEs and editors</a>.
p.
Once you have the Dart SDK and any other tools you want, return here. Once you have the Dart SDK and any other tools you want, return here.
//- STEP 1 - Create a project ##########################
.l-main-section
h2#section-install-angular 1. Create a project
p. //- ##########################
Create a new directory, and put a file named .l-main-section
<code>pubspec.yaml</code> in it. h2#section-install-angular Set up a new app directory
:markdown
Create a new directory,
and put a file named `pubspec.yaml` in it.
code-example(language="sh"). code-example(language="sh").
&gt; <span class="blk">mkdir hello_world</span> &gt; <span class="blk">mkdir angular2_getting_started</span>
&gt; <span class="blk">cd hello_world</span> &gt; <span class="blk">cd angular2_getting_started</span>
&gt; <span class="blk">vim pubspec.yaml</span> # Use your favorite editor! &gt; <span class="blk">vim pubspec.yaml</span> # Use your favorite editor!
p. p.
@ -37,168 +41,95 @@ 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.39</b>. <b>2.0.0-alpha.42</b>.
code-example(language="yaml" format="linenums"). +makeExample('gettingstarted/dart/ex1/pubspec.yaml', null, 'pubspec.yaml')
name: hello_world
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.39
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart
//- STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
p. p.
Still in the same directory, create a <code>web</code> directory. In the same directory, create a <code>web</code> directory, and then
Create a file under <code>web</code> named <code>main.dart</code>. run <code>pub get</code> to install the angular2 and browser packages
(along with the packages they depend on).
code-example(language="sh"). code-example(language="sh").
&gt; <span class="blk">mkdir web</span> &gt; <span class="blk">mkdir web</span>
&gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
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").
&gt; <span class="blk">pub get</span> &gt; <span class="blk">pub get</span>
Resolving dependencies...
//- PENDING: Create template? Link to pub/pubspec docs? //- 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'; .l-main-section
import 'package:angular2/bootstrap.dart'; h2#section-transpile Create a Dart file
//- STEP 3 - Define a component ##########################
p.
Create a file under <code>web</code> named <code>main.dart</code>.
code-example(language="sh").
&gt; <span class="blk">vim web/main.dart</span> # Use your favorite editor!
p.
Paste the following code into <code>web/main.dart</code>:
+makeExample('gettingstarted/dart/ex1/web/main.dart', null, 'web/main.dart')
:markdown
You've just defined an Angular 2 **component**,
one of the most important Angular 2 features.
Components are the primary way to create application views
and support them with application logic.
This component is an empty, do-nothing class class named `AppComponent`.
You can add properties and application logic to it later,
when you're ready to build a substantive application.
Above the class is the `@Component` annotation,
which tells Angular that this class *is an Angular component*.
The call to the `@Component` constructor has two
named parameters, `selector` and `template`.
The `selector` parameter specifies a CSS selector for
a host HTML element named `my-app`.
Angular creates and displays an instance of `AppComponent`
wherever it encounters a `my-app` element.
The `template` parameter is the component's companion template
that tells Angular how to render a view.
In this case, the template is a single line of HTML announcing
"My First Angular 2 App".
The <code>main()</code> function
calls Angular's <code>bootstrap()</code> function,
which tells Angular to start the application with `AppComponent`
at the application root.
Someday the application will
consist of more components arising in tree-like fashion from this root.
The top lines import two libraries.
*All* Dart files that use Angular APIs import `angular2.dart`.
Only files that call `bootstrap()` import `bootstrap.dart`.
//- ##########################
.l-main-section .l-main-section
h2#section-angular-create-account 3. Define a component h2#section-angular-create-account Create an HTML file
p.
Update <code>web/main.dart</code>, adding the following code
after the imports:
code-example(language="dart" format="linenums:4").
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
class AppComponent {
String name = 'Alice';
}
p.
The code you just added creates a component that
has the tag <b>&lt;my-app></b>.
The Dart code for an Angular component consists of a class
(the <b>component controller</b>)
that has <code>@Component</code> and <code>@View</code> annotations.
.l-sub-section
h3 Annotations
p.
The <code>@Component</code> annotation defines
the HTML tag for the component by specifying the component's CSS selector.
p.
The <code>@View</code> annotation defines the HTML that
represents the component. This component uses an inline template,
but you can also have an external template. To use an external template,
specify a <code>templateUrl</code> property
and give it the path to the HTML file.
code-example(language="dart").
@Component(
selector: 'my-app'
)
@View(
template: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
)
p.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
.l-sub-section
h3 The template and the component controller
p.
A template has access to all the public properties and methods
of its component controller.
The template above binds to a <code>name</code> property through
the double-mustache syntax (<code ng-non-bindable>{{ ... }}</code>).
p.
The component controller assigns "Alice" to the name property. When the
template renders, "Hello Alice" appears instead of
<span ng-non-bindable>"Hello {{ name }}"</span>.
code-example(language="dart").
class AppComponent {
String name = 'Alice';
}
//- STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
p.
Add the following code to the bottom of <code>web/main.dart</code>:
code-example(language="dart" format="linenums:14").
main() {
bootstrap(AppComponent);
}
p.
This code adds a <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function.
The argument to <code>bootstrap()</code> is the name of the component class
you defined above.
//- STEP 5 - Declare the HTML ##########################
.l-main-section
h2#section-angular-create-account 5. Declare the HTML
p. p.
Create a file named <code>web/index.html</code> that contains Create a file named <code>web/index.html</code> that contains
the following code, the following code:
which loads <code>main.dart</code> and instantiates the my-app component:
code-example(language="html" format="linenums"). +makeExample('gettingstarted/dart/ex1/web/index.html', null, 'web/index.html')
&lt;!doctype html>
&lt;html>
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script async src="main.dart" type="application/dart">&lt;/script> :markdown
&lt;script async src="packages/browser/dart.js">&lt;/script> The `<my-app>` tag in the `<body>` is
&lt;/head&gt; the custom HTML element defined in the Dart file.
&lt;body>
&lt;my-app>&lt;/my-app>
&lt;/body>
&lt;/html>
//- STEP 6 - Run ##########################
//- ##########################
.l-main-section .l-main-section
h2#section-angular-run-app 6. Run your app h2#section-angular-run-app Run the app
p. p.
You have a few options for running your app. You have a few options for running your app.
@ -216,25 +147,39 @@ p.
p. p.
Once the app is running, Once the app is running,
you should see <b>Hello Alice</b> in your browser window. you should see <b>My First Angular 2 App</b> in your browser window.
//- STEP 7 - Generate JavaScript ##########################
.l-main-section
h2#section-angular-run-app 7. Generate JavaScript
p. p.
If you don't see that, make sure you've entered all the code correctly
and run `pub get`.
//- ##########################
.l-main-section
h2#section-angular-run-app Generate JavaScript
:markdown
Before you can deploy your app, you need to generate JavaScript files. Before you can deploy your app, you need to generate JavaScript files.
Compiling your Dart code to JavaScript is easy: Pub build makes that easy.
just run <code>pub build</code>. To improve your app's performance, convert the
HTML file to directly include the generated JavaScript;
one way to do that is with dart_to_js_script_rewriter.
:markdown
Add the dart_to_js_script_rewriter package to your pubspec,
in both the `dependencies` and `transformers` sections.
- var stylePattern = { pnk: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)/gm, otl: /(dependencies:)|(transformers:)/g };
+makeExample('gettingstarted/dart/ex2/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
p.
Then compile your Dart code to JavaScript,
using <code>pub build</code>.
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...
... //- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.42
Built 333 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.39
p. p.
The generated JavaScript appears, along with supporting files, The generated JavaScript appears, along with supporting files,
@ -242,24 +187,18 @@ p.
p. p.
When you generate JavaScript for an Angular app, When you generate JavaScript for an Angular app,
be sure you use the Angular transformer. be sure to use the Angular transformer.
It analyzes your code, It analyzes your code,
converting reflection-using code to static code converting reflection-using code to static code
that Dart's build tools can compile to faster, smaller JavaScript. that Dart's build tools can compile to faster, smaller JavaScript.
The highlighted lines in <code>pubspec.yaml</code> The highlighted lines in <code>pubspec.yaml</code>
configure the Angular transformer: configure the Angular transformer:
code-example(language="yaml" format="linenums"). - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
name: hello_world +makeExample('gettingstarted/dart/ex2/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.39
browser: ^0.10.0
<span class="pnk">transformers:
- angular2:
entry_points: web/main.dart</span>
p. p.
The <code>entry_points</code> entry The <code>entry_points</code> item
identifies the Dart file in your app identifies the Dart file in your app
that has a <code>main()</code> function. that has a <code>main()</code> function.
For more information, see the For more information, see the
@ -285,6 +224,8 @@ p.
.l-main-section .l-main-section
h2#section-transpile Great job! Next step... h2#section-transpile Great job! Next step...
<!--TODO: Join us on the [Tour of Heroes](./toh-pt1.html) -->
p. p.
Follow the <a href="guide">developer guide</a> Follow the <a href="guide">developer guide</a>
to continue playing with Angular 2 for Dart. to continue playing with Angular 2 for Dart.