编写你的第一个 Angular2 Web 应用

渲染多行

现在我们在这个页面只有一篇文章，没有办法渲染更多文章，除非我们创建新的<reddit-article>标签，即使我们这样做，所有的文章将会有相同的内容。

创建Article类

一个较好的做法是，当编写Angular2代码时试图从你的组件代码中独立出你的数据结构，为了实现这点，做任何进一步的更改组件之前，让我们创建将代表文章的数据结构，在ArticleComponent组件代码前添加下面代码

class Article {
  title: string;
  link: string;
  votes: number;
  constructor(title, link) {
    this.title = title;
    this.link = link;
    this.votes = 0;
  } 
}

在这里我们创建一个表示Artcile的类，注意这只是一个普通的类，并不是一个组件，在MVC模式中它属于model

每篇文章有一个title，link和一个总的votes，当我们创建一个新的文章时，我们需要title和link,我们还假设默认的votes是0

现在在ArticleComponent代码中使用我们新的Article类，而不是直接在ArticleComponent组件存储的article的内容，

class ArticleComponent { 
  article: Article;
  constructor() {
    this.article = new Article('Angular 2', 'http://angular.io', 10);
  }
  voteUp(): boolean { 
    this.article.votes += 1; 
    return false;
  }
  voteDown(): boolean { 
    this.article.votes -= 1; 
    return false;
  }
}

注意：现在在组件上已经不直接保存我们的title,link和votes，而是保存一个article的引用

当涉及到voteUp(和voteDown),我们不该增减组件上得vote属性，而是应该增减article上得vote属性

这个重构带来了另一个变化：我们需要更新我们的视图，从正确的位置获得模板变量。为了做到这一点，我们需要改变我们的模板标签。也就是说，在之前使用{{votes}}，我们需要将其更改为{{article.votes}}：

template: `

`

如果你重新加载浏览器，你会看到和前面一样的显示效果。

这是不错的，但在我们的代码的东西仍然是一个小问题：在我们的组件中我们的voteUp/voteDown方法会直接修改article内部的属性

问题是，我们的ArticleComponent组件知道太多关于Article类的内部。为了解决这个问题，让我们为Article也添加相应方法,ArticleComponent也要做出相应修改：

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;
}

然后我们改变ArticleComponent来调用这些方法:

class ArticleComponent { 
  article: Article;
  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }
  voteDown(): boolean { 
    this.article.voteDown(); 
    return false;
  }
}

现在看看我们的ArticleComponent组件定义，代码很少，我们从组件中移除了一点逻辑到我们的model内，这里的对应MVC的指导方针是Fat Models, Skinny Controllers，我们的想法是，我们要把大部分的逻辑转移到我们的model中，使我们的组件尽可能地完成最少的工作。

当我们重新加载浏览器后，你会注意到所有的显示都是一样的，但我们现在有更清晰的代码。

存储多个文章

让我们写一个允许我们有多篇文章的代码。

改变RedditApp的属性，创建一个articles集合

