AngularJS?簡介+表達式+指令

AngularJS 簡介

AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數(shù)據(jù)到 HTML。

AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發(fā)布的，可通過 script 標簽添加到網(wǎng)頁中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
</script>

<small>建議把腳本放在 <body> 元素的底部。這會提高網(wǎng)頁加載速度，因為 HTML 加載不受制于腳本加載。

各個angular.js版本下載： https://github.com/angular/angular.js/releases</small>

AngularJS 擴展了 HTML

AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應(yīng)用程序。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。
AngularJS 實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body> 
    <div ng-app=""> 
      <p>名字 : <input type="text" ng-model="name"></p> 
      <h1>Hello {{name}}</h1>
    </div> 
  </body>
</html>

嘗試一下 ?
實例講解：
當(dāng)網(wǎng)頁加載完畢，AngularJS 自動開啟。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name。
ng-bind 指令把應(yīng)用程序變量 name 綁定到某個段落的 innerHTML。
<small>*
如果您移除了* ng-app 指令，HTML 將直接把表達式顯示出來，不會去計算表達式的結(jié)果。</small>

什么是 AngularJS？

AngularJS 使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易。

  • AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
  • AngularJS 可以克隆和重復(fù) HTML 元素。
  • AngularJS 可以隱藏和顯示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代碼。
  • AngularJS 支持輸入驗證。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應(yīng)用程序變量。
AngularJS 實例

<div ng-app="" ng-init="firstName='John'"> 
  <p>姓名為 <span ng-bind="firstName"></span></p> 
</div>

嘗試一下 ?
<small>*
HTML5 允許擴展的（自制的）屬性，以* data- 開頭。AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網(wǎng)頁對 HTML5 有效。</small>

帶有有效的 HTML5：
AngularJS 實例

<div data-ng-app="" data-ng-init="firstName='John'"> 
  <p>姓名為 <span data-ng-bind="firstName"></span></p> 
</div>

嘗試一下 ?

AngularJS 表達式

AngularJS 表達式寫在雙大括號內(nèi)：{{ expression }}。
AngularJS 表達式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 實例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
    </script> 
  </head>
  <body> 
    <div ng-app=""> 
      <p>我的第一個表達式： {{ 5 + 5 }}</p>
    </div> 
  </body>
</html>

嘗試一下 ?

AngularJS 應(yīng)用

AngularJS 模塊（Module） 定義了 AngularJS 應(yīng)用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應(yīng)用。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器。
AngularJS 實例

<div ng-app="myApp" ng-controller="myCtrl"> 

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>姓名: {{firstName + " " + lastName}} 
</div> 

<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});</script>

嘗試一下 ?

AngularJS 模塊定義應(yīng)用:

// AngularJS 模塊
var app = angular.module('myApp', []);

AngularJS 控制器控制應(yīng)用:

// AngularJS 控制器
app.controller('myCtrl', function($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe";
});

AngularJS 表達式

AngularJS 使用 表達式 把數(shù)據(jù)綁定到 HTML。

AngularJS 表達式

AngularJS 表達式寫在雙大括號內(nèi)：{{ expression }}。
AngularJS 表達式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

// AngularJS 實例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
    </script> 
  </head>
  <body> 
    <div ng-app=""> 
      <p>我的第一個表達式: {{ 5 + 5 }}</p>
    </div> 
  </body>
</html>

嘗試一下 ?

AngularJS 數(shù)字

AngularJS 數(shù)字就像 JavaScript 數(shù)字：

// AngularJS 實例
<div ng-app="" ng-init="quantity=1;cost=5"> 
  <p>總價： {{ quantity * cost }}</p> 
</div>

嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>

// AngularJS 實例
<div ng-app="" ng-init="quantity=1;cost=5"> 
  <p>總價： <span ng-bind="quantity * cost"></span></p> 
</div>

嘗試一下 ?
<small>*
使用 ng-init 不是很常見。您將在控制器一章中學(xué)習(xí)到一個更好的初始化數(shù)據(jù)的方式。*</small>

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

// AngularJS 實例
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> 
  <p>姓名： {{ firstName + " " + lastName }}</p> 
</div>

嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>

// AngularJS 實例
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> 
  <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p> 
</div>

嘗試一下 ?

AngularJS 對象

AngularJS 對象就像 JavaScript 對象：

// AngularJS 實例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> 
  <p>姓為 {{ person.lastName }}</p> 
</div>

嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>

// AngularJS 實例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> 
  <p>姓為 <span ng-bind="person.lastName"></span></p> 
</div>

嘗試一下 ?

AngularJS 數(shù)組

AngularJS 數(shù)組就像 JavaScript 數(shù)組：

// AngularJS 實例
<div ng-app="" ng-init="points=[1,15,19,2,40]"> 
  <p>第三個值為 {{ points[2] }}</p> 
</div>

嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>

