angularjs2入门实例（2）_<article-component :article={}>-优快云博客

本文介绍了一个使用Angular2实现的简易Reddit应用示例。该应用包括文章提交、投票及排序功能，并通过组件化的方式实现了视图与数据的绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

入门体验

还是接着上一篇的，是一个例子，吧所有的更能都给完成，
废话不多收，先还是看一下样例的图片：
这里写图片描述

代码实例

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>