Angular.js學習筆記（1）

時間  2019-12-01
標籤 angular.js angular 學習 筆記 欄目 AngularJS 简体版
原文   原文鏈接

## Angular學習筆記（1）html

## AngularJS 表達式jquery

1. AngularJS 表達式寫在雙大括號內：{{ expression }}。
2. AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。
3. AngularJS 將在表達式書寫的位置"輸出"數據。
4. AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。
5. ng-init不經常使用，後面初始化數據都是放在控制器中express

## AngularJS 數字bootstrap

<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
//兩種方式
<p>總價： <span ng-bind="quantity * cost"></span></p>
</div>

## AngularJS 字符串數組

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>姓名： {{ firstName + " " + lastName }}</p>
//兩種方式
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

## AngularJS 對象瀏覽器

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓爲 {{ person.lastName }}</p>
<p>姓爲 <span ng-bind="person.lastName"></span></p>

</div>

AngularJS 數組安全

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三個值爲 {{ points[2] }}</p>
<p>第三個值爲 <span ng-bind="points[2]"></span></p>

</div>

## AngularJS 表達式 與 JavaScript 表達式服務器

  • - 相似於 JavaScript 表達式，AngularJS 表達式能夠包含字母，操做符，變量。
  • - 與 JavaScript 表達式不一樣，AngularJS 表達式能夠寫在 HTML 中。
  • - 與 JavaScript 表達式不一樣，AngularJS 表達式不支持條件判斷，循環及異常。
  • - 與 JavaScript 表達式不一樣，AngularJS 表達式支持過濾器。

## AngularJS 指令app

1. ng-app 指令
2. ng-app 指令定義了 AngularJS 應用程序的 根元素。
3. ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
4. ng-init 指令
5. ng-init 指令爲 AngularJS 應用程序定義了 初始值。
6. 一般狀況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
7. ng-model 指令
8. ng-model 指令 綁定 HTML 元素 到應用程序數據。iphone

ng-model指令也能夠：爲應用程序數據提供類型驗證（number、email、required）。爲應用程序數據提供狀態（invalid、dirty、touched、error）。爲HTML 元素提供 CSS 類。 綁定 HTML 元素到 HTML 表單。ng-model 指令能夠將輸入域的值與 AngularJS 建立的變量綁定。 

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

名字: <input ng-model="name">
</div>

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

 雙向綁定，在修改輸入域的值時， AngularJS 屬性的值也將修改：

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你輸入了: {{name}}</h1>
</div>
驗證用戶輸入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>

ng-model 指令能夠爲應用數據提供狀態值(invalid, dirty, touched, error):

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required></p>
<h1>狀態</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>

> ng-model 指令基於它們的狀態爲 HTML 元素提供了 CSS 類：

<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
輸入你的名字:
<input name="myAddress" ng-model="text" required>
</form>

> ng-model 指令根據表單域的狀態添加/移除如下類： ng-empty ng-not-empty ng-touched
> ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine

1. ng-repeat 指令

ng-repeat 指令對於集合中（數組中）的每一個項會 克隆一次 HTML 元素。 建立自定義的指令 你可使用 .directive
函數來添加自定義的指令。 要調用自定義指令，HTML 元素上須要添加自定義指令名。 使用駝峯法來命名一個指令，
 runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

 

你能夠經過如下方式來調用指令：

  • 元素名 <runoob-directive></runoob-directive>
  • 屬性 <div runoob-directive></div>
  • 類名 <div class="runoob-directive"></div>
  • 註釋 <!-- directive: runoob-directive -->

限制使用

> 你能夠限制你的指令只能經過特定的方式來調用。 經過添加 restrict 屬性,並設置值爲 "A", 來設置指令只能經過屬性的方式來調用:

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

 

restrict 值能夠是如下幾種:

> E 做爲元素名使用 A 做爲屬性使用
> C 做爲類名使用 M 做爲註釋使用
> restrict 默認值爲 EA,
> 便可以經過元素名和屬性名來調用指令。

ng-disabled 指令

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

<div ng-app="" ng-init="mySwitch=true">

<button ng-disabled="mySwitch">點我!</button>

<input type="checkbox" ng-model="mySwitch">按鈕

{{ mySwitch }}
</div>

 

