第二回我們接著要了解 AngularJS 的入門指令，Code 的作用。例如：

1、新增宣告語法 ng-app ：

宣告應用程式作用域（Application Scope），在 Document Object Model（DOM）載入後，AngularJS 就會開始尋找 ng-app 這個字，找到的話，就會把這頁面當成是 AngularJS 應用程式。

（1）宣告方式：一份 HTML 只能宣告一個應用程式作用域（ng-app）

＜html ng-app＞

＜html ng-app="appName"＞

（2）ng-app 用法：

• 全站使用 AngularJS ：放在 html（或 body）裡面。

  ＜html ng-app＞ ＜/html＞

  ＜body ng-app＞ ＜/body＞

• 局部使用 AngularJS ：可以把這個字放在某個應用到 AngularJS 的 div 中。

  ＜div ng-app="ng-app"＞＜/div＞

2、{{ }} 雙大括號綁定表達式：

這行代碼演示了 AngularJS 模板的核心功能：绑定。

＜p＞Nothing here {{'yet' + '!'}}＜/p＞

這個绑定由雙大括號 {{}} 和表達式 'yet' + '!' 组成。它告诉 AngularJS 需要運算其中的表達式並將结果插入 DOM 中，接下来我們可以看到 DOM 隨著表達式運算结果的改變而更新。

AngularJS 表達式 Angular Expression 是一種類似於 JavaScript 的代碼片段，AngularJS 表達式僅在 AngularJS 的作用域中運行，而不是在整個 DOM 中運行。

3、’$’字首命名規則：

作為一個 AngularJS 的內建服務，作用域方法和其他 AngularJS 的 API 都會在名稱前面加上一個’$’的字首。

為了避免衝突，在 Services 和 Models 的命名上最好避免有 ’$’ 的開頭。

4、ng-controller：

是 AngularJS 的語法，主要用來綁定 View（HTML）和 Model（JS）的連結，以建立 View 和 Model 的關係。其遵循 MVC（Model–View–Controller）框架，可以透過 Controller 來處理 Model 和 View 之間的綁定。若在 Controller 中進行修改，異動也會反應到 View 中，達到 AngularJS 的雙向資料綁定（Two Way Data-Binding）。

例如：（指定名稱為 " fun " 的 controller，必須與 controllers.js 裡的主 function 名稱相同。）

 ＜body ng-controller=" fun "＞ 

5、$scope：

是 AngularJS 在建立（Controller）應用程式時產生的一個物件，用來代表應用程式的 Model。所以我們透過 $scope. 變數，才能得到變數的（值）位址。

在 Model 裡面指定變數 name 的方式為 $scope.name ，View 再透過 {{name}} 顯示。我們在名稱為 fun 的 Controller 裡面，宣告一個名稱為 name 的變數，並將變數值指定為 “sunny”。

`function fun($scope)`
` {$scope.name = "sunny";}`

接著只要在 HTML 裡面指定 ng-controller 名稱，並輸入 {{name}} ，即可。

＜p ng-controller=" fun"＞My name is {{ name }}!＜/p＞

6、如何在 AngularJS 中使用 HTML input 事件：

• 事件 ／ 屬性
  • name ／ 名稱
  • ng-model ／ 綁定的資料
  • required ／ 限制是否必填
  • ng-required ／ 限制是否必填
  • ng-minlength ／ 限制最小長度
  • ng-maxlength ／ 限制最大長度
  • ng-pattern ／ 限制 RegExp 格式
  • ng-change／ 當 input 的值發生變化的時候執行

     

• Input 包含了以下類型
  • type="checkbox"
  • type="email"
  • type="number"
  • type="radio"
  • type="text"
  • type="url"

其中 checkbox 的使用方法？

1. ng-controller ，處理 Model 和 View 的雙向連結
2. ng-model ，綁定 checkbox 的資料和 value1 的值，一有變動，就會隨時更新。
3. 可以透過 ng-true-value 和 ng-false-value，修改 value2 的內容。

HTML：

＜form name="myForm" ng-controller="Ctrl"＞
　Value1: ＜input ng-model="value1" type="checkbox" /＞ 
　Value2: ＜input ng-model="value2" ng-true-value="YES" ng-false-value="NO" type="checkbox" /＞ 
　　＜tt＞value1 = {{value1}}＜/tt＞
　　＜tt＞value2 = {{value2}}＜/tt＞
＜/form＞

JS：

    function Ctrl($scope) {
        $scope.value1 = true;
        $scope.value2 = 'YES';
    }

7、指令的特性：

