入门体验
还是接着上一篇的，是一个例子，吧所有的更能都给完成，
废话不多收，先还是看一下样例的图片：
代码实例
app.ts:
import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";
//import {NgFor} from "angular2/common";
//@Component({
// selector: 'hello-world',
// template: `
// <ul>
// <li *ngFor="#name of names">hello {{name}}</li>
// </ul>
// `
//})
//class HelloWorld {
// names:string[];
// constructor(){
// this.names = ['tianjun2012','tianjun2013','tianjun2014'];
// }
//}
//
//bootstrap(HelloWorld);
class Article{
title:string;
link:string;
votes:number;
constructor(title:string,link:string,votes?:number){
this.title=title;
this.link=link;
this.votes= votes || 0;
}
voteUp():void{
this.votes += 1;
}
voteDown():void{
this.votes -= 1;
}
domain():string{
try{
const link:string = this.link.split('//')[1];
return link.split('/')[0];
}catch(err){
return null;
}
}
}
@Component({
selector:'reddit-article',inputs:['article'],host:{
class:'row'
},template:`
<div class="four wide column center aligned votes">
<div class="ui statistic">
<div class="value">{{article.votes}}</div>
<div class="label">Points</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{article.link}}">{{article.title}}</a>
<div class="Meta">({{article.domain()}})</div>
<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{
article:Article;
voteUp():boolean{
this.article.voteUp();
return false;
}
voteDown():boolean{
this.article.voteDown();
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
*ngFor = "#article of sortedArticles()" [article]="article"></reddit-article>
</div>
`
})
class RedditApp{
articles:Article[];
constructor(){
this.articles=[
new Article('argular 2','http://angular.io',3),new Article('tianjun2012','http://www.baidu.com',4),new Article('tianjun2050','http://www.google.com',10)
];
}
addArticle(title:HTMLInputElement,link:HTMLInputElement):void{
console.log(`Adding article title:${title.value} and link:${link.value}`);
this.articles.push(new Article(title.value,link.value,0));
title.value='';
link.value='';
}
sortedArticles():Article[]{
return this.articles.sort((a:Article,b:Article) => b.votes - a.votes);
}
}
bootstrap(RedditApp);
index.html:
<!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>