class RedditApp {
  articles: Article[];
  constructor() {
    this.articles = [
      new Article('Angular 2', 'http://angular.io', 3),
      new Article('Fullstack', 'http://fullstack.io', 2),
      new Article('Angular Homepage', 'http://angular.io', 1),
]; }
addArticle(title: HTMLInputElement, link: HTMLInputElement): void {

注意我们RedditApp的这行

articles: Article[];

如果你不用TypeScript，Article[]你可能看起来是有点奇怪。这种模式就是泛型，它的概念出现在Java,这个想法是，该集合中元素的类型必须是Article，该数组是一个集合，将只持有文章类型的对象。

我们可以在构造函数设置this.articles这个列表：

constructor() {
  this.articles = [
    new Article('Angular 2', 'http://angular.io', 3),
    new Article('Fullstack', 'http://fullstack.io', 2),
    new Article('Angular Homepage', 'http://angular.io', 1),
  ];
}

配置ArticleComponent组件的inputs属性

现在,我们已经创建了一个article model,我们怎样才能将他们交给ArticleComponent组件用呢?

在这里，我们引入了一个新的组件属性称为inputs。我们可以配置组件的inputs属性，它会接收从父传递进来数据。

以前我们的ArticleComponent组件类定义成这样的：

class ArticleComponent {
  article: Article;
  constructor() {
    this.article = new Article('Angular 2', 'http://angular.io');
  }
}

这里的问题是，我们已经将特定文章硬编码在构造函数中，制作组件的要点不仅是封装，而且还具有可重用性。

我们真正喜欢做的是配置我们想要显示的文章。如果，例如，我们有两篇文章，文章1和文章2，我们希望能够通过article作为一个”参数”来传递给reddit-article组件：

Angular 允许我们这样做，通过使用Component的inputs选项

@Component({
  selector: 'reddit-article', 
  inputs: ['article'],
  // ... same
})
class ArticleComponent {
  article: Article; 
  //...

现在如果我们有一篇文章在变量myArticle里，我们可以在ArticleComponent的view里这样写

请注意这里的语法：把在input的名称放在[]内，像这样：[article]属性的值就是我们要传递给该input的内容

然后，这是很重要的，在ArticleComponent实例上的this.article将会被设置为myArticle,你可以认为myArticle作为参数传递到你的组件内

注意 inputs是一个数组，这是因为你可以指定一个组件有许多inputs。

所以我们ArticleComponent完整的代码看起来像这样:

@Component({
    selector: 'reddit-article',
    inputs: ['article'],
    host: {
        class: 'row'
    },
    template: `

`
})
class ArticleComponent {
    article:Article;

    voteUp():boolean {
        this.article.voteUp();
        return false;
    }

    voteDown():boolean {
        this.article.voteDown();
        return false;
    }
}

渲染文章列表

早些时候我们配置RedditApp来存储articles数组，现在来配置RedditApp来渲染所有的文章。要做到不只有一个<reddit-article>标签的话，将使用ngFor指令来遍历文章列表，并为每一篇文章渲染一个reddit-article

添加这些到RedditApp @Component的template内的</form>后，

Submit link

还记得我们在前面章节使用ngFor指令来渲染name列表吗？ 嗯，这也适用于渲染多个组件。

*ngFor=”#article of articles”语法将通过迭代articles并创建局部article变量。

我们使用[inputName]=”inputValue”表达式来指定组件需要的article input.
在这里，我们可以通过ngFor，将局部变量article设置给组件的article input`

我意识到，我们在前面的代码段中多次使用到article变量。如果我们重命名ngFor创建的临时变量
名为foobar,你可能觉得更清楚。

在这里我们有3个变量

1. articles 是保存Articles的数组，定义在RedditApp组件里
2. foobar是articles中的每个元素，由NgFor定义
3. article是在ArticleComponent中定义的input字段名

基本上，NgFor产生一个临时变量foobar，然后我们传递它到reddit-article内

如果你现在重新加载你的浏览器，你可以看到所有文章将被渲染：

添加新文章

现在我们需要改变addArticle，为了当按下按钮时候添加一篇新的文章。改变后的addArticle方法如下

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 = '';
}

这将：

• 通过提交过来的title和value创建一个新的Article实例
• 将新的article添加到Articles中
• 清空input的值

我们如何清除input字段值?好吧,如果你还记得,title和link是HTMLInputElement对象。这意味着我们可以设置它们的属性。当我们改变属性值,input标签在我们页面上就更改了

如果你点击submit添加一篇新的article，你会在列表中看到这篇新加的文章

收尾

让我们添加一个功能，显示用户点击该链接当会被重定向到的域名

添加domain方法到Article类：

domain(): string { 
  try {
    const link: string = this.link.split('//')[1];
    return link.split('/')[0]; 
  } catch (err) {
      return null;
  }
}

将其添加到 ArticleComponent 模板里

现在当我们重新加载浏览器时，应该看到每个网址的域名。

基于评分的排序

如果你点击投票，你会发现有一些不太正确：我们的文章不按评分排序！我们绝对希望看到的最高评分的文章。

我们将文章存储在RedditApp的articles数组里，但数组是未排序的，最简单的方法是在RedditApp上创建一个新的方法sortedArticles

sortedArticles(): Article[] {
  return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
}

现在我们可以使用ngFor来遍历我们的sortedArticles() (而不是直接遍历articles)

完整的代码

import { bootstrap } from 'angular2/platform/browser';
import { Component } from 'angular2/core';

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;
  }

  domain(): string {
    try {
      const link: string = this.link.split('//')[1];
      return link.split('/')[0];
    } catch (err) {
      return null;
    }
  }

  voteUp(): void {
    this.votes += 1;
  }

  voteDown(): void {
    this.votes -= 1;
  }
}

@Component({
  selector: 'reddit-article',
  inputs: ['article'],
  host: {
    class: 'row'
  },
  template: `

  `
})
class ArticleComponent {
  article: Article;

  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }

  voteDown(): boolean {
    this.article.voteDown();
    return false;
  }
}

@Component({
  selector: 'reddit',
  directives: [ArticleComponent],
  template: `

  `
})
class RedditApp {
  articles: Article[];

  constructor() {
    this.articles = [
      new Article('Angular 2', 'http://angular.io', 3),
      new Article('Fullstack', 'http://fullstack.io', 2),
      new Article('Angular Homepage', 'http://angular.io', 1),
    ];
  }

  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);

结束语

我们成功了，我们创建了第一个Angular 2应用，我们在后面还会学习更多，理解数据流，使用ajax,组件的创建，路由，操纵DOM等。

但现在，请享受你的成功！大部分的Angular 2应用仅仅是象我们上面那样：

1.分解你得应用成为组件
2.创建视图
3.定义model
4.显示model
5.添加交互

寻求帮助

这一章你有什么麻烦吗？你有没有发现一个bug或者有不能运行的代码？我们很乐意听到您的声音！

• 快来加入我们的（免费！）社区和我们Gitter聊天室
• 直接发邮件给我们[email protected]