Latest Dart info (still needs work)

This commit is contained in:
Kathy Walrath 2015-03-02 18:42:31 -08:00
parent 8a998d2eb1
commit b892275c2b
4 changed files with 131 additions and 159 deletions

View File

@ -3,7 +3,7 @@
"icon": "home", "icon": "home",
"title": "Angular Docs", "title": "Angular Docs",
"menuTitle": "Docs Home", "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://angulardart.org/guide'>AngularDart 1.X</a> for production applications."
}, },
"quickstart": { "quickstart": {
@ -14,7 +14,7 @@
"resources": { "resources": {
"icon": "play-circle-fill", "icon": "play-circle-fill",
"title": "Angular Resources", "title": "Angular Resources",
"banner": "Angular 2 is currently in Alpha Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>." "banner": "Angular 2 is currently in Alpha Preview. For AngularDart 1.X please visit <a href='https://angulardart.org/'>angulardart.org</a>."
}, },
"api": { "api": {

View File

@ -10,5 +10,4 @@
h3 Angular 1.X for Production h3 Angular 1.X for Production
p. p.
If you're building a production app today, please If you're building a production app today, please
<a href="https://docs.angularjs.org/api">use Angular 1.X</a>. <a href="https://angulardart.org">use AngularDart 1.X</a>.
These versions of Angular are production ready and available today.

View File

@ -3,7 +3,7 @@
p. p.
We have an incredible community of developers who are passionate about solving problems. We have an incredible community of developers who are passionate about solving problems.
We reccomend some of the following methods to get help with Angular. We recommend some of the following methods to get help with Angular.
.l-sub-section .l-sub-section

View File

@ -1,144 +1,143 @@
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 ########################## // STEP 1 - Install Angular ##########################
.l-main-section .l-main-section
h2#section-install-angular 1. Install Angular h2#section-install-angular 1. Install Angular
p. p.
<strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not In a new directory, create a <code>pubspec.yaml</code> file.
reflect the final build process for Angular. The following setup is for those who Add angular2 and browser as dependencies,
want to try out Angular while it is in alpha. and add the angular2 transformer:
[PENDING: if the transformer isn't working in time,
p. remove it and use reflection in Dartium instead.
For the sake of this quickstart we recommend using the Perhaps require Dart 1.9.]
<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.
pre.prettyprint.linenums pre.prettyprint.linenums
code git clone https://github.com/davideast/concious.git es6-shim code.
name: hello_world
.l-sub-section version: 0.0.1
h3 A word on ES6 dependencies:
angular2: "&gt;=2.0.0-alpha.6 &lt;3.0.0"
browser: any
transformers:
- angular2
p. p.
Angular builds on top of ES6, the new specification of the JavaScript language. In the same directory, run <code>pub get</code>
Not all ES6 features are available in all browsers. The following es6-shim to install the angular2 and browser packages
repository allows you to use ES6 in the browser today. (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. p.
Angular is available on npm. Configuring Angular to run ES6 in the browser PENDING: Create template? Link to pub/pubspec docs?
requires a build process, detailed here. Is browser really needed?
TODO: make this an invisible note.
p.
The es6-shim package includes Angular and dependencies needed to compile
ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
// STEP 2 - Import Angular ########################## // STEP 2 - Import Angular ##########################
.l-main-section .l-main-section
h2#section-transpile 2. Import Angular h2#section-transpile 2. Import Angular
p. p.
Create a file named <code>app.es6</code> at the root of the project. Under the same directory, create a <code>web</code> directory.
The <code>.es6</code> extension signifies that the file uses ES6 syntax. Create a file under <code>web</code> named <code>main.dart</code>.
Using the ES6 module syntax you can import the required modules from Angular2. Edit <code>web/main.dart</code> to import the angular2 library:
pre.prettyprint.linenums pre.prettyprint.linenums
code import {Component, Template, bootstrap} from 'angular2/angular2'; code import 'package:angular2/angular2.dart';
p The above import statement will import the three modules from Angular. These modules load at runtime.
// STEP 3 - Define a component ##########################
// STEP 3 - Create a component ##########################
.l-main-section .l-main-section
h2#section-angular-create-account 3. Create a component h2#section-angular-create-account 3. Define a component
p. p.
Components are custom HTML elements. Angular uses components to empower HTML. A component is a custom HTML element.
Components structure and repre.prettyprint.linenumssent the UI. This quickstart In this step, you create a component that has the tag <b>&lt;app></b>.
demonstrates the process of creating a component. This component will have the tag of app. The Dart code for a component consists of a class
with annotations that describe the component.
pre.prettyprint.linenums p.
code &lt;app&gt;&lt;/app&gt; Update <code>web/main.dart</code> to contain the following code,
which defines the app component:
p A component consists of two parts; the annotation section and the component controller.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
import {Component, Template, bootstrap} from 'angular2/angular2'; import 'package:angular2/angular2.dart';
// Annotation Section @Component(
@Component({
selector: 'app' selector: 'app'
}) )
@Template({ @Template({
inline: ` inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
}) })
// Component Controller
class AppComponent { class AppComponent {
constructor() { String name = 'Alice';
this.name = "Alice";
}
} }
.l-sub-section .l-sub-section
h3 Component Annotations h3 Annotations
p. p.
A component annotation provides meta-data about the <code>component</code>. The <code>@Component</code> annotation defines the HTML tag for the component. [PENDING: component controller?]
An annotation can always identified by its at-sign — <code>@</code>. The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector. [PENDING: huh?]
p.
The <code>@Component</code> annotation defines the HTML tag for the component.
The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p. p.
The <code>@Template</code> annotation defines the template to apply to the The <code>@Template</code> annotation defines the template to apply to the
component. This component uses an inline template, but external templates are 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 available as well. To use an external template, specify a <code>url</code> property
and give it the path to the html file. and give it the path to the HTML file.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
@Component({ @Component(
selector: 'app' selector: 'app'
}) )
@Template({ @Template({
inline: ` inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
`
}) })
p. p.
The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> 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 {{ name }}&lt;/h1&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 .l-sub-section
h3 Component Controller h3 The template and the component controller
p. p.
The component controller is the backing of the component's template. A component A template has access to all the public properties and methods
controller uses ES6 <code>class</code> syntax. 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 pre.prettyprint.linenums
code code.
class AppComponent { class AppComponent {
constructor() { String name = 'Alice';
this.name = "Alice";
} }
}
p.
Templates read from their component controllers. Templates have access to any properties
or functions placed on the component controller.
p. p.
The template above binds to a <code>name</code> property through the <code>{{ }}</code> 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 syntax.The body of the constructor assigns "Alice" to the name property. When the
template renders, Alice will appear instead of <code>{{ name }}</code>. template renders, Alice appears instead of <code>{{ name }}</code>.
[TODO: fix double mustaches]
@ -146,20 +145,20 @@
.l-main-section .l-main-section
h2#section-transpile 4. Bootstrap h2#section-transpile 4. Bootstrap
p The last step to load the component on the page.
.l-sub-section
h3 The <code>bootstrap</code> function
p. p.
Angular provides a <code>bootstrap</code> function that renders a At the bottom of <code>web/main.dart</code>,
component to the page. The <code>bootstrap</code> function takes a add a <code>main()</code> function
component as a parameter. Any child components inside of the parent that calls Angular's <code>bootstrap()</code> function.
component will render as well. The argument to <code>bootstrap()</code> is the name of the app class
you defined above:
pre.prettyprint.linenums pre.prettyprint.linenums
code bootstrap(AppComponent); code.
main() {
bootstrap(AppComponent);
}
p.
[PENDING: change/remove line numbers. They should start at 12.]
// STEP 5 - Declare the HTML ########################## // STEP 5 - Declare the HTML ##########################
.l-main-section .l-main-section
@ -167,77 +166,51 @@
h2#section-angular-create-account 5. Declare the HTML h2#section-angular-create-account 5. Declare the HTML
p. p.
Create an <code>index.html</code> file at the root of the project. Create a file named <code>web/index.html</code> that contains
Include the <code>es6-shim.js</code> file in the <code>head</code> tag. the following code,
Now, declare the app component the <code>body</code>. The es6-shim must which loads <code>main.dart</code> and instantiates the app component:
load before any application code.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
&lt;html&gt; &lt;!doctype html>
&lt;html>
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt; &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
&lt;/head&gt; &lt;/head&gt;
&lt;body&gt; &lt;body>
<!-- --> &lt;app>&lt;/app>
&lt;!-- The app component created in app.es6 --&gt; &lt;script type="application/dart" src="main.dart">&lt;/script>
&lt;app&gt;&lt;/app&gt; &lt;script src="packages/browser/dart.js">&lt;/script>
<!-- --> &lt;/body>
&lt;/body&gt; &lt;/html>
&lt;/html&gt;
.l-sub-section
h3 Load the component module
p. p.
The last step is to load the module for the app component. [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!]
The es6-shim file comes packaged with the System library.
Most browsers today do not support ES6 module loading. System // STEP 5 - Build and run ##########################
provides module loading functionality to these browsers. .l-main-section
h2#section-angular-run-app 5. Build and run your app
p. p.
To load the needed modules, System needs to know where to You have many options.
load the files from. The paths property in System specifies One is to run the <code>pub serve</code>
the location of the files. command in the directory
that contains your app's <code>pubspec.yaml</code> file:
p Tell System about three paths:
ol
li Angular - The Angular framework.
li Runtime assertions - Optional assertions for runtime type checking.
li The app component created above - The component to display on the page.
pre.prettyprint.linenums pre.prettyprint.linenums
code. code.
&lt;html&gt; > pub serve
&lt;head&gt; Serving helloworld on http://localhost:8080
&lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
&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;app&gt;&lt;/app&gt;
&lt;script&gt;
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/es6-shim/angular2/*.js',
'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
'app': 'app.es6'
};
// Kick off the application
System.import('app');
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
p Run the root of your project on a local server.
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... ########################## // WHAT'S NEXT... ##########################
.l-main-section .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.
[PENDING: really?]