{"action":"created","issue":{"url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/24","labels_url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/24/comments","events_url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/24/events","html_url":"https://github.com/kittencup/angular2-ama-cn/issues/24","id":127024756,"number":24,"title":"ng-book 2 翻译","user":{"login":"kittencup","id":2220385,"avatar_url":"https://avatars.githubusercontent.com/u/2220385?v=3","gravatar_id":"","url":"https://api.github.com/users/kittencup","html_url":"https://github.com/kittencup","followers_url":"https://api.github.com/users/kittencup/followers","following_url":"https://api.github.com/users/kittencup/following{/other_user}","gists_url":"https://api.github.com/users/kittencup/gists{/gist_id}","starred_url":"https://api.github.com/users/kittencup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kittencup/subscriptions","organizations_url":"https://api.github.com/users/kittencup/orgs","repos_url":"https://api.github.com/users/kittencup/repos","events_url":"https://api.github.com/users/kittencup/events{/privacy}","received_events_url":"https://api.github.com/users/kittencup/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/kittencup/angular2-ama-cn/labels/%E8%A7%A3%E7%AD%94%E4%B8%AD","name":"解答中","color":"fbca04"}],"state":"open","locked":true,"assignee":null,"milestone":null,"comments":12,"created_at":"2016-01-16T13:28:01Z","updated_at":"2016-01-17T12:14:10Z","closed_at":null,"body":"https://www.ng-book.com/2\r\n\r\n目录\r\n-----------\r\n-  编写你的第一个Angular2 Web应用\r\n  - [简单的Reddit克隆](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172212387)\r\n  - [快速入门](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172287664)\r\n  - [我们的第一个Typescript](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172293423)\r\n  - [运行应用](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172294197)\r\n  - [将数据添加到组件](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172298435)\r\n  - [使用数组](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172299561)\r\n  - [扩大我们的应用](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172300022)\r\n  - [渲染多行](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172317293)\r\n  - [添加新文章](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172317619)\r\n  - [收尾](https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172318178)\r\n  - [完整代码]\r\n  - [结束语]\r\n  - [寻求帮助]"},"comment":{"url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/comments/172318341","html_url":"https://github.com/kittencup/angular2-ama-cn/issues/24#issuecomment-172318341","issue_url":"https://api.github.com/repos/kittencup/angular2-ama-cn/issues/24","id":172318341,"user":{"login":"kittencup","id":2220385,"avatar_url":"https://avatars.githubusercontent.com/u/2220385?v=3","gravatar_id":"","url":"https://api.github.com/users/kittencup","html_url":"https://github.com/kittencup","followers_url":"https://api.github.com/users/kittencup/followers","following_url":"https://api.github.com/users/kittencup/following{/other_user}","gists_url":"https://api.github.com/users/kittencup/gists{/gist_id}","starred_url":"https://api.github.com/users/kittencup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kittencup/subscriptions","organizations_url":"https://api.github.com/users/kittencup/orgs","repos_url":"https://api.github.com/users/kittencup/repos","events_url":"https://api.github.com/users/kittencup/events{/privacy}","received_events_url":"https://api.github.com/users/kittencup/received_events","type":"User","site_admin":false},"created_at":"2016-01-17T12:14:10Z","updated_at":"2016-01-17T12:14:10Z","body":"完整的代码\r\n------------\r\n\r\n```javascript\r\nimport { bootstrap } from 'angular2/platform/browser';\r\nimport { Component } from 'angular2/core';\r\n\r\nclass Article {\r\n  title: string;\r\n  link: string;\r\n  votes: number;\r\n\r\n  constructor(title: string, link: string, votes?: number) {\r\n    this.title = title;\r\n    this.link = link;\r\n    this.votes = votes || 0;\r\n  }\r\n\r\n  domain(): string {\r\n    try {\r\n      const link: string = this.link.split('//')[1];\r\n      return link.split('/')[0];\r\n    } catch (err) {\r\n      return null;\r\n    }\r\n  }\r\n\r\n  voteUp(): void {\r\n    this.votes += 1;\r\n  }\r\n\r\n  voteDown(): void {\r\n    this.votes -= 1;\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'reddit-article',\r\n  inputs: ['article'],\r\n  host: {\r\n    class: 'row'\r\n  },\r\n  template: `\r\n    <div class=\"four wide column center aligned votes\">\r\n      <div class=\"ui statistic\">\r\n        <div class=\"value\">\r\n          {{ article.votes }}\r\n        </div>\r\n        <div class=\"label\">\r\n          Points\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"twelve wide column\">\r\n      <a class=\"ui large header\" href=\"{{ article.link }}\">\r\n        {{ article.title }}\r\n      </a>\r\n      <div class=\"meta\">({{ article.domain() }})</div>\r\n      <ul class=\"ui big horizontal list voters\">\r\n        <li class=\"item\">\r\n          <a href (click)=\"voteUp()\">\r\n            <i class=\"arrow up icon\"></i>\r\n              upvote \r\n            </a>\r\n        </li>\r\n        <li class=\"item\"> \r\n          <a href (click)=\"voteDown()\">\r\n            <i class=\"arrow down icon\"></i>\r\n            downvote\r\n          </a>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  `\r\n})\r\nclass ArticleComponent {\r\n  article: Article;\r\n\r\n  voteUp(): boolean {\r\n    this.article.voteUp();\r\n    return false;\r\n  }\r\n\r\n  voteDown(): boolean {\r\n    this.article.voteDown();\r\n    return false;\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'reddit',\r\n  directives: [ArticleComponent],\r\n  template: `\r\n    <form class=\"ui large form segment\">\r\n      <h3 class=\"ui header\">Add a Link</h3>\r\n\r\n      <div class=\"field\">\r\n        <label for=\"title\">Title:</label>\r\n        <input name=\"title\" #newtitle>\r\n      </div>\r\n      <div class=\"field\">\r\n        <label for=\"link\">Link:</label>\r\n        <input name=\"link\" #newlink>\r\n      </div>\r\n\r\n      <button (click)=\"addArticle(newtitle, newlink)\"\r\n              class=\"ui positive right floated button\">\r\n        Submit link\r\n      </button>\r\n    </form>\r\n\r\n    <div class=\"ui grid posts\">\r\n      <reddit-article\r\n        *ngFor=\"#article of sortedArticles()\"\r\n        [article]=\"article\">\r\n      </reddit-article>\r\n    </div>\r\n  `\r\n})\r\nclass RedditApp {\r\n  articles: Article[];\r\n\r\n  constructor() {\r\n    this.articles = [\r\n      new Article('Angular 2', 'http://angular.io', 3),\r\n      new Article('Fullstack', 'http://fullstack.io', 2),\r\n      new Article('Angular Homepage', 'http://angular.io', 1),\r\n    ];\r\n  }\r\n\r\n  addArticle(title: HTMLInputElement, link: HTMLInputElement): void {\r\n    console.log(`Adding article title: ${title.value} and link: ${link.value}`);\r\n    this.articles.push(new Article(title.value, link.value, 0));\r\n    title.value = '';\r\n    link.value = '';\r\n  }\r\n\r\n  sortedArticles(): Article[] {\r\n    return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);\r\n  }\r\n\r\n}\r\n\r\nbootstrap(RedditApp);\r\n\r\n```"}}