// AngularJS 實例
<div ng-app="" ng-init="points=[1,15,19,2,40]"> 
  <p>第三個值為 <span ng-bind="points[2]"></span></p> 
</div>

嘗試一下 ?

AngularJS 表達式 與 JavaScript 表達式
  • 類似于 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
  • 與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
  • 與 JavaScript 表達式不同，AngularJS 表達式<strong>不支持條件判斷，循環(huán)及異常。</strong>
  • 與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。

AngularJS 指令

AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能。
AngularJS 允許你自定義指令。

AngularJS 指令

AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應(yīng)用程序。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
<small>完整的指令內(nèi)容可以參閱 AngularJS 參考手冊。</small>

// AngularJS 實例
<div ng-app="" ng-init="firstName='John'">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你輸入的為： {{ firstName }}</p>
</div>

嘗試一下 ?
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。
<small>*
一個網(wǎng)頁可以包含多個運行在不同元素中的 AngularJS 應(yīng)用程序。*</small>

數(shù)據(jù)綁定

上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數(shù)據(jù)綁定表達式。
AngularJS 中的數(shù)據(jù)綁定，同步了 AngularJS 表達式與 AngularJS 數(shù)據(jù)。
{{ firstName }} 是通過 ng-model="firstName" 進行同步。
在下一個實例中，兩個文本域是通過兩個 ng-model 指令同步的：

// AngularJS 實例
<div ng-app="" ng-init="quantity=1;price=5">
  <h2>價格計算器</h2>
  數(shù)量： <input type="number" ng-model="quantity">
  價格： <input type="number" ng-model="price">
  <p><b>總價：</b> {{ quantity * price }}</p>
</div>

嘗試一下 ?
<small>*
使用* ng-init 不是很常見。您將在控制器一章中學(xué)習(xí)到一個更好的初始化數(shù)據(jù)的方式。</small>

重復(fù) HTML 元素

ng-repeat 指令會重復(fù)一個 HTML 元素：

// AngularJS 實例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 來循環(huán)數(shù)組</p>
  <ul>
    <li ng-repeat="x in names">{{ x }}</li>
  </ul>
</div>

嘗試一下 ?
ng-repeat 指令用在一個對象數(shù)組上：

// AngularJS 實例
<div ng-app="" ng-init="names=[
  {name:'Jani',country:'Norway'},  
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}]">

  <p>循環(huán)對象：</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>
</div>

嘗試一下 ?
<small>*
AngularJS 完美支持數(shù)據(jù)庫的 CRUD（增加Create、讀取Read、更新Update、刪除Delete）應(yīng)用程序。把實例中的對象想象成數(shù)據(jù)庫中的記錄。*</small>

ng-app 指令

ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素。
ng-app 指令在網(wǎng)頁加載完畢時會自動引導(dǎo)（自動初始化）應(yīng)用程序。
稍后您將學(xué)習(xí)到 ng-app 如何通過一個值（比如 ng-app="myModule"）連接到代碼模塊。

ng-init 指令

ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識。

ng-model 指令

ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。
ng-model 指令也可以：

  • 為應(yīng)用程序數(shù)據(jù)提供類型驗證（number、email、required）。
  • 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty、touched、error）。
  • 為 HTML 元素提供 CSS 類。
  • 綁定 HTML 元素到 HTML 表單。
ng-repeat 指令

<small>ng-repeat 指令對于集合中（數(shù)組中）的每個項會 克隆一次 HTML 元素。</small>

創(chuàng)建自定義的指令

<small>除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
你可以使用 .directive 函數(shù)來添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:</small>

// AngularJS 實例
<body ng-app="myApp">

  <runoob-directive></runoob-directive>

  <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() { 
      return {        
        template : "<h1>自定義指令!</h1>"    
      };
    });
  </script>
</body>

嘗試一下 ?
<small>你可以通過以下方式來調(diào)用指令：

  • 元素名
  • 屬性
  • 類名
  • 注釋

以下實例方式也能輸出同樣結(jié)果:
</small>

元素名
<runoob-directive></runoob-directive>

嘗試一下 ?

屬性
<div runoob-directive></div>

嘗試一下 ?

類名
<div class="runoob-directive"></div>

嘗試一下 ?

注釋
<!-- directive: runoob-directive -->

嘗試一下 ?

限制使用

<small>你可以限制你的指令只能通過特定的方式來調(diào)用。
實例
通過添加 restrict 屬性,并設(shè)置值為 "A", 來設(shè)置指令只能通過屬性的方式來調(diào)用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {    
  return {        
    restrict : "A",        
    template : "<h1>自定義指令!</h1>"    
  };
});

嘗試一下 ?
restrict 值可以是以下幾種:

  • E 作為元素名使用
  • A 作為屬性使用
  • C 作為類名使用
  • M 作為注釋使用

restrict 默認值為 EA, 即可以通過元素名和屬性名來調(diào)用指令。</small>

指令執(zhí)行機制

Angularjs指令參考手冊

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容