實例講解：

> ng-disabled 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。
> ng-model 指令綁定"mySwitch" 到 HTML input checkbox 元素的內容（value）。

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

<button disabled>點我！</button>
若是 mySwitch 爲false, 按鈕則可用: 
<button>點我!</button>

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

<p ng-show="true">我是可見的。</p>
<p ng-show="false">我是不可見的。</p>

ng-show 指令根據 value 的值來顯示（隱藏）HTML 元素。
你可使用表達式來計算布爾值（ true 或 false）:

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">我是可見的。</p>
</div>

ng-hide 指令

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

<p ng-hide="true">我是不可見的。</p>
<p ng-hide="false">我是可見的。</p>

指令 描述

  1. > ng-app 定義應用程序的根元素
  2. > ng-bind 綁定 HTML 元素到應用程序數據
  3. > ng-bind-html 綁定 HTML 元素的 innerHTML 到應用程序數據，並移除 HTML 字符串中危險字符
  4. > ng-bind-template 規定要使用模板替換的文本內容
  5. > ng-blur 規定 blur 事件的行爲
  6. > ng-change 規定在內容改變時要執行的表達式
  7. > ng-checked 規定元素是否被選中
  8. > ng-class 指定 HTML 元素使用的 CSS 類
  9. > ng-class-even 相似 ng-class，但只在偶數行起做用
  10. > ng-class-odd 相似 ng-class，但只在奇數行起做用
  11. > ng-click 定義元素被點擊時的行爲
  12. > ng-cloak 在應用正要加載時防止其閃爍
  13. > ng-controller 定義應用的控制器對象
  14. > ng-copy 規定拷貝事件的行爲 ng-csp
  15. > 修改內容的安全策略 ng-cut 規定剪切事件的行爲
  16. > ng-dblclick 規定雙擊事件的行爲
  17. > ng-disabled 規定一個元素是否被禁用
  18. > ng-focus 規定聚焦事件的行爲
  19. > ng-form 指定 HTML 表單繼承控制器表單
  20. > ng-hide 隱藏或顯示HTML 元素
  21. > ng-href 爲 the <a> 元素指定連接
  22. > ng-if 若是條件爲 false 移除HTML 元素
  23. > ng-include 在應用中包含 HTML 文件
  24. > ng-init 定義應用的初始化值
  25. > ng-jq定義應用必須使用到的庫，如：jQuery ng-keydown 規定按下按鍵事件的行爲
  26. > ng-keypress 規定按下按鍵事件的行爲
  27. > ng-keyup 規定鬆開按鍵事件的行爲
  28. > ng-list 將文本轉換爲列表 (數組)
  29. > ng-model 綁定 HTML 控制器的值到應用數據
  30. > ng-model-options 規定如何更新模型
  31. > ng-mousedown 規定按下鼠標按鍵時的行爲
  32. > ng-mouseenter規定鼠標指針穿過元素時的行爲
  33. > ng-mouseleave 規定鼠標指針離開元素時的行爲
  34. > ng-mousemove規定鼠標指針在指定的元素中移動時的行爲
  35. > ng-mouseover 規定鼠標指針位於元素上方時的行爲
  36. > ng-mouseup 規定當在元素上鬆開鼠標按鈕時的行爲
  37. > ng-non-bindable 規定元素或子元素不能綁定數據
  38. > ng-open 指定元素的 open 屬性
  39. > ng-options 在 <select> 列表中指定 <options>
  40. > ng-paste 規定粘貼事件的行爲
  41. > ng-pluralize根據本地化規則顯示信息
  42. > ng-readonly 指定元素的 readonly 屬性
  43. > ng-repeat 定義集合中每項數據的模板
  44. > ng-selected 指定元素的 selected 屬性
  45. > ng-show 顯示或隱藏 HTML 元素 ng-src 指定 <img>元素的 src 屬性
  46. > ng-srcset 指定 <img> 元素的 srcset 屬性
  47. > ng-style 指定元素的 style 屬性
  48. > ng-submit 規定 onsubmit 事件發生時執行的表達式
  49. > ng-switch 規定顯示或隱藏子元素的條件
  50. > ng-transclude 規定填充的目標位置
  51. > ng-value 規定 input 元素的值

## AngularJS 事件

AngularJS 支持如下事件:

> ng-click
> ng-dbl-click
> ng-mousedown
> ng-mouseenter
> ng-mouseleave
> ng-mousemove
> ng-keydown
> ng-keyup
> ng-keypress
> ng-change
> ng-click 指令
> ng-click 指令定義了

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 元素可見。

顯示 HTML 元素

> ng-show 指令可用於設置應用中的一部分是否可見 。
> ng-show="false" 能夠設置 HTML 元素 不可見。
> ng-show="true" 能夠以設置 HTML 元素可見。

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

<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>
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" 讓元素 不可見。

AngularJS 驗證屬性

> $dirty
> $invalid
> $error

`

AngularJS 全局 API / 轉換

> API 描述
> angular.lowercase() 將字符串轉換爲小寫
> angular.uppercase() 將字符串轉換爲大寫
> angular.copy() 數組或對象深度拷貝
> angular.forEach() 對象或數組的迭代函數

比較
API 描述

> angular.isArray() 若是引用的是數組返回 true
> angular.isDate() 若是引用的是日期返回 true
> angular.isDefined() 若是引用的已定義返回 true
> angular.isElement() 若是引用的是 DOM元素返回 true
> angular.isFunction() 若是引用的是函數返回 true
> angular.isNumber()若是引用的是數字返回 true
> angular.isObject() 若是引用的是對象返回 true
> angular.isString()若是引用的是字符串返回 true
> angular.isUndefined() 若是引用的未定義返回 true
> angular.equals() 若是兩個對象相等返回 true

JSON
API 描述

> angular.fromJson() 反序列化 JSON 字符串
> angular.toJson() 序列化 JSON 字符串

基礎
API 描述

> angular.bootstrap() 手動啓動 AngularJS
> angular.element() 包裹着一部分DOM element或者是HTML字符串，把它做爲一個jQuery元素來處理。
> angular.module() 建立，註冊或檢索 AngularJS 模塊

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

> ng-controller 指令定義了應用程序控制器。
> 控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數建立。

<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 這兩個屬性的控制器對象。

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

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

名: <input type="text" ng-model="firstName"><br> 姓: <input type="text"
ng-model="lastName"><br> <br> 姓名: {{fullName()}}

 </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 的外部文件中便可：

<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>

表達式中添加過濾器

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

uppercase 過濾器將字符串格式化爲大寫：
<p>姓名爲 {{ lastName | uppercase }}</p>

lowercase 過濾器將字符串格式化爲小寫：
<p>姓名爲 {{ lastName | lowercase }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>
currency 過濾器
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
currency 過濾器將數字格式化爲貨幣格式：
<p>總價 = {{ (quantity * price) | currency }}</p>

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

向指令添加過濾器

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

<ul>
orderBy 過濾器根據表達式排列數組：
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

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

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

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

<p><input type="text" ng-model="test"></p>

<ul>

filter 過濾器從數組中選擇一個子集：
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

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

自定義過濾器
如下實例自定義一個過濾器 reverse，將字符串反轉：

<div ng-app="myApp" ng-controller="myCtrl">
​
姓名: {{ msg | reverse }}
​
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //能夠注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
//運行結果：boonuR

 

過濾器相關
一、uppercase，lowercase 大小寫轉換

{{ "lower cap string" | uppercase }} // 結果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 結果：tank is good

二、date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

三、number 格式化（保留小數）

{{149016.1945000 | number:2}}

四、currency貨幣格式化

{{ 250 | currency }} // 結果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 結果：RMB ￥ 250.00

五、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 截取

{{"1234567890" | limitTo :6}} // 從前面開始截取6位
{{"1234567890" | limitTo:-4}} // 從後面開始截取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' }}

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>一、uppercase，lowercase 大小寫轉換</p>
{{ "lower cap string" | uppercase }}<br> 
{{ "TANK is GOOD" | lowercase }} 

<p>二、date 格式化</p>
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}

<p>三、number 格式化（保留小數）</p>
{{149016.1945000 | number:2}}

<p>四、currency貨幣格式化</p>
{{ 250 | currency }} <br>
{{ 250 | currency:"RMB ￥ " }}

<p>五、filter查找</p>
<p>查找name爲iphone的行</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} 

<p>六、limitTo 截取</p>
{{"1234567890" | limitTo :6}}<br>
{{"1234567890" | limitTo:-4}}

<p>七、orderBy 排序</p>
<p>根id降序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

<p>根據id升序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
</div>
</body>
</html>

## AngularJS 服務(Service)

什麼是服務？

> 在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。 AngularJS 內建了30 多個服務。

有個 $location 服務，它能夠返回當前頁面的 URL 地址。
實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="">
<p>一、uppercase，lowercase 大小寫轉換</p>
{{ "lower cap string" | uppercase }}<br> 
{{ "TANK is GOOD" | lowercase }} 

<p>二、date 格式化</p>
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}

<p>三、number 格式化（保留小數）</p>
{{149016.1945000 | number:2}}

<p>四、currency貨幣格式化</p>
{{ 250 | currency }} <br>
{{ 250 | currency:"RMB ￥ " }}

<p>五、filter查找</p>
<p>查找name爲iphone的行</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} 

<p>六、limitTo 截取</p>
{{"1234567890" | limitTo :6}}<br>
{{"1234567890" | limitTo:-4}}

<p>七、orderBy 排序</p>
<p>根id降序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

<p>根據id升序排</p>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
</div>
</body>
</html>

爲何使用服務?

> 在不少服務中，好比 $location 服務，它可使用 DOM 中存在的對象，相似 window.location 對象，但
> window.location 對象在 AngularJS 應用中有必定的侷限性。
>
> AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location
> 對象更好。

**$location **vs** window.location**
window.location//$location.service 目的 容許對當前瀏覽器位置進行讀寫操做 容許對當前瀏覽器位置進行讀寫操做
API 暴露一個能被讀寫的對象 暴露jquery風格的讀寫器
是否在AngularJS應用生命週期中和應用整合 否 可獲取到應用生命週期內的每個階段，而且和$watch整合
是否和HTML5 API的無縫整合 否 是（對低級瀏覽器優雅降級）
和應用的上下文是否相關 否，window.location.path返回"/docroot/actual/path" 是，$location.path()返回"/actual/path"

## $http 服務

$http 是 AngularJS 應用中最經常使用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。

實例
使用 $http 服務向服務器請求數據:

<p>歡迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

## $timeout 服務

AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
實例

<p>兩秒後顯示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 訪問在規定的毫秒數後執行指定函數。</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

 

## $interval 服務

AngularJS $interval 服務對應了 JS window.setInterval 函數。
實例

每一秒顯示信息
<p>如今時間是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 訪問在指定的週期(以毫秒計)來調用函數或計算表達式。</p>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

 

## 建立自定義服務

你能夠建立自定義服務，連接到你的模塊中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16進制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定義服務，用於轉換16進制數：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>
</body>
</html>

## AngularJS Select(選擇框)

使用 ng-options 建立選擇框
使用 ng-options指令，選擇的值是一個對象：當選擇值是一個對象時，咱們就能夠獲取更多信息，應用也更靈活。

在 AngularJS 中咱們可使用 ng-option 指令來建立一個下拉列表，列表項經過對象和數組循環輸出，以下實例:

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

**ng-options 使用對象有很大的不一樣，以下所示：**
實例

使用對象做爲數據源, x 爲鍵(key), y 爲值(value):
你選擇的值爲在 key-value 對中的 value。 value 在 key-value 對中也能夠是個對象：

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你選擇的值是: {{selectedSite}}</h1>

你選擇的值爲在 key-value 對中的 value。 value 在 key-value 對中也能夠是個對象：

實例
選擇的值在 key-value 對的 value 中, 這是它是一個對象:

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

在下拉菜單也能夠不使用 key-value 對中的 key , 直接使用對象的屬性：

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

咱們也可使用ng-repeat 指令來建立下拉列表：ng-repeat 有侷限性，選擇的值是一個字符串:
ng-repeat指令是經過數組來循環 HTML 代碼來建立下拉列表，
但 ng-options 指令更適合建立下拉列表，它有如下優點：
使用ng-options 的選項是一個對象， ng-repeat 是一個字符串。

<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p>該實例演示了使用 ng-repeat 指令來建立下拉列表。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程