honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ts): moving dev guide TS.

Browse Source 
Removes plunker links as they don't support TS yet.
This commit is contained in:
Rado Kirov
2015-05-06 14:31:50 -07:00
parent 8455cf49c3
commit bdf28bc026
4 changed files with 247 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/js/latest/guide/displaying-data.jade
+102 -84
View File
File diff suppressed because it is too large Load Diff
public/docs/js/latest/guide/making-components.jade
+34 -38
View File
@@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-its-all-a-tree It's all a tree
@@ -16,24 +11,6 @@
component that uses a <code>&lt;child&gt;</code> component like so:
.code-box
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ParentComponent() {
this.message = "I'm the parent";
}
ParentComponent.annotations = [
new angular.Component({
selector: "parent"
}),
new angular.View({
template:
'&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
'&lt;child&gt;&lt;/child&gt;',
directives: [ChildComponent]
})
];
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
@@ -54,25 +31,28 @@
this.message = "I'm the parent";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ParentComponent() {
this.message = "I'm the parent";
}
ParentComponent.annotations = [
new angular.ComponentAnnotation({
selector: "parent"
}),
new angular.ViewAnnotation({
template:
'&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
'&lt;child&gt;&lt;/child&gt;',
directives: [ChildComponent]
})
];
p You then just need to write the <code>ChildComponent</code> class to make it work:
.code-box
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ChildComponent() {
this.message = "I'm the child";
}
ChildComponent.annotations = [
new angular.Component({
selector: "child"
}),
new angular.View({
template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
})
];
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
@@ -85,10 +65,26 @@
`
})
class ChildComponent {
message: string;
constructor() {
this.message = "I'm the child";
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
function ChildComponent() {
this.message = "I'm the child";
}
ChildComponent.annotations = [
new angular.ComponentAnnotation({
selector: "child"
}),
new angular.ViewAnnotation({
template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
})
];
p.
Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to
public/docs/js/latest/guide/setup.jade
+59 -64
View File
@@ -1,11 +1,6 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-install-or-plunker Install Angular or Use Plunker
h2#section-install-or-plunker Install Angular
p There are four steps to create any Angular app:
ol
li Create an entry point HTML file where users will start
@@ -14,24 +9,27 @@
li Bootstrap Angular
p.
You can edit and test out your apps either though serving local files through a web server or through a service like
Plunker.
.callout.is-helpful
header Plunker is the fastest setup
p.
Plunker is a free online text editor. You can use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> for Angular 2 to get going without any setup.
You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.
p.
For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> to get going. If you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
When you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with:
pre.prettyprint.lang-bash
code python -m SimpleHTTPServer 8000
.callout.is-helpful
header Typescript vs ES5
p.
Although we work through the examples in TypeScript, you can also use
regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
<code>.ts</code>.
.l-main-section
h2#section-create-an-entry-point Create an entry point
p.
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
you'll build your first component.
p.
@@ -39,21 +37,9 @@
application.
p.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.
.code-box
pre.prettyprint.lang-html(data-name="es5")
code.
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-html(data-name="typescript")
code.
&lt;!DOCTYPE html&gt;
@@ -61,22 +47,27 @@
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;script src=&quot;https://jspm.io/[email protected]&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.21/angular2.dev.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;my-app&gt;&lt;/my-app&gt;
&lt;script&gt;
System.config({
paths: {
&#39;*&#39;: &#39;*.js&#39;,
&#39;angular2/*&#39;: &#39;angular2/*&#39;,
}
});
System.import(&#39;main&#39;);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
pre.prettyprint.lang-html(data-name="es5")
code.
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.21/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
.callout.is-helpful
header Don't use code.angularjs.org in a live app
@@ -88,28 +79,11 @@
h2#section-set-up-the-starting-component Set up the starting component
p.
In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the
In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
<code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
it all off like this:
.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
function AppComponent() {}
AppComponent.annotations = [
new angular.Component({
selector: 'my-app'
}),
new angular.View({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
];
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
import {Component, View, bootstrap} from 'angular2/angular2';
@@ -125,13 +99,37 @@
bootstrap(AppComponent);
pre.prettyprint.lang-javascript(data-name="es5")
code.
function AppComponent() {}
AppComponent.annotations = [
new angular.ComponentAnnotation({
selector: 'my-app'
}),
new angular.ViewAnnotation({
template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
})
];
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
.callout.is-helpful
header Annotations vs Decorators
p.
If you are transpiling using a tool that translates the <code>@</code> symbols to
annotations (for example Traceur), you will need to import the annotation versions of
Component and View. That can be easily achieved using
<code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.
.l-main-section
h2#section-run-it Run it!
p.
Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and
you should see:
Open <code>index.html</code> through your web server and you should see:
div(align='center')
img(src='setup-example1.png')
@@ -181,18 +179,15 @@
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
.code-box
pre.prettyprint.lang-typescript(data-name="es5")
code.
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
import {Component, View, bootstrap} from 'angular2/angular2';
...
// bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent);
pre.prettyprint.lang-typescript(data-name="es5")
code.
// window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent);
});
public/docs/js/latest/guide/user-input.jade
+52 -58
View File
@@ -1,8 +1,3 @@
.statement
h4 Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
.l-main-section
h2#section-responding-to-user-input Responding to user input with event syntax
@@ -43,6 +38,18 @@
on the array when called.
.code-box
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
class TodoList {
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
pre.prettyprint.linenums.lang-javascript(data-name="es5")
code.
//ES5
@@ -53,19 +60,6 @@
};
}
pre.prettyprint.linenums.lang-typescript(data-name="typescript")
code.
//TypeScript
class TodoList {
todos: Array&lt;string&gt;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
}
.callout.is-helpful
header Production Best Practice
p.
@@ -118,45 +112,6 @@
h2#section-final-code Final Code
.code-box
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.Component({
selector: "todo-list"
}),
new angular.View({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript(data-name="typescript")
code.
//TypeScript
@@ -179,7 +134,7 @@
directives: [For, If]
})
class TodoList {
todos: Array<string>;
todos: Array&lt;string&gt;;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
@@ -198,3 +153,42 @@
}
bootstrap(TodoList);
pre.prettyprint.lang-javascript(data-name="es5")
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.ComponentAnnotation({
selector: "todo-list"
}),
new angular.ViewAnnotation({
template:
'&lt;ul&gt;' +
'&lt;li *for="#todo of todos">' +
'{{ todo }}' +
'&lt;/li&gt;' +
'&lt;/ul&gt;' +
'&lt;input #textbox (keyup)="doneTyping($event)">' +
'&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});