iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests 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
jspm_packages
typings
packages
build
pubspec.lock
.pub
.packages
*.map
.DS_Store
.idea

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

@ -86,7 +86,7 @@ function createShredPackage(shredOptions) {
readFilesProcessor.sourceFiles = [ {
// Process all candidate files in `src` and its subfolders ...
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.
// So `src/foo/bar.js` will have relative path of `foo/bar.js`
basePath: options.examplesDir
@ -231,4 +231,4 @@ function initializePackage(pkg) {
// Set logging level
log.level = 'info';
})
}
}

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
header Angular 2 is currently in Developer Preview
p.
We recommend using
<a href='https://angulardart.org'>Angular for Dart</a>
for production applications.
header Don't want Dart?
:markdown
Although we're getting started in Dart, you can also write Angular 2 apps
in TypeScript and JavaScript.
Just select either of those languages from the combo-box in the banner.
p.
These instructions assume that you already have the
@ -15,21 +20,20 @@ p.
You can also download
<a href="https://www.dartlang.org/tools/">Dart plugins for
other IDEs and editors</a>.
p.
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
<code>pubspec.yaml</code> in it.
//- ##########################
.l-main-section
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").
&gt; <span class="blk">mkdir hello_world</span>
&gt; <span class="blk">cd hello_world</span>
&gt; <span class="blk">mkdir angular2_getting_started</span>
&gt; <span class="blk">cd angular2_getting_started</span>
&gt; <span class="blk">vim pubspec.yaml</span> # Use your favorite editor!
p.
@ -37,168 +41,95 @@ 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.39</b>.
<b>2.0.0-alpha.42</b>.
code-example(language="yaml" format="linenums").
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
+makeExample('gettingstarted/dart/ex1/pubspec.yaml', null, 'pubspec.yaml')
p.
Still in the same directory, create a <code>web</code> directory.
Create a file under <code>web</code> named <code>main.dart</code>.
In the same directory, create a <code>web</code> directory, and then
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">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>
Resolving dependencies...
//- 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
h2#section-transpile Create a Dart file
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
h2#section-angular-create-account 3. Define a component
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
h2#section-angular-create-account Create an HTML file
p.
Create a file named <code>web/index.html</code> that contains
the following code,
which loads <code>main.dart</code> and instantiates the my-app component:
the following code:
code-example(language="html" format="linenums").
&lt;!doctype html>
&lt;html>
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
+makeExample('gettingstarted/dart/ex1/web/index.html', null, 'web/index.html')
&lt;script async src="main.dart" type="application/dart">&lt;/script>
&lt;script async src="packages/browser/dart.js">&lt;/script>
&lt;/head&gt;
&lt;body>
&lt;my-app>&lt;/my-app>
&lt;/body>
&lt;/html>
:markdown
The `<my-app>` tag in the `<body>` is
the custom HTML element defined in the Dart file.
//- STEP 6 - Run ##########################
//- ##########################
.l-main-section
h2#section-angular-run-app 6. Run your app
h2#section-angular-run-app Run the app
p.
You have a few options for running your app.
@ -216,25 +147,39 @@ p.
p.
Once the app is running,
you should see <b>Hello Alice</b> in your browser window.
//- STEP 7 - Generate JavaScript ##########################
.l-main-section
h2#section-angular-run-app 7. Generate JavaScript
you should see <b>My First Angular 2 App</b> in your browser window.
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.
Compiling your Dart code to JavaScript is easy:
just run <code>pub build</code>.
Pub build makes that easy.
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").
&gt; <span class="blk">pub build</span>
Loading source assets...
...
Built 333 files to "build".
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.39
//- REGENERATE THIS OUTPUT - or delete it? - when updating from 2.0.0-alpha.42
p.
The generated JavaScript appears, along with supporting files,
@ -242,24 +187,18 @@ p.
p.
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,
converting reflection-using code to static code
that Dart's build tools can compile to faster, smaller JavaScript.
The highlighted lines in <code>pubspec.yaml</code>
configure the Angular transformer:
code-example(language="yaml" format="linenums").
name: hello_world
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>
- var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm };
+makeExample('gettingstarted/dart/ex2/pubspec.yaml', null, 'pubspec.yaml', stylePattern)
p.
The <code>entry_points</code> entry
The <code>entry_points</code> item
identifies the Dart file in your app
that has a <code>main()</code> function.
For more information, see the
@ -285,6 +224,8 @@ p.
.l-main-section
h2#section-transpile Great job! Next step...
<!--TODO: Join us on the [Tour of Heroes](./toh-pt1.html) -->
p.
Follow the <a href="guide">developer guide</a>
to continue playing with Angular 2 for Dart.