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

Merge pull request #34 from davideast/dart1 

First draft of Dart content, plus some edits for js quickstart
This commit is contained in:
Kathy Walrath 2015-03-02 20:49:28 -08:00
parent c9f6c832b4 7791ed9209
commit 46a55185a3
9 changed files with 358 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/docs/dart/latest/_data.json Normal file
View File

@ -0,0 +1,29 @@
{
"index": {
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Angular 2 is currently in Alpha Preview. We recommend using <a href='https://angulardart.org/guide'>AngularDart 1.X</a> for production applications."
},
"quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart"
},
"resources": {
"icon": "play-circle-fill",
"title": "Angular Resources",
"banner": "Angular 2 is currently in Alpha Preview. For AngularDart 1.X please visit <a href='https://angulardart.org/'>angulardart.org</a>."
},
"api": {
"icon": "book",
"title": "API Proposal"
},
"help": {
"icon": "chat",
"title": "Help & Support"
}
}

13
public/docs/dart/latest/api.jade Normal file
View File

@ -0,0 +1,13 @@
.l-main-section
h2 Developer Preview
p.
The Angular 2.0 API is currently in active development and not production ready.
This page will showcase a preview of proposed methods to help further the discussion
in the development community.
.l-sub-section
h3 Angular 1.X for Production
p.
If you're building a production app today, please
<a href="https://angulardart.org">use AngularDart 1.X</a>.

33
public/docs/dart/latest/help.jade Normal file
View File

@ -0,0 +1,33 @@
.l-main-section
h2 Get Help Using Angular
p.
We have an incredible community of developers who are passionate about solving problems.
We recommend some of the following methods to get help with Angular.
.l-sub-section
h3 Angular Google Group
ul
li Search the archive first, it's likely that your question was already answered.
li To avoid the spam moderation queue, don't include code directly in your email. (See #3)
li Linking to a live code example that demonstrates your problem or question will get you an answer faster. <a href="http://plnkr.co/edit/rQvx8CXtmkCKR89jWn8T">Use this template</a>.
li If you get help, help others. Good karma rulez!
a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) View the Google Group
.l-sub-section
h3 Angular Chat Room
p Talk in real time with other Angular developers.
a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) View the Chat Room
.l-sub-section
h3 Report an Issue
p If your run into an issue or have a feature request, you can create a new issue on our github repostitory.
a(href="https://github.com/angular/angular.js/issues" class="button button-primary" md-button) Report an Issue

30
public/docs/dart/latest/index.jade Normal file
View File

@ -0,0 +1,30 @@
div.c4
md-card
md-card-content
h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
p.text-body Learn in 5 minutes
footer
a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
div.c4
md-card
md-card-content
h3.text-headline.text-uppercase <span class="icon-play-circle-outline"></span> Resources
p.text-body Preview of v2.0
footer
a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources
div.c4
md-card
md-card-content
h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
p.text-body Proposal for v2.0 API
footer
a(href="/docs/#{current.path[1]}/#{current.path[2]}/api.html" class="button" md-button) View API

216
public/docs/dart/latest/quickstart.jade Normal file
View File