AngularJS 的 HTML 編譯器能讓瀏覽器識別新的 HTML 語法。它能讓你將行為關聯到 HTML 元素或者屬性上，甚至能讓你創造具有自定義行為的新元素。AngularJS 稱這種擴展行為為「指令」。

指令是指「當關連的 HTML 結構進入編譯階段時應該執行的操作」。指令可以寫在元素的名稱裡、屬性裡、CSS 類名裡和注釋裡。指令的特性非常有用，它擴展了 HTML 的表現能力，使用這個特性能夠以更少的代碼建立更簡潔的頁面結構。

• AngularJS 本身內建了一些指令，來看個例子，其使用了內建的 ng-repeat ，首先通過 ng-init 指令創建了一個 students 的對象數組，然後使用 ng-repeat 指令打印出所有學生的名字和年齡。

  ＜div ng-init="students = [        
  　　{name:'John', age:25, gender:'boy'},        
  　　{name:'Joy', age:15, gender:'girl'},        
  　　{name:'Mary', age:28, gender:'girl'},    
  　]"＞
  ＜div data-ng-repeat="student in students"＞
  　　＜h3＞{{student.name}}:{{student.age}}＜/h3＞
  　＜/div＞
  ＜/div＞
  

  另外，還可以使用 ng-show 過濾重複值，只顯示 boy：

  ＜div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"＞
  　＜h3＞{{student.name}}:{{student.age}}＜/h3＞
  ＜/div＞
  

  或者使用 ng-switch 做一些更複雜的控制，如：年滿 18 歲打印 ADULT。

  ＜div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'" data-ng-switch="student.age">18"＞
  　＜h3＞{{student.name}}:{{student.age}}＜/h3＞
  　＜p data-ng-switch-when="true"＞ADULT＜/p＞
  ＜/div＞
  

• 其特性為開發人員省了很多代碼，對定義 Web Page Structure 來說非常有幫助。而且除了本身自帶的 Directives 滿足大部分群眾的需要外，還支持定制 Directive 來滿足使用者的特別需求。

  除此之外，AngularJS 指令可以用來創建自定義的標籤，它們可以用來裝飾元素或者操作 DOM 屬性。以下是監聽一個事件並且針對更新它的 $scope 例子：

  myModule.directive('myComponent', function(mySharedService) {
      return {
          restrict: 'E',
          controller: function($scope, $attrs, mySharedService) {
              $scope.$on('handleBroadcast', function() {
                  $scope.message = 'Directive: ' + mySharedService.message;
              });
          },
          replace: true,
          template: '＜input＞'
      };
  });
  

  你可以使用這個自定義的 Directive ：

  ＜my-component ng-model="message"＞＜/my-component＞
  

  使用一系列的組件來創建自己的應用，將使你更方便的添加、刪除和更新功能。

8、指令的用途：

一種 DOM 物件的標記（可以是 HTML 屬性／標記名稱／CSS Class），ng 會透過一組 HTML 編譯器（$compile）將功能外掛上去。

• 常用指令
  • ng-app
  • ng-init
  • ng-bind
  • ng-non-bindable
  • ng-bind-html
  • ng-bind-template
  • ng-repeat
  • ng-list
  • ng-controller

     

• 事件處理
  • ng-blur
  • ng-focus
  • ng-copy
  • ng-paste
  • ng-cut
  • ng-change
  • ng-checked
  • ng-click
  • ng-dbclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup

     

• 外觀與樣式
  • ng-show
  • ng-hide
  • ng-style
  • ng-class
  • ng-class-even
  • ng-class-odd

     

• HTML 增強／表單
  • a
    • ng-href
  • select
    • ng-option
    • ng-selected
    • ng-multiple
  • ng-open（ details ／ summary ）
  • img
    • ng-src
    • ng-srcset
  • form
    • ng-form （允許巢狀表單）
    • ng-submit
  • input
    • ng-disabled
    • ng-readonly
  • input[email]
  • input[number]
  • input[text]
  • input[url]
  • input[checkbox] , input[radio]
    • ng-checked
    • ng-value

       

• 範本引擎
  • ng-include src
  • ng-script

     

• 其它
  • ng-if
  • ng-switch
  • ng-pluralize
  • ng-transclude
  • ng-csp

參考資料：

AngularJS 官網、

AngularJS 維基百科、

AngularJS 入門簡介、

Day1-Day30：入門AngularJS筆記與前端領域的學習筆記分享介紹

You may be interested in the following articles:

• AngularJS 簡介 - 2014-04-14