一、入門體驗
最近由于項目的需要，本人花了一個禮拜的時間剛剛把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>`這裡寫代碼片`
![angular離線部署[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)