@ -0,0 +1,216 @@
p.
These instructions assume that you already have the Dart SDK
and any tools you like to use with Dart.
If not, go
<a href="https://www.dartlang.org/tools/download.html">download Dart</a>.
Then return here.
// STEP 1 - Install Angular ##########################
.l-main-section
h2#section-install-angular 1. Install Angular
p.
In a new directory, create a <code>pubspec.yaml</code> file.
Add angular2 and browser as dependencies,
and add the angular2 transformer:
[PENDING: if the transformer isn't working in time,
remove it and use reflection in Dartium instead.
Perhaps require Dart 1.9.]
pre.prettyprint.linenums
code.
name: hello_world
version: 0.0.1
dependencies:
angular2: "&gt;=2.0.0-alpha.6 &lt;3.0.0"
browser: any
transformers:
- angular2
p.
In the same directory, run <code>pub get</code>
to install the angular2 and browser packages
(along with the packages they depend on):
pre.prettyprint.linenums
code.
> pub get
Resolving dependencies... (7.3s)
+ angular2 2.0.0-alpha.6
+ browser 0.10.0+2
+ path 1.3.3
+ stack_trace 1.2.3
Changed 4 dependencies!
p.
PENDING: Create template? Link to pub/pubspec docs?
Is browser really needed?
TODO: make this an invisible note.
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
p.
Under the same directory, create a <code>web</code> directory.
Create a file under <code>web</code> named <code>main.dart</code>.
Edit <code>web/main.dart</code> to import the angular2 library:
pre.prettyprint.linenums
code import 'package:angular2/angular2.dart';
// STEP 3 - Define a component ##########################
.l-main-section
h2#section-angular-create-account 3. Define a component
p.
A component is a custom HTML element.
In this step, you create a component that has the tag <b>&lt;app></b>.
The Dart code for a component consists of a class
with annotations that describe the component.
p.
Update <code>web/main.dart</code> to contain the following code,
which defines the app component:
pre.prettyprint.linenums
code.
import 'package:angular2/angular2.dart';
@Component(
selector: 'app'
)
@Template({
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
class AppComponent {
String name = 'Alice';
}
.l-sub-section
h3 Annotations
p.
The <code>@Component</code> annotation defines the HTML tag for the component. [PENDING: component controller?]
The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector. [PENDING: huh?]
p.
The <code>@Template</code> annotation defines the template to apply to the
component. This component uses an inline template, but external templates are
available as well. To use an external template, specify a <code>url</code> property
and give it the path to the HTML file.
pre.prettyprint.linenums
code.
@Component(
selector: 'app'
)
@Template({
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
p.
The annotations above specify an HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
and a template of <code>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
p TODO: make double-mustaches work in text (they do work in listings)
.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.
[PENDING: Do we really want to use the term "component controller"?
If so, set it up beforehand.
In the original text, what does "the backing" mean, and is it
important that we keep it?]
pre.prettyprint.linenums
code.
class AppComponent {
String name = 'Alice';
}
p.
The template above binds to a <code>name</code> property through the <code>{{ }}</code>
syntax.The body of the constructor assigns "Alice" to the name property. When the
template renders, Alice appears instead of <code>{{ name }}</code>.
[TODO: fix double mustaches]
// STEP 4 - Bootstrap ##########################
.l-main-section
h2#section-transpile 4. Bootstrap
p.
At the bottom of <code>web/main.dart</code>,
add a <code>main()</code> function
that calls Angular's <code>bootstrap()</code> function.
The argument to <code>bootstrap()</code> is the name of the app class
you defined above:
pre.prettyprint.linenums
code.
main() {
bootstrap(AppComponent);
}
p.
[PENDING: change/remove line numbers. They should start at 12.]
// STEP 5 - Declare the HTML ##########################
.l-main-section
h2#section-angular-create-account 5. Declare the HTML
p.
Create a file named <code>web/index.html</code> that contains
the following code,
which loads <code>main.dart</code> and instantiates the app component:
pre.prettyprint.linenums
code.
&lt;!doctype html>
&lt;html>
&lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;/head&gt;
&lt;body>
&lt;app>&lt;/app>
&lt;script type="application/dart" src="main.dart">&lt;/script>
&lt;script src="packages/browser/dart.js">&lt;/script>
&lt;/body>
&lt;/html>
p.
[PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Fix!]
// STEP 5 - Build and run ##########################
.l-main-section
h2#section-angular-run-app 5. Build and run your app
p.
You have many options.
One is to run the <code>pub serve</code>
command in the directory
that contains your app's <code>pubspec.yaml</code> file:
pre.prettyprint.linenums
code.
> pub serve
Serving helloworld on http://localhost:8080
p.
In the browser, go to the index file—for example,
localhost:8080/web/index.html.
[PENDING: This isn't working right now. Fix!]
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great Job! Next Step...
p.
Learn some template syntax for extra credit.
[PENDING: really?]

20
public/docs/dart/latest/resources.jade Normal file
View File

@ -0,0 +1,20 @@
.l-main-section
h2 Victor Savkin's blog posts
ul
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change Detection</a>
li <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Dependency Injection</a>
.l-main-section
h2 David East's Intro Todo App
ul
li <span class="icon-play-circle-outline"></span> <a href="https://developers.google.com/experts/all/technology/angular-js">Building a Todo App</a> (video)
.l-main-section
h2 <span class="icon-play-circle-outline"></span> More Videos
ul
li <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">ng-europe playlist of videos</a> on Angular 2 and future of Angular
li Hejlsberg's <a href="https://www.youtube.com/watch?v=Ut694dsIa8w">talk on TypeScript</a> from December
li Coming soon: <a href="http://www.ng-conf.org/">playlist of video from ng-conf 2015</a>

2
public/docs/js/2_0_0-alpha_11/quickstart.jade
View File

@ -1,3 +1 @@
h1 JavaScript Quickstart
!= partial("../_quickstart", public.docs.js._data)

4
public/docs/js/latest/_data.json
View File

@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
"banner": "Angular 2 is currently in Alpha Preview. We recommend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
},
"quickstart": {
@ -26,4 +26,4 @@
"icon": "chat",
"title": "Help & Support"
}
}
}

31
public/docs/js/latest/quickstart.jade
View File

@ -26,8 +26,8 @@
p.
The es6-shim package includes Angular and dependencies needed to compile
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
p.
Think of the es6-shim repository as package rather than a new project.
@ -41,9 +41,9 @@
This quickstart will consist of two files, an <code>index.html</code> and a
<code>app.es6</code>. Both of these files will be at the root of the project.
The <code>.es6</code> extension signifies that the file uses ES6 syntax.
p This quickstart will create a component that renders "Hello Alice" to the page.
p Using the ES6 module syntax you can import the required modules from Angular2.
pre.prettyprint.linenums
@ -59,7 +59,6 @@
h2#section-angular-create-account 3. Create a component
p.
Components are custom HTML elements. Angular uses components to empower HTML.
Components structure and repre.prettyprint.linenumssent the UI. This quickstart
demonstrates the process of creating a component. This component will have the tag of app,
<code>&lt;my-app&gt;&lt;/my-app&gt;</code>.
@ -73,7 +72,7 @@
// Annotation Section
@Component({
selector: 'my-app'
selector: 'my-app'
})
@Template({
inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
@ -84,7 +83,7 @@
this.name = "Alice";
}
}
// Render the app to the page
bootstrap(MyAppComponent);
@ -92,7 +91,7 @@
h3 Component Annotations
p.
A component annotation provides meta-data about the <code>component</code>.
A component annotation provides metadata about the <code>component</code>.
An annotation can always identified by its at-sign — <code>@</code>.
p.
The <code>@Component</code> annotation defines the HTML tag for the component. The <code>@Component</code>
@ -127,12 +126,12 @@
controller uses ES6 <code>class</code> syntax.
pre.prettyprint.linenums
code
| class MyAppComponent {
| constructor() {
| this.name = "Alice";
| }
| }
code.
class MyAppComponent {
constructor() {
this.name = "Alice";
}
}
p.
Templates read from their component controllers. Templates have access to any properties
@ -182,10 +181,10 @@
&lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
<!-- -->
&lt;!-- The app component created in app.es6 --&gt;
&lt;my-app&gt;&lt;/my-app&gt;
<!-- -->
&lt;/body&gt;
&lt;/html&gt;