一、入门体验
最近由于项目的需要，本人花了一个礼拜的时间刚刚把angulajs1.x给入门，感觉可以上手做项目了，悲催的被告知，还需要学习angular2，2.x目前还是beta版（公测）估计第一个稳定版也快出来了吧！废话不多，我留下我学习的痕迹，上效果图：
（其实我也是ng-book2这本书来一步步学习的，在啰嗦一句，大家*啊，一定，不然好多资料你下不来，也在线看不到，https://github.com/kittencup/angular2-ama-cn/issues/24） 
二、入门实例的代码
app.ts代码：
import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";
@Component({
selector:'reddit-article',
host:{
class:'row'
},
template:`
<div class="four wide column center aligned votes">
<div class="ui statistic">
<div class="value">{{votes}}</div>
<div class="label">Points</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{link}}">{{title}}</a>
<ul class="ui big horizontal list votes">
<li class="item">
<a href (click)="voteUp()">
<i class="arrow up icon"></i>upvote
</a>
</li>
<li class="item">
<a href (click)="voteDown()">
<i class="arrow down icon"></i>downvote
</a>
</li>
</ul>
</div>
`
})
class ArticleComponent{
votes:number;
title:string;
link:string;
constructor(){
this.votes=10;
this.title="Angular 2";
this.link='http://angular.io';
}
voteUp(){
this.votes+=1;
return false;
}
voteDown(){
this.votes-=1;
return false;
}
}
@Component({
selector:'reddit',
directives:[ArticleComponent],
template:`
<form class="ui large form segment">
<h3 class="ui header">Add a Link</h3>
<div class="field">
<label for="title">Title:</label><input name="title" #newtitle>
</div>
<div class="field">
<label for="link">Link:</label><input name="link" #newlink>
</div>
<button (click)="addArticle(newtitle,newlink)" class="ui positive right floated button">
submit link
</button>
</form>
<div class="ui grid posts">
<reddit-article></reddit-article>
</div>
`
})
class RedditApp{
constructor(){}
addArticle(title:HTMLInputElement,link:HTMLInputElement):void{
console.log(`Adding article title:${title.value} and link:${link.value}`);
}
}
bootstrap(RedditApp);
注意：我意思刚刚接触这个实例，和angular1.x的模块化加载是有点不同的，在实验的时候，我这个上面的几个@Component和class的顺序不是按照上面来的，结果不是报错，就是两个，只出来一个，我是无语了，只有慢慢学习，慢慢来知其所以然啦！
同一目录下的
<!doctype html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css"
href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script>
System.config({
packages:{
app:{
format:'register',
defaultExtension:'js'
}
}
});
System.import('app.js')
.then(null,console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 Simple Reddit
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<reddit></reddit> <!-- <--- Our app loads here! -->
</div>
</body>
</html>`这里写代码片`