AngularJs與Angular 經常使用的指令寫法的區別;

一：angularjs指令

1.ng-bind

使用給定的變量或表達式的值來替換 HTML 元素的內容

<p ng-bind="{{text}}"></p>

2.ng-blur

HTML 元素在失去焦點時須要執行的函數（<a>, <input>, <select>, <textarea>支持）

<input ng-blur="pay()" />

3.ng-checked/ng-disabled

ng-checked設置複選框(checkbox)或單選按鈕(radio)的 checked 屬性
ng-disabled表達式返回 true 則表單字段將被禁用(<input>, <select>, 或 <textarea>)

<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>

//flag爲布爾類型

4.ng-class

給 HTML 元素動態綁定一個或多個 CSS 類。

//寫法一
<div ng-class="home"></div>

//寫法二
<div ng-class="{'red':flag,'green':'!flag'}"></div>
//flag爲true則添加red類名，false則添加green類名

5.ng-click

<button ng-click="addpay($event)">OK</button>
//$event爲當前元素的多種屬性

6.ng-repeat

<div ng-repeat="(index,item) in list"></div>
// 每項值：{{item}}
// 下標：{{index}}

• ng-app 定義應用程序的根元素。
• ng-bind 綁定 HTML 元素到應用程序數據
• ng-bind-html 綁定 HTML 元素的 innerHTML 到應用程序數據，並移除 HTML 字符串中危險字符
• ng-bind-template 規定要使用模板替換的文本內容
• ng-blur 規定 blur 事件的行爲
• ng-change 規定在內容改變時要執行的表達式
• ng-checked 規定元素是否被選中
• ng-class 指定 HTML 元素使用的 CSS 類
• ng-class-even 相似 ng-class，但只在偶數行起做用
• ng-class-odd 相似 ng-class，但只在奇數行起做用
• ng-click 定義元素被點擊時的行爲
• ng-cloak 在應用正要加載時防止其閃爍
• ng-controller 定義應用的控制器對象
• ng-copy 規定拷貝事件的行爲
• ng-csp 修改內容的安全策略
• ng-cut 規定剪切事件的行爲
• ng-dblclick 規定雙擊事件的行爲
• ng-disabled 規定一個元素是否被禁用
• ng-focus 規定聚焦事件的行爲
• ng-form 指定 HTML 表單繼承控制器表單
• ng-hide 隱藏或顯示 HTML 元素
• ng-href 爲 the <a> 元素指定連接
• ng-if 若是條件爲 false 移除 HTML 元素
• ng-include 在應用中包含 HTML 文件
• ng-init 定義應用的初始化值
• ng-jq 定義應用必須使用到的庫，如：jQuery
• ng-keydown 規定按下按鍵事件的行爲
• ng-keypress 規定按下按鍵事件的行爲
• ng-keyup 規定鬆開按鍵事件的行爲
• ng-list 將文本轉換爲列表 (數組)
• ng-model 綁定 HTML 控制器的值到應用數據
• ng-model-options 規定如何更新模型
• ng-mousedown 規定按下鼠標按鍵時的行爲
• ng-mouseenter 規定鼠標指針穿過元素時的行爲
• ng-mouseleave 規定鼠標指針離開元素時的行爲
• ng-mousemove 規定鼠標指針在指定的元素中移動時的行爲
• ng-mouseover 規定鼠標指針位於元素上方時的行爲
• ng-mouseup 規定當在元素上鬆開鼠標按鈕時的行爲
• ng-non-bindable 規定元素或子元素不能綁定數據
• ng-open 指定元素的 open 屬性
• ng-options 在 <select> 列表中指定 <options>
• ng-paste 規定粘貼事件的行爲
• ng-pluralize 根據本地化規則顯示信息
• ng-readonly 指定元素的 readonly 屬性
• ng-repeat 定義集合中每項數據的模板
• ng-selected 指定元素的 selected 屬性
• ng-show 顯示或隱藏 HTML 元素
• ng-src 指定 <img> 元素的 src 屬性
• ng-srcset 指定 <img> 元素的 srcset 屬性
• ng-style 指定元素的 style 屬性
• ng-submit 規定 onsubmit 事件發生時執行的表達式
• ng-switch 規定顯示或隱藏子元素的條件
• ng-transclude 規定填充的目標位置
• ng-value 規定 input 元素的值

詳情參考：http://www.runoob.com/angular...

二：angular指令

imageUrl 屬性：

<img [src]="imageUrl">

[disabled]當組件爲 isUnchanged( 未改變 ) 時禁用一個按鈕：

<button [disabled]="isUnchanged">按鈕是禁用的</button>

設置指令的屬性：

<div [ngClass]="classes">[ngClass]綁定到classes 屬性</div>

表格的colspan/rowspan

<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>

[(NgModel)]

<input [(ngModel)]="currentUser.firstName">

NgIf

<div *ngIf="currentUser">Hello,{{currentUser.firstName}}</div>

NgFor

<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</div>

（click）

<button type="submit" class="btn btn-primary" (click)="hide()">肯定</button>

[(checked)]

<input type="checkbox"  [(checked)]="checkflag">

• common

  NgClass
      NgComponentOutlet
      NgForOf
      NgIf
      NgPlural
      NgPluralCase
      NgStyle
      NgSwitch
      NgSwitchCase
      NgSwitchDefault
      NgTemplateOutlet

• forms

  CheckboxControlValueAccessor
      CheckboxRequiredValidator
      DefaultValueAccessor
      EmailValidator
      FormArrayName
      FormControlDirective
      FormControlName
      FormGroupDirective
      FormGroupName
      MaxLengthValidator
      MinLengthValidator
      NgControlStatus
      NgControlStatusGroup
      NgForm
      NgModel
      NgModelGroup
      NgSelectOption
      PatternValidator
      RadioControlValueAccessor
      RequiredValidator
      SelectControlValueAccessor
      SelectMultipleControlValueAccessor

• router

  RouterLink
      RouterLinkActive
      RouterLinkWithHref
      RouterOutlet

詳情參考：https://angular.io/api/