angularjs2入门实例(2)

入门体验

还是接着上一篇的,是一个例子,吧所有的更能都给完成,
废话不多收,先还是看一下样例的图片:
angularjs2入门实例(2)_第1张图片

代码实例

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>

你可能感兴趣的:(AngularJS,Angular)