前端之Angular2实战:理解Angular2

原文地址，这里

笔者有一阵子没关注Angular2，记得上次关注仍是alpha.36，如今已经变成了alpha.44，多了好多东西啊。譬如<div [x]="3" (y)="z()" />是啥意思呢？本篇文章便是对Angular2中的一些常见语法进行讲述。对于基本的Angular2的开发环境搭建，能够查看本博客的Angular2实战系列内容。

Component({  
  selector: 'app-main'
})
.View({
  template: `<h1>Hello</h1>`
})
.Class({
  constructor: function() {}
});

输入与输出

在Angular2中整个指令与整个逻辑之间的联系被大大简化，一个指令，如今更确切的叫法应该是组件，能够绑定到任何的对象而且能够触发整个逻辑能够监听到的事件。首先咱们暂时以template模块来解释基本的原理：

Component({  
  selector: 'app-main'
})
.View({
  template: `<h1>Hello</h1>`
})
.Class({
  constructor: function() {
    this.msg = 'world';
  }
});

` 符号容许咱们在JS中以多行方式撰写字符串

若是是在jQuery领域，应该如何将msg变量与div变量相关联，可能会采用以下的方式：

$('div').textContent = msg;

Angular2中也是采用很相似的方式，能够将某个变量绑定到div的内容上：

.View({
  template: `<div bind-text-content="msg"></div>`
})

更进一步的是，能够将其余属性也绑定：

.View({
  template: `
    <div 
      bind-text-content="msg" 
      bind-style.background="'red'">
    </div>
  `
})

事件

讨论过基本的绑定以后，咱们能够看看怎么在input域中绑定变化：

<div  
  bind-text-content="msg" 
  bind-style.background="color">
</div>  
<input on-keyup="color = $event.target.value" />

而若是须要实时查看变化，能够用相似于on-change：

on-change="changeColor()"

等等，这并非Angular2

说到这边，上边的用法并非Angular2推荐的一些语法，而是一些语法糖。可使用[text-content]来替代bind-text-content，用(keyup)来代替on-keyup。

<div [text-content]="msg" [style.background]="color"></div>  
<input (keyup)="color = $event.target.value" />

真正的组件

上文中说起的div已是一个很不错的组件的表明，而这边所要介绍的真正的组件跟它也是很是的相似。它能够接收一系列的属性而且触发一系列的事件。一样的，咱们能够把某个DOM节点映射到某个变量，譬如：

<div #my-div>Hello</div>  
<input (keyup)="myDiv.style.background = $event.target.value" />

这些是什么鬼？

咱们以一个简单地例子：

<template [ng-if]='true'>
  <span>Hello</span>
  <p>World</p>
</template>

Sidenote - 注入...

上述演示估摸着会失败，能够在这个playground中本身尝试下。由于独立的指令必需要导入而且注入到工程中，如下为例，咱们首先要在文件头部导入：

import { NgFor, NgIf } from 'angular2/angular2';

而后注入到@View的装饰器中：

directives: [NgFor, NgIf]

回归逻辑

<template [ng-if]='true'>
  <span>Hello</span>
  <p>World</p>
</template>

上面是演示了NgIf的用法，而对于NgRepeat(如今变成了NgFor)：

<template ng-for bind-ng-for-of='[1,2,3]'>
  <span>Hello</span>
  <p>World</p>
</template>

而若是要使用每次的迭代值：

<template ng-for  
          bind-ng-for-of='[1,2,3]' 
          var-v='$implicit' 
          var-i='index'>
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</template>

若是直接用语法糖的话，大概是这样：

<template ng-for  
          [ng-for-of]='[1,2,3]' 
          #v='$implicit' 
          #i='index'>
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</template>

不过这样看起来仍是很丑，因此不少时候咱们会将template包裹在一个根节点里面：

<div template="ng-for #v of [1,2,3]; #i=index">  
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</div>

固然，若是要进一步美化的话，那就变成了：

<div *ng-for="#v of [1,2,3]; #i=index">..  
  <span>Index: {{ i }}</span>
  <span>Value: {{ v }}</span>
</div>