amirrajabi/Angular 2

## Angular 2
$ npm install -g 'typescript@^1.5.0-beta'

$ git clone https://github.com/fcoury/angular2-reddit

$ npm install

1 <!doctype html>
2 <html>
3 <head>
4 <title>Angular 2 - Poor Man's Reddit</title>
5 <!-- Libraries -->
6 <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/t\
7 raceur-runtime.js"></script>
8 <script src="https://jspm.io/system@0.16.js"></script>
9 <script src="bundle/angular2.dev.js"></script>
10 <!-- Stylesheet -->
11 <link rel="stylesheet" type="text/css" href="styles.css">
12 </head>
13 <body>
14 <script>
15 System.import('app');
16 </script>
17
18 <hello-world></hello-world>
19
20 </body>
21 </html>


1 /// <reference path="typings/angular2/angular2.d.ts" />
2
3 import {
4 Component,
5 View,
6 bootstrap,
7 } from "angular2/angular2";


1 @Component({
2 selector: 'hello-world'
3 })
4 @View({
5 template: `<article>Hello {{ name }}</article>`
6 })
7 class HelloWorld {
8 name: string;
9
10 constructor() {
11 this.name = 'Felipe';
12 }
13 }


1 /// <reference path="typings/angular2/angular2.d.ts" />
2
3 import {
4 Component,
5 For,
6 View,
7 bootstrap,
8 } from "angular2/angular2";
9
10 @Component({
11 selector: 'hello-world'
12 })
13 @View({
14 directives: [For],
15 template: `
16 <ul>
17 <li *for="#name of names">Hello {{ name }}</li>
18 </ul>
19 `
20 })
21 class HelloWorld {
22 names: Array<string>;
23
24 constructor() {
25 this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
26 }
27 }
28
29 bootstrap(HelloWorld);


$ tsc


$ ls app.js


app.js


$ ./node_modules/http-server/bin/http-server


$ tsc --watch
	$ npm install -g 'typescript@^1.5.0-beta'

	$ git clone https://github.com/fcoury/angular2-reddit

	$ npm install

	1 <!doctype html>
	2 <html>
	3 <head>
	4 <title>Angular 2 - Poor Man's Reddit</title>
	5 <!-- Libraries -->
	6 <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/t\
	7 raceur-runtime.js"></script>
	8 <script src="https://jspm.io/system@0.16.js"></script>
	9 <script src="bundle/angular2.dev.js"></script>
	10 <!-- Stylesheet -->
	11 <link rel="stylesheet" type="text/css" href="styles.css">
	12 </head>
	13 <body>
	14 <script>
	15 System.import('app');
	16 </script>
	17
	18 <hello-world></hello-world>
	19
	20 </body>
	21 </html>



	1 /// <reference path="typings/angular2/angular2.d.ts" />
	2
	3 import {
	4 Component,
	5 View,
	6 bootstrap,
	7 } from "angular2/angular2";


	1 @Component({
	2 selector: 'hello-world'
	3 })
	4 @View({
	5 template: `<article>Hello {{ name }}</article>`
	6 })
	7 class HelloWorld {
	8 name: string;
	9
	10 constructor() {
	11 this.name = 'Felipe';
	12 }
	13 }


	1 /// <reference path="typings/angular2/angular2.d.ts" />
	2
	3 import {
	4 Component,
	5 For,
	6 View,
	7 bootstrap,
	8 } from "angular2/angular2";
	9
	10 @Component({
	11 selector: 'hello-world'
	12 })
	13 @View({
	14 directives: [For],
	15 template: `
	16 <ul>
	17 <li *for="#name of names">Hello {{ name }}</li>
	18 </ul>
	19 `
	20 })
	21 class HelloWorld {
	22 names: Array<string>;
	23
	24 constructor() {
	25 this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
	26 }
	27 }
	28
	29 bootstrap(HelloWorld);


	$ tsc


	$ ls app.js


	app.js


	$ ./node_modules/http-server/bin/http-server


	$ tsc --watch