Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 本網站預計持續維運至 2021年底,網站內容基本上不會再更動。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
Tech Column AngularJS 指令

AngularJS 指令

第二回我們接著要了解 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-valueng-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:




OSSF Newsletter : 第 240 期 AngularJS - 指令

Category: Tech Column