前端之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>