Angular JS 是一個JavaScript框架。他可以通過
<script>標簽添加到HTML頁面。他是通過指令擴展了HTML，且通過表達式綁定數據到HTML。本文主要講述表達式、指令和模型。
簡介
AngularJS 應用組成如下：
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
Angular JS 擴展 HTML
- 它通過ng-directives擴展。
- ng-app 指令定義了一個AngularJS應用程序。
- ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
- ng-bind 指令把應用程序數據綁定到 HTML 視圖。
指令
1. ng-app 指令
ng-app指令告訴AngularJS，該元素是angularJS 應用程序，該元素內的所有angularJS只能才能真正的執行，如果移除了ng-app指令，HTML將無法識別AngularJS指令和表達式。 ng-app是一個特殊的指令，一個HTML文檔只出現一次，如出現多次也只有第一個起作用，相當于id的作用；ng-app可以出現在html文檔的任何一個元素上。
2. ng-model 指令
ng-model指令把輸入域的值綁定到另一個應用程序，將輸入域輸入的值賦給另一個元素，是用于表單元素的，支持雙向綁定。對普通元素無效；。它還可以給應用程序數據提供類型驗證（number、email、required）和狀態（invalid、dirty、touched、error，也能為HTML提供CSS類。
ng-model 指令基于它們的狀態為 HTML 元素提供了 CSS 類
ng-invalid:未通過驗證的表單。
ng-valid:布爾型屬性，它指示表單是否通過驗證。如果表單當前通過驗證，他將為true。
ng-dirty:布爾值屬性，表示用戶是否修改了表單。如果為 ture，表示有修改過；false 表示修沒有修改過。
ng-touched:布爾值屬性，表示用戶是否和控件進行過交互。
ng-pristine:布爾值屬性，表示用戶是否修改了表單。如果為ture，表示沒有修改過；false表示修改過。
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
3. ng-bind 指令
ng-bind 指令能將數據綁定到AngularJS應用程序內HTML的任意角落，用于普通元素，不能用于表單元素，應用程序單向地渲染數據到元素。當ng-bind和{{}}同時使用時，ng-bind綁定的值覆蓋該元素的內容。
驗證用戶輸入
<!-- 提示信息會在 ng-show 屬性返回 true 的情況下顯示 -->
<form ng-app="" name="myForm">
數字:
<input type="number" name="myNum" ng-model="text">
<span ng-show="myForm.myNum.$number">不是一個合法的數字 </span>
</form>
4. ng-init 指令
ng-init 指令初始化一個AngularJS應用程序的變量，應用程序內可以通過ng-bind 指令或者 “{{ }}” 的方式來調用。通常情況下，可以通過控制器或者模塊來代替他。
5. ng-repeat 指令
ng-repeat 指令會重復一個 HTML 元素，主要用在數組。
例如：
<div ng-app="" ng-init="names=['g','u','o']">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
6. 自定義指令
Angular JS 除了上述等內置指令之外，我們還能自定義指令，指令的名稱我們可以自己命名，通過.directive函數來添加自定義的指令。需要注意的是在自定義的指令名中有大寫時需要在大寫字母前添加 - 來分割。
下面來寫幾個對照的例子：
- runoob-directive -> runoobDirective
- runoob-Directive -> runoobDirective
- runoobDirective無法識別
- 小寫字母 或 小寫字母+數字
- 調用自定義指令的方式有元素名、屬性、類名、注釋
限制使用
通過添加 restrict 屬性,并設置值為 "A", 來設置指令只能通過屬性的方式來調用。restrict 默認值為 EA, 即可以通過元素名和屬性名來調用指令。
restrict 值可以是以下幾種:
- E 作為元素名使用
- A 作為屬性使用
- C 作為類名使用
- M 作為注釋使用
下面寫一個實例：
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "E",
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
表達式
AngularJS 表達式的寫法為：“{{ message }}”。
AngularJS 表達式作用和ng-bind 指令相似，將數據綁定到HTML。
AngularJS 表達式可以包含文字、運算符和變量.
AngularJS 表達式不支持條件判斷，循環及異常。
AngularJS 表達式支持過濾器。
下面來一下如何定義不同的數據類型：
-
數字
<div ng-app="" ng-init= " a=2; b=5 "> <p>乘積： {{ a * b }}</p> <p>乘積： <span ng-bind= " a * b " ></span> </p> </div> -
字符串
<div ng-app="" ng-init="guo='郭';hh='豪豪'"> <p>姓名： {{ guo + " " + hh }}</p> <p>姓名： <span ng-bind="guo + ' ' + hh"></span></p> </div> -
數組
<!-- 數組內的元素不能重復 --> <div ng-app="" ng-init="arr=['2',3,'4',5,'6']"> <p>第二個值為 {{ arr[1] }}</p> <p>第二個值為 <span ng-bind="arr[1]"></span></p> </div> -
對象
<div ng-app="" ng-init="name={guo:'郭',hh:'豪豪'}"> <p>姓名： {{ name.guo +" "+ name.hh}}</p> <p>姓為 <span ng-bind="name.guo +' '+ name.hh"></span></p> </div>
應用
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
例如：
<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>
// AngularJS 模塊定義應用
var app = angular.module('myApp', []);
// AngularJS 控制器控制應用
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
作用域 Scope
概述
Scope 的主要作用是連接HTML（視圖）和控制器，Scope在AngularJS的應用組成中屬于 模型 ，scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{welcome}}</h1>
<button ng-click='sayHello()'>點我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Guohh";
$scope.sayHello = function() {
$scope.welcome = 'Welcome ' + $scope.name + '!';
};
});
</script>
根作用域
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個應用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用。
$rootScope 全局對象的屬性可在所有子作用域中訪問，子作用域互相無法訪問對方的私有變量，這一點與js的函數作用域完全一致。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{surname }} 姓家族成員:</h1>
<ul>
<li ng-repeat="n in names">{{surname }} {{n}} </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["hh", "hao", "haohao"];
$rootScope.surname = "Guo";
});
</script>
控制器 ng-Controller
AngularJS 控制器 控制 AngularJS 應用程序的數據；是常規的 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
外部文件中的控制器
相當于JavaScript外部js文件，引用方法如下：
<script src="namesController.js"></script>
過濾器
過濾器可以理解為：自己封裝的一個方法，用來對某個表達式或指令進行操作。
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
Angular JS 提供了幾個簡單的過濾器如下：
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數字為貨幣格式 |
| filter | 從數組項中選擇一個子集 |
| lowercase | 格式化字符串為小寫 |
| orderBy | 根據某個表達式排列數組 |
| uppercase | 格式化字符串為大寫 |
過濾輸入
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱。
<div ng-app="myApp" ng-controller="namesCtrl">
<p>輸入過濾:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="i in infos | filter:test | orderBy:'country'">
{{ (i.name | uppercase) + ', ' + i.country }}
</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.controller('namesCtrl',function ($scope){
$scope.infos=[
{'name':'HEGE ','country':'Denmark'},
{'name':'KAI ','country':'Norway '},
{'name':'JANI ','country':'Sweden '}
];
})
</script>
自定義過濾器
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ name | custom }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Guohh";
});
app.filter('custom', function() { //可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
其他過濾器的使用
- date 格式化
// 2017-03-22 13:52:25
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}
- number 格式化（保留小數）
{{149016.1945000 | number:2}}
- currency貨幣格式化
// 結果：$250.00
{{ 250 | currency }}
// 結果：RMB ￥ 250.00
{{ 250 | currency:"RMB ￥ " }}
- filter查找
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱。
filter 過濾器從數組中選擇一個子集
// 查找name為iphone的行
{{
[
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
| filter:{'name':'iphone'}
}}
- limitTo 截取
// 從前面開始截取6位
{{"1234567890" | limitTo :6}}
// 從后面開始截取4位
{{"1234567890" | limitTo:-4}}
- orderBy 排序
// 根id降序排
{{
[
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
| orderBy:'id':true
}}
// 根據id升序排
{{
[
{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
]
| orderBy:'id'
}}
服務
AngularJS 中你可以創建自己的服務，或使用內建服務。在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。AngularJS 內建了30 多個服務。
AngularJS 會一直監控應用，處理事件變化。
$http
$http 是 AngularJS 應用中最常用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("方法名").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout 服務
可用于設置單次或多次延時服務。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "I LOVE YOU !";
}, 2000);
});
$interval 服務
可用于設置始終運行的延時服務。
<div ng-app="myApp" ng-controller="myCtrl">
<p>現在時間是:</p>
<h1>{{theTime | date:"yyyy-MM-dd HH:mm:ss.sss"}}</h1>
</div>
<p>$interval 訪問在指定的周期(以毫秒計)來調用函數或計算表達式。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
</script>
$watch 服務
$watch服務持續監聽數據上的變化，更新界面。調用方法如下：
$scope.$watch('', function() { });
自定義服務
創建了自定義服務，并連接到應用上后，就可以在控制器，指令，過濾器或其他服務中使用它。如下實例代碼：octal 為服務名，func為該服務的方法名，我們就可以通過octal.func()來調用。
<div ng-app="myApp" ng-controller="myCtrl">
<p>20 的 8 進制是:</p>
<h1>{{oct}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('octal', function() {
this.func = function (x) {
return x.toString(8);
}
});
app.controller('myCtrl', function($scope, octal) {
$scope.oct = octal.func(20);
});
</script>
