AngularJS學習筆記

時間  2019-11-08
標籤 angularjs 學習 筆記 欄目 AngularJS 简体版
原文   原文鏈接

AngularJS 簡介
學習網址：http://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 是一個 JavaScript 框架。它可經過 <script> 標籤添加到 HTML 頁面。php

AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。css

AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。html

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中：mysql

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>angularjs

注意：

根據實例本身總結：2015-12-17web

<div ng-app="" ng-init="num1=1; num2=5">ajax

<h2>價格計算器</h2>sql

數量: <input type="number" ng-model="num1">數據庫

價格: <input type="number" ng-model="num2">express

<p><b>總價:</b> {{num1* num2}}</p>

</div>

各特性使用說明：

1 ng-app="" 用來告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"

2 ng-init="num1=1; num2=5"，用來定義變量，設置初始值的
  ng-init="person={firstName:'John',lastName:'Doe'}"

3 ng-model="num1"，用來獲取變量，並顯示給控件

4 {{ }} 和 ng-bind 功能相同，都是用來綁定和顯示數據的

5 ng-repeat 用來循環數組的（寫法以下）

<li ng-repeat="x in names">

  {{x}}

</li>

6 ng-if=」$odd」是偶數行，ng-if=」$even」是奇數行

7 <td>{{ $index + 1 }}</td>這一句， $index 是索引，能夠方便使用。

 

 8 {{ lastName | lowercase }} 格式化數據用法

currency       格式化數字爲貨幣格式。

filter      從數組項中選擇一個子集。

lowercase     格式化字符串爲小寫。

orderBy 根據某個表達式排列數組。

uppercase    格式化字符串爲大寫。
9 filter過濾器，其實就是選擇器，也即where條件來使用。

用法1：filter:{name:’a’} 選擇name中包含a字符的名字

用法2：filter:’a’ 選擇name中包含a字符的名字

用法3：filter:checkName ,checkName就是定義的一個函數

        $scope.checkName=function(zifu){

       Return zifu==’KAI’; //選擇name=KAI的

           }

用法4：filter:{name:’KAI’}:true   //true即大小寫及內容均需徹底匹配,

                                                                 false不徹底匹配


10 式化字



 

AngularJS 擴展了 HTML

AngularJS 經過 ng-directives 擴展了 HTML。

ng-app 指令定義一個 AngularJS 應用程序。

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。

ng-bind 指令把應用程序數據綁定到 HTML 視圖。

AngularJS 實例

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>在輸入框中嘗試輸入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
演示：http://www.runoob.com/try/try.php?filename=try_ng_intro

實例講解：

當網頁加載完畢，AngularJS 自動開啓。

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。

ng-model 指令把輸入域的值綁定到應用程序變量 name。

ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。

 

 

什麼是 AngularJS？

AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。

AngularJS 把應用程序數據綁定到 HTML 元素。

AngularJS 能夠克隆和重複 HTML 元素。

AngularJS 能夠隱藏和顯示 HTML 元素。

AngularJS 能夠在 HTML 元素"背後"添加代碼。

AngularJS 支持輸入驗證。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 做爲前綴的 HTML 屬性。

ng-init 指令初始化 AngularJS 應用程序變量。

AngularJS 實例

<div ng-app="" ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
演示：http://www.runoob.com/try/try.php?filename=try_ng_intro_directives_html

 

AngularJS 表達式

AngularJS 表達式寫在雙大括號內：{{ expression }}。

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 實例

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>個人第一個表達式： {{ 5 + 5 }}</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>

AngularJS 應用

AngularJS 模塊（Module） 定義了 AngularJS 應用。

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。

ng-app指令定義了應用, 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', []);

//注意：$scope這個詞，不可用其餘代替
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
嘗試一下 »

AngularJS 模塊定義應用:

AngularJS 模塊

var app = angular.module('myApp', []);

AngularJS 控制器控制應用:

AngularJS 控制器

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

 

 

 

AngularJS 表達式
AngularJS 使用 表達式 把數據綁定到 HTML。

AngularJS 表達式

