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

Merge pull request #39 from davideast/usertest 

tweaks to quickstarts
This commit is contained in:
David East 2015-03-03 11:41:21 -08:00
parent 5baa3061e5 da2d76352b
commit 8704d7549f
2 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,13 +5,22 @@ p.
<a href="https://www.dartlang.org/tools/download.html">download Dart</a>.
Then return here.
// STEP 1 - Install Angular ##########################
// STEP 1 - Create a project ##########################
.l-main-section
h2#section-install-angular 1. Install Angular
h2#section-install-angular 1. Create a project
p.
In a new directory, create a <code>pubspec.yaml</code> file.
Add angular2 and browser as dependencies:
Create a new directory, and put a file named
<code>pubspec.yaml</code> file in it.
pre.prettyprint
code.
&gt; mkdir hello_world
&gt; cd hello_world
&gt; vim pubspec.yaml # Use your favorite editor!
p.
In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies:
// [PENDING: if the transformer isn't working in time,
// remove it and use reflection in Dartium instead.
@ -51,6 +60,13 @@ p.
p.
Still in the same directory, create a <code>web</code> directory.
Create a file under <code>web</code> named <code>main.dart</code>.
pre.prettyprint
code.
&gt; mkdir web
&gt; vim web/main.dart # Use your favorite editor!
p.
Edit <code>web/main.dart</code> to import the angular2 library
and (for now) two reflection libraries:
@ -69,18 +85,18 @@ p.
p.
A component is a custom HTML element.
In this step, you create a component that has the tag <b>&lt;app></b>.
In this step, you create a component that has the tag <b>&lt;my-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 add the following code,
which defines the app component:
which defines the my-app component:
pre.prettyprint.linenums
code.
@Component(
selector: 'app'
selector: 'my-app'
)
@Template(
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
@ -109,15 +125,15 @@ p.
pre.prettyprint.linenums
code.
@Component(
selector: 'app'
selector: 'my-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>.
The annotations above specify an HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
// TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing.
@ -178,7 +194,7 @@ p.
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:
which loads <code>main.dart</code> and instantiates the my-app component:
pre.prettyprint.linenums
code.
@ -188,7 +204,7 @@ p.
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;/head&gt;
&lt;body>
&lt;app>&lt;/app>
&lt;my-app>&lt;/my-app>
&lt;script type="application/dart" src="main.dart">&lt;/script>
&lt;script src="packages/browser/dart.js">&lt;/script>
@ -222,7 +238,7 @@ p.
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great Job! Next Step...
h2#section-transpile Great job! Next step...
p.
Learn some template syntax for extra credit.

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

@ -12,15 +12,16 @@
<a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
p Clone the repository inside of aleady existing project.
p Clone the repository inside of already existing project.
pre.prettyprint.linenums
code git clone https://github.com/davideast/concious.git es6-shim
code git clone https://github.com/davideast/conscious.git es6-shim
.l-sub-section
h3 The <code>es6-shim</code>
h3 ES6 and es6-shim
p.
Angular builds on top of ES6, the new specification of the JavaScript language.
Angular builds on top of ES6 (ECMAScript 6),
the new specification of the JavaScript language.
ES6 is not widely supported in all browsers today. The following es6-shim
repository allows you to use ES6 in the browser.
@ -32,7 +33,6 @@
Think of the es6-shim repository as package rather than a new project.
// STEP 2 - Import Angular ##########################
.l-main-section
h2#section-transpile 2. Import Angular
@ -52,7 +52,6 @@
p The above import statement will import three modules from Angular. These modules load at runtime.
// STEP 3 - Create a component ##########################
.l-main-section
@ -75,12 +74,12 @@
selector: 'my-app'
})
@Template({
inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
})
// Component Controller
class MyAppComponent {
constructor() {
this.name = "Alice";
this.name = 'Alice';
}
}
@ -111,7 +110,7 @@
selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
})
@Template({
inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;` // Defines the inline template for the component
inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
})
p.
@ -129,7 +128,7 @@
code.
class MyAppComponent {
constructor() {
this.name = "Alice";
this.name = 'Alice';
}
}
@ -203,9 +202,9 @@
p Tell System about three paths:
ol
li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking.
li The my-app component created above - The component to display on the page.
li Angular: The Angular framework.
li Runtime assertions: Optional assertions for runtime type checking.
li The my-app component created above: The component to display on the page.
pre.prettyprint.linenums
code.
@ -237,9 +236,8 @@
p Run the root of your project on a local server.
// WHAT'S NEXT... ##########################
.l-main-section
h2#section-transpile Great Job! Next Step...
h2#section-transpile Great job! Next step...
p Learn some template syntax for extra-credit.
p Learn some template syntax for extra credit.