AngularJS 表達式寫在雙大括號內：{{ expression }}。

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 

AngularJS 數字

AngularJS 數字就像 JavaScript 數字：
AngularJS 實例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
嘗試一下 »

使用 ng-bind 的相同實例： {{quantity*cost}}=<span  ng-bind="quantity*cost"
注意：{{ }} 和 ng-bind 用法，效果相似，可達到相同效果

AngularJS 實例

<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： <span ng-bind="quantity * cost"></span></p>
</div>
嘗試一下 »

 

使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。

AngularJS 字符串

AngularJS 字符串就像 JavaScript 字符串：

AngularJS 實例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
嘗試一下 »

使用 ng-bind 的相同實例：

AngularJS 實例

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
嘗試一下 »

 

AngularJS 對象

AngularJS 對象就像 JavaScript 對象：

注意：對象的使用，2個變量之間用 ，號隔開； 而且變量賦值是用 ： 而不是 =

AngularJS 實例

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

<p>姓爲 {{ person.firstName+ person.lastName }}</p>

注意：想顯示2個變量的話，就能夠用 + 連接，本身測試能夠

</div>
嘗試一下 »

使用 ng-bind 的相同實例：

AngularJS 實例

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓爲 <span ng-bind="person.lastName"></span></p>
</div>
嘗試一下 »

 

AngularJS 數組

AngularJS 數組就像 JavaScript 數組：

AngularJS 實例

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值爲 {{ points[2] }}</p>
</div>
嘗試一下 »

使用 ng-bind 的相同實例：

注意：本身實例：

<!DOCTYPE html>

<html>

<body>

<div ng-app="" ng-init="arr=[12,26,55,87,59,17,28,35,29]">

      

{{arr[1]}}*{{arr[3]}}={{arr[1]*arr[3]}}<br />

      

{{arr[2]}}*{{arr[5]}}=<span ng-bind="arr[2]*arr[5]"></span>

      

</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>

</html>

 

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 表達式不支持條件判斷，循環及異常。

與 JavaScript 表達式不一樣，AngularJS 表達式支持過濾器。

 

 

AngularJS 指令

AngularJS 經過被稱爲 指令 的新屬性來擴展 HTML。

AngularJS 指令

AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。

ng-app 指令初始化一個 AngularJS 應用程序。

ng-init 指令初始化應用程序數據。

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。

AngularJS 實例

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

或者用：<span ng-bind="name"></span>
</div>
嘗試一下 »

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。

 

一個網頁能夠包含多個運行在不一樣元素中的 AngularJS 應用程序。

數據綁定

上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。

AngularJS 中的數據綁定，同步了 AngularJS 表達式與 AngularJS 數據。

{{ firstName }} 是經過 ng-model="firstName" 進行同步。

在下一個實例中，兩個文本域是經過兩個 ng-model 指令同步的：

AngularJS 實例

<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
嘗試一下 »

 

使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。

重複 HTML 元素

ng-repeat 指令會重複一個 HTML 元素：

AngularJS 實例

<div ng-app="" ng-init="name=['汪峯','周杰倫','周潤發','范冰冰','甄子丹']">

<ul>

    <li ng-repeat="x in name">

       {{x}}

    </li>

</ul> 

</div>
嘗試一下 »

ng-repeat 指令用在一個對象數組上：

AngularJS 實例

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象：</p>
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

注意：數組顯示值的調用寫法： {{ x.name + ', ' + x.country }}，相似JS便可
嘗試一下 »

 

AngularJS 完美支持數據庫的 CRUD（增長Create、讀取Read、更新Update、刪除Delete）應用程序。
把實例中的對象想象成數據庫中的記錄。

ng-app 指令

ng-app 指令定義了 AngularJS 應用程序的 根元素。

ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。

稍後您將學習到 ng-app 如何經過一個值（好比 ng-app="myModule"）鏈接到代碼模塊。

ng-init 指令

ng-init 指令爲 AngularJS 應用程序定義了 初始值。

一般狀況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。

稍後您將學習更多有關控制器和模塊的知識。

ng-model 指令

ng-model 指令 綁定 HTML 元素 到應用程序數據。

ng-model 指令也能夠：
爲應用程序數據提供類型驗證（number、email、required）。

爲應用程序數據提供狀態（invalid、dirty、touched、error）。

爲 HTML 元素提供 CSS 類。

綁定 HTML 元素到 HTML 表單。

ng-repeat 指令

ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。

 

 

 

AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 應用程序的數據。

 AngularJS 控制器是常規的 JavaScript 對象。

AngularJS 控制器

AngularJS 應用程序被控制器控制。

ng-controller 指令定義了應用程序控制器。

控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 建立。

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 應用程序由 ng-app 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用象(屬於應用變量和函數)。

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

控制器方法

上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。

控制器也能夠有方法（變量和函數）：

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}} 注意控制器中定義的方法，調用寫法，相似JS
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

嘗試一下 »

外部文件中的控制器

在大型的應用程序中，一般是把控制器存儲在外部文件中。

只須要把 <script> 標籤中的代碼複製到名爲 personController.js 的外部文件中便可：

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>

嘗試一下 »

其餘實例

如下實例建立一個新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

保存文件爲  namesController.js:

而後，在應用中使用控制器文件:

AngularJS 實例

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

注意：雖然是外部調用控制器，可是必定要注意控制器的名稱已經 數組名稱
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>
嘗試一下 »

 

 

 

 

AngularJS Filters

過濾器可使用一個管道字符（|）添加到表達式和指令中。

AngularJS 過濾器

AngularJS 過濾器可用於轉換數據：

過濾器

描述

currency

格式化數字爲貨幣格式。

filter

從數組項中選擇一個子集。

lowercase

格式化字符串爲小寫。

orderBy

根據某個表達式排列數組。

uppercase

格式化字符串爲大寫。

表達式中添加過濾器

過濾器能夠經過一個管道字符（|）和一個過濾器添加到表達式中。.

(（下面的兩個實例，咱們將使用前面章節中提到的 person 控制器）)

uppercase 過濾器將字符串格式化爲大寫：

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名爲 {{ lastName | uppercase }}</p>
</div>
嘗試一下 »

lowercase 過濾器將字符串格式化爲小寫：

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名爲 {{ lastName | lowercase }}</p>
</div>
嘗試一下 »

currency 過濾器

currency 過濾器將數字格式化爲貨幣格式：

AngularJS 實例

<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
嘗試一下 »
注意：<div ng-app="myApp" ng-controller="costCtrl">
這裏的 constCtrl 名稱能夠自定義。

向指令添加過濾器

過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中。

orderBy 過濾器根據表達式排列數組：

AngularJS 實例

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
<div>
嘗試一下 »

過濾輸入

輸入過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。

filter 過濾器從數組中選擇一個子集：

AngularJS 實例

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>
注意：filter過濾器，其實就是選擇器，也即where條件來使用。

用法1：filter:{name:’a’} 選擇name中包含a字符的名字
用法2：filter:’a’ 選擇name中包含a字符的名字
用法3：filter:checkName ,checkName就是定義的一個函數

        $scope.checkName=function(zifu){

       Return zifu==’KAI’; //選擇name=KAI的
        }
用法4：filter:{name:’KAI’}:true //true即大小寫及內容均需徹底匹配,
                                false不徹底匹配

 嘗試一下 »

 

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。

讀取 JSON 文件

如下是存儲在web服務器上的 JSON 文件：

http://www.runoob.com/try/angularjs/data/Customers_JSON.php

{
"records":
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

 

AngularJS $http

AngularJS $http 是一個用於讀取web服務器上數據的服務。

$http.get(url) 是用於讀取服務器數據的函數。

AngularJS 實例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response.records;});
});

注意：{$scope.names = response.records;}); 這一句是用於把上面聲明的
json數組 recores獲取到以後，賦值給當前循環使用的 names數組了
<li ng-repeat="x in names">

</script>   嘗試一下 »

應用解析:

注意：以上代碼的 get 請求是本站的服務器，你不能直接拷貝到你本地運行，會存在跨域問題，解決辦法就是將 Customers_JSON.php 的數據拷貝到你本身的服務器上，附：PHP Ajax 跨域問題最佳解決方案。

AngularJS 應用經過 ng-app 定義。應用在 <div> 中執行。

ng-controller 指令設置了 controller 對象 名。

函數 customersController 是一個標準的 JavaScript 對象構造器。

控制器對象有一個屬性: $scope.names。

$http.get() 從web服務器上讀取靜態 JSON 數據。

服務器數據文件爲：  http://www.runoob.com/try/angularjs/data/Customers_JSON.php。

當從服務端載入 JSON 數據時，$scope.names 變爲一個數組。

 

 

 

AngularJS 表格

ng-repeat 指令能夠完美的顯示錶格。

 

在表格中顯示數據

使用 angular 顯示錶格是很是簡單的：

AngularJS 實例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
嘗試一下 »

使用 CSS 樣式

爲了讓頁面更加美觀，咱們能夠在頁面中使用CSS：

CSS 樣式

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
嘗試一下 »

使用 orderBy 過濾器

排序顯示，可使用 orderBy 過濾器: 

AngularJS 實例

<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
嘗試一下 »

使用 uppercase 過濾器

使用 uppercase 過濾器轉換爲大寫: 

AngularJS 實例

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>
嘗試一下 »

顯示序號 ($index)

表格顯示序號能夠在 <td> 中添加 $index: 

AngularJS 實例

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
注意：<td>{{ $index + 1 }}</td>這一句， $index 是索引，能夠方便使用。
嘗試一下 »

使用 $even 和 $odd

AngularJS 實例

<!DOCTYPE html>

<html>

<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

    <style type="text/css">

       table,tr,td{border-collapse: collapse;}

       td{border:1px solid #ff8000; padding:5px 10px;}

       .bg_one{ background:#CCC;} //能夠本身定義樣式

    </style>

<body>

 

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

<table>

 <tr ng-repeat="x in names">

     <td ng-if="$odd" class="bg_one">{{$index+1}}</td>

     <td ng-if="$even">{{$index+1}}</td>

     <td ng-if="$odd" class="bg_one">{{x.Name}}</td>

     <td ng-if="$even">{{x.Name}}</td>

     <td ng-if="$odd" class="bg_one">{{x.Country}}</td>

     <td ng-if="$even">{{x.Country}}</td>

    </tr>

注意：ng-if=」$odd」是偶數行，ng-if=」$even」是奇數行

</table>

</div>

    <script>

       var app=angular.module('myApp',[]);

       app.controller('myCtrl',function($scope,$http){

       $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function(result){$scope.names=result.records});

       });

    </script>

</body>

</html>
嘗試一下 »


AngularJS SQL

在前面章節中的代碼也能夠用於讀取數據庫中的數據。

使用 PHP 從 MySQL 中獲取數據

AngularJS 實例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
注意：$http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php") 這個.php文件裏面就只是定義了一個 json數組，而後獲取到，賦值而已
嘗試一下 »

ASP.NET 中執行 SQL 獲取數據

AngularJS 實例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")
    .success(function (response) {$scope.names = response.records;});
});
</script>
注意：$http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx") 這個.aspx文件裏面就只是定義了一個 json數組，而後獲取到，賦值而已
嘗試一下 »

服務端代碼

如下列出了列出了幾種服務端代碼類型：
1.使用 PHP 和 MySQL。返回 JSON。

2.使用 PHP 和 MS Access。返回 JSON。

3.使用 ASP.NET, VB, 及 MS Access。 返回 JSON。

4.使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

跨域 HTTP 請求

若是你須要從不一樣的服務器（不一樣域名）上獲取數據就須要使用跨域 HTTP 請求。

跨域請求在網頁上很是常見。不少網頁從不一樣服務器上載入 CSS, 圖片，Js腳本等。

在現代瀏覽器中，爲了數據的安全，全部請求被嚴格限制在同一域名下，若是須要調用不一樣站點的數據，須要經過跨域來解決。

如下的 PHP 代碼運行使用的網站進行跨域訪問。

header("Access-Control-Allow-Origin: *");

更多跨域訪問解決方案可參閱：PHP Ajax 跨域問題最佳解決方案。

1. PHP 和 MySql 代碼實例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();

echo($outp);
?>

2. PHP 和 MS Access 代碼實例

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");
$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");

$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while (!$rs->EOF) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
    $rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';

$conn->close();

echo ($outp);
?>

3. ASP.NET, VB 和 MS Access 代碼實例

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name"    & c & ":" & c & x("CompanyName") & c & ","
outp = outp &       c & "City"    & c & ":" & c & x("City")        & c & "," 
outp = outp &       c & "Country" & c & ":" & c & x("Country")     & c & "}"
next

outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. ASP.NET, VB Razor 和 SQL Lite 代碼實例

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name"    + c + ":" + c + @row.CompanyName + c + ","
outp = outp +       c + "City"    + c + ":" + c + @row.City        + c + ","
outp = outp +       c + "Country" + c + ":" + c + @row.Country     + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp

 

 

 

AngularJS HTML DOM

AngularJS 爲 HTML DOM 元素的屬性提供了綁定應用數據的指令。

ng-disabled 指令

ng-disabled 指令直接綁定應用程序數據到 HTML 的 disabled 屬性。

AngularJS 實例

<div ng-app="">
<p>
<button ng-disabled="mySwitch">點我！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按鈕
</p>
</div>
嘗試一下 »

實例講解：

ng-disabled 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。

ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）。

若是 mySwitch 爲true, 按鈕將不可用: 

<p>
<button disabled>點我！</button>
</p>

若是 mySwitch 爲false, 按鈕則可用: 

<p>
<button>Click Me!</button>
</p>

ng-show 指令

ng-show 指令隱藏或顯示一個 HTML 元素。

AngularJS 實例

<div ng-app="">
<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>
</div>
嘗試一下 »

ng-show 指令根據 value 的值來顯示（隱藏）HTML 元素。

你可使用表達式來計算布爾值（ true 或 false）:

AngularJS 實例

<div ng-app="">
<p ng-show="hour > 12">我是可見的。</p>
</div>
嘗試一下 »

ng-hide 指令

ng-hide 指令用於隱藏或顯示 HTML 元素。

AngularJS 實例

<div ng-app="">
<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>
</div>
嘗試一下 »

 

 

AngularJS 事件

AngularJS 有本身的 HTML 事件指令。

ng-click 指令

ng-click 指令定義了 AngularJS 點擊事件。

AngularJS 實例

<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>
嘗試一下 »

隱藏 HTML 元素

ng-hide 指令用於設置應用部分是否可見。

ng-hide="true" 設置 HTML 元素不可見。

ng-hide="false" 設置 HTML 元素可見。

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隱藏/顯示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>
嘗試一下 »

應用解析:

第一部分 personController與控制器章節相似。

應用有一個默認屬性: $scope.myVar = false;

ng-hide 指令設置 <p>元素及兩個輸入域是否可見， 根據 myVar 的值 (true 或 false) 來設置是否可見。

toggle() 函數用於切換 myVar 變量的值（true 和 false）。

ng-hide="true" 讓元素 不可見。

顯示 HTML 元素

ng-show 指令可用於設置應用中的一部分是否可見 。

ng-show="false" 能夠設置 HTML 元素 不可見。

ng-show="true" 能夠以設置 HTML 元素可見。

如下實例使用了 ng-show 指令:

AngularJS 實例

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隱藏/顯示</button>
<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>
嘗試一下 »

 

 

AngularJS 模塊

模塊定義了一個應用程序。

模塊是應用程序中不一樣部分的容器。

模塊是應用控制器的容器。

控制器一般屬於一個模塊。

帶有控制器的模塊

應用("myApp") 帶有控制器 ("myCtrl"):

AngularJS 實例

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>
嘗試一下 »

模塊和控制器包含在 JS 文件中

一般 AngularJS 應用程序將模塊和控制器包含在 JavaScript 文件中。

在如下實例中， "myApp.js" 包含了應用模塊的定義程序， "myCtrl.js" 文件包含了控制器：

AngularJS 實例

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
嘗試一下 »

 

myApp.js

var app = angular.module("myApp", []);

 

 

在模塊定義中 [] 參數用於定義模塊的依賴關係。
中括號[]表示該模塊沒有依賴，若是有依賴的話會在中括號寫上依賴的模塊名字。

 

myCtrl.js

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

函數會影響到全局命名空間

JavaScript 中應避免使用全局函數。由於他們很容易被其餘腳本文件覆蓋。

AngularJS 模塊讓全部函數的做用域在該模塊下，避免了該問題。

何時載入庫?

 

在咱們的實例中，全部 AngularJS 庫都在 HTML 文檔的頭部載入。

對於 HTML 應用程序，一般建議把全部的腳本都放置在 <body> 元素的最底部。

這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。

在咱們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。

在咱們的實例中，AngularJS 在 <head> 元素中被加載，由於對 angular.module 的調用只能在庫加載完成後才能進行。

另外一個解決方案是在 <body> 元素中加載 AngularJS 庫，可是必須放置在您的 AngularJS 腳本前面：

AngularJS 實例

<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>
嘗試一下 »

 

 

 

AngularJS 表單

AngularJS 表單是輸入控件的集合。

HTML 控件

如下 HTML input 元素被稱爲 HTML 控件：
       input元素，select元素，button元素，textarea元素

HTML 表單

HTML 表單一般與 HTML 控件同時存在。

AngularJS 表單實例

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

應用程序代碼

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">重置</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
嘗試一下 »

 

novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證。

實例解析

ng-app 指令定義了 AngularJS 應用。

ng-controller 指令定義了應用控制器。

ng-model 指令綁定了兩個 input 元素到模型的 user 對象。

formCtrl 函數設置了 master 對象的初始值，並定義了 reset() 方法。

reset() 方法設置了 user 對象等於 master 對象。

ng-click 指令調用了 reset() 方法，且在點擊按鈕時調用。

novalidate 屬性在應用中不是必須的，可是你須要在 AngularJS 表單中使用，用於重寫標準的 HTML5 驗證。

 

 

 

AngularJS 輸入驗證

AngularJS 表單和控件能夠驗證輸入的數據。

輸入驗證

在前面的幾個章節中，你已經學到關於 AngularJS 表單和控件的知識。

AngularJS 表單和控件能夠提供驗證功能，並對用戶輸入的非法數據進行警告。

 

客戶端的驗證不能確保用戶輸入數據的安全，因此服務端的數據驗證也是必須的。

應用代碼

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>驗證明例：</h2>
<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>用戶名:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用戶名是必須的。</span>
  </span>
</p>

<p>郵箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
  <span ng-show="myForm.email.$error.email">非法的郵箱。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">

提交按鈕意思：用戶必須填寫，而且填寫不合法

             郵箱必須填寫，而且填寫不合法
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
嘗試一下 »

 

 

HTML 表單屬性 novalidate 用於禁用瀏覽器默認的驗證。

實例解析

AngularJS ng-model 指令用於綁定輸入元素到模型中。

模型對象有兩個屬性： user 和 email。

咱們使用了 ng-show指令， color:red 在郵件是 $dirty 或 $invalid 才顯示。

屬性

描述

$dirty

表單有填寫記錄

$valid

字段內容合法的

$invalid

字段內容是非法的

$pristine

表單沒有填寫記錄

 

 

 

AngularJS API

API 意爲 Application Programming Interface（應用程序編程接口）。

AngularJS 全局 API

AngularJS 全局 API 用於執行常見任務的 JavaScript 函數集合，如：

  • 比較對象
  • 迭代對象
  • 轉換對象

全局 API 函數使用 angular 對象進行訪問。

如下列出了一些通用的 API 函數：

API

描述

angular.lowercase()

轉換字符串爲小寫

angular.uppercase()

轉換字符串爲大寫

angular.isString()

判斷給定的對象是否爲字符串，若是是返回 true。

angular.isNumber()

判斷給定的對象是否爲數字，若是是返回 true。

angular.lowercase()

實例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
嘗試一下 »

angular.uppercase()

實例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "John";
$scope.x2 = angular.uppercase($scope.x1);
});
</script>
嘗試一下 »

angular.isString()

實例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isString($scope.x1);
});
</script>
嘗試一下 »

angular.isNumber()

實例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
嘗試一下 »

 

 

AngularJS 包含

在 AngularJS 中，你能夠在 HTML 中包含 HTML 文件。

在 HTML 中包含 HTML 文件

在 HTML 中，目前還不支持包含 HTML 文件的功能。

服務端包含

大多服務端腳本都支持包含文件功能 (SSI： Server Side Includes)。

使用 SSI, 你可在 HTML 中包含 HTML 文件，併發送到客戶端瀏覽器。

PHP 實例

<?php require("navigation.php"); ?>

客戶端包含

經過 JavaScript 有不少種方式能夠在 HTML 中包含 HTML 文件。

一般咱們使用 http 請求 (AJAX) 從服務端獲取數據，返回的數據咱們能夠經過 使用 innerHTML 寫入到 HTML 元素中。

AngularJS 包含

使用 AngularJS, 你可使用 ng-include 指令來包含 HTML 內容:

實例

<body>
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>

步驟以下：

步驟 1: 建立 HTML 列表

myUsers_List.html

<h3>Users</h3>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>
嘗試一下 »

步驟 2: 建立 HTML 表單

myUsers_Form.html

<button class="btn btn-success" ng-click="editUser('new')">
  <span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div> 
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
  <span class="glyphicon glyphicon-save"></span> Save Changes
</button>
嘗試一下 »

步驟 3: 建立控制器

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName; 
  }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
})

步驟 4: 建立主頁

myUsers.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>
</body>
</html>
嘗試一下 »

 

 

 

 

AngularJS 應用實例

您已經學習了足夠多關於 AngularJS 的知識，如今能夠開始建立您的第一個 AngularJS 應用程序：

個人筆記

 

保存 清除

剩餘字數: 91

 

應用程序講解

AngularJS 實例

<html ng-app="myNoteApp">
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>
<div ng-controller="myNoteCtrl">
<h2>個人筆記</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>
嘗試一下 »

應用程序文件 "myNoteApp.js":

var app = angular.module("myNoteApp", []);

控制器文件 "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});

<html> 元素是 AngularJS 應用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

<div> 是 HTML 頁面中控制器: ng-controller="myNoteCtrl" 的做用域:

<div ng-controller="myNoteCtrl">

ng-model 指令綁定了 <textarea> 到控制器變量 message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

兩個 ng-click 事件調用了控制器函數 clear() 和 save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bind 指令綁定控制器函數 left() 到<span> ，用於顯示剩餘字符:

Number of characters left: <span ng-bind="left()"></span>

應用庫文件須要在 AngularJs 加載後才能執行：

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

AngularJS 應用架構

以上實例是一個完整的 AngularJS 單頁Web應用（single page web application，SPA）。

<html> 元素包含了 AngularJS 應用 (ng-app=)。

<div> 元素定義了 AngularJS 控制器的做用域 (ng-controller=)。

在一個應用能夠由不少控制器。

應用文件(my...App.js) 定義了應用模型代碼。

一個或多個控制器文件 (my...Ctrl.js) 定義了控制器代碼。

總結 - 它是如何工做的呢？

ng-app 指令位於應用的根元素下。

對於單頁Web應用（single page web application，SPA），應用的根一般爲 <html> 元素。

一個或多個 ng-controller 指令定義了應用的控制器。每一個控制器有他本身的做用域：: 定義的 HTML 元素。

AngularJS 在 HTML DOMContentLoaded 事件中自動開始。若是找到 ng-app 指令 ， AngularJS 載入指令中的模塊，並將 ng-app 做爲應用的根進行編譯。

應用的根能夠是整個頁面，或者頁面的一小部分，若是是一小部分會更快編譯和執行。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程