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 表單。
創(chuàng)建自定義的指令
除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
你可以使用 .directive 函數(shù)來添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
你可以通過以下方式來調(diào)用指令：
元素名
屬性
類名
注釋
AngularJS 實例
<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>
注釋
限制使用
你可以限制你的指令只能通過特定的方式來調(diào)用。
實例
通過添加 restrict 屬性,并設(shè)置只值為 "A", 來設(shè)置指令只能通過屬性的方式來調(diào)用:
restrict 值可以是以下幾種:
E 作為元素名使用
A 作為屬性使用
C 作為類名使用
M 作為注釋使用
restrict 默認(rèn)值為 EA, 即可以通過元素名和屬性名來調(diào)用指令。
ng-model 指令可以將輸入域的值與 AngularJS 創(chuàng)建的變量綁定。
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>編輯郵箱地址，查看狀態(tài)的改變。</p>
<h1>狀態(tài)</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果輸入的值是合法的則為 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改變則為 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通過觸屏點擊則為 true)。</p>
</form>
編輯郵箱地址，查看狀態(tài)的改變。
狀態(tài)
Valid: true (如果輸入的值是合法的則為 true)。
Dirty: false (如果值改變則為 true)。
Touched: false (如果通過觸屏點擊則為 true)。
<style>
input.ng-invalid {
background-color: red;
}
</style>
</head>
<body>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myName" ng-model="myText" required>
</form>
<p>編輯文本域，不同狀態(tài)背景顏色會發(fā)送變化。</p>
<p>文本域添加了 required 屬性，該值是必須的，如果為空則是不合法的。</p>
</body>
</html>
ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下類：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
當(dāng)在控制器中添加 $scope 對象時，視圖 (HTML) 可以獲取了這些屬性。
視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{carname}}。
Scope 概述
AngularJS 應(yīng)用組成如下：
View(視圖), 即 HTML。
Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
Controller(控制器), 即 JavaScript 函數(shù)，可以添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
Scope 作用范圍
了解你當(dāng)前使用的 scope 是非常重要的。
在以上兩個實例中，只有一個作用域 scope，所以處理起來比較簡單，但在大型項目中， HTML DOM 中有多個作用域，這時你就需要知道你使用的 scope 對應(yīng)的作用域是哪一個。
根作用域
所有的應(yīng)用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整個應(yīng)用中。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值，可以在各個 controller 中使用。
AngularJS 控制器 控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對象。控制器是 JavaScript 對象，由標(biāo)準(zhǔn)的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建。
應(yīng)用解析：
AngularJS 應(yīng)用程序由 ng-app 定義。應(yīng)用程序在 <div> 內(nèi)運(yùn)行。
ng-controller="myCtrl"屬性是一個 AngularJS 指令。用于定義一個控制器。
myCtrl 函數(shù)是一個 JavaScript 函數(shù)。
AngularJS 使用$scope 對象來調(diào)用控制器。
在 AngularJS 中， $scope 是一個應(yīng)用對象(屬于應(yīng)用變量和函數(shù))。
控制器的 $scope （相當(dāng)于作用域、控制范圍）用來保存AngularJS Model(模型)的對象。
過濾器可以使用一個管道字符（|）添加到表達(dá)式和指令中。
AngularJS 過濾器
AngularJS 過濾器可用于轉(zhuǎn)換數(shù)據(jù)：
過濾器 描述
currency 格式化數(shù)字為貨幣格式。
filter 從數(shù)組項中選擇一個子集。
lowercase 格式化字符串為小寫。
orderBy 根據(jù)某個表達(dá)式排列數(shù)組。
uppercase 格式化字符串為大寫。
AngularJS 服務(wù)(Service)
AngularJS 中你可以創(chuàng)建自己的服務(wù)，或使用內(nèi)建服務(wù)。
什么是服務(wù)？
在 AngularJS 中，服務(wù)是一個函數(shù)或?qū)ο螅稍谀愕?AngularJS 應(yīng)用中使用。
AngularJS 內(nèi)建了30 多個服務(wù)。
有個 $location 服務(wù)，它可以返回當(dāng)前頁面的 URL 地址。
注意 $location 服務(wù)是作為一個參數(shù)傳遞到 controller 中。如果要使用它，需要在 controller 中定義。
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
為什么使用服務(wù)?
$http 是 AngularJS 應(yīng)用中最常用的服務(wù)。服務(wù)向服務(wù)器發(fā)送請求，應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)。
AngularJS 會一直監(jiān)控應(yīng)用，處理事件變化， AngularJS 使用 $location 服務(wù)比使用 window.location 對象更好。
$http 服務(wù)
$http 是 AngularJS 應(yīng)用中最常用的服務(wù)。 服務(wù)向服務(wù)器發(fā)送請求，應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)。
$timeout 服務(wù)
AngularJS $timeout 服務(wù)對應(yīng)了 JS window.setTimeout 函數(shù)。
$interval 服務(wù)
AngularJS $interval 服務(wù)對應(yīng)了 JS window.setInterval 函數(shù)。
創(chuàng)建自定義服務(wù)
你可以創(chuàng)建訪問自定義服務(wù)，鏈接到你的模塊中：
<p>自定義服務(wù)，用于轉(zhuǎn)換16進(jìn)制數(shù)：</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>
toString() 方法可把一個邏輯值轉(zhuǎn)換為字符串，并返回結(jié)果。
語法
booleanObject.toString()
返回值
根據(jù)原始布爾值或者 booleanObject 對象的值返回字符串 "true" 或 "false"。
拋出
如果調(diào)用該方法的對象不是 Boolean，則拋出異常 TypeError。
提示和注釋
注釋：在 Boolean 對象被用于字符串環(huán)境中時，此方法會被自動調(diào)用。
實例
在本例中，我們將創(chuàng)建一個 Boolean 對象，并把它轉(zhuǎn)換成字符串：
<script type="text/javascript">
var boo = new Boolean(true)
document.write(boo.toString())
</script>
輸出：
true
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。
AngularJS $http 是一個用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。
$http.get(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/sites.php")
.success(function (response) {$scope.names = response.sites;});
});
AngularJS Select(選擇框)
AngularJS 可以使用數(shù)組或?qū)ο髣?chuàng)建一個下拉列表選項。
使用 ng-options 創(chuàng)建選擇框
在 AngularJS 中我們可以使用 ng-option 指令來創(chuàng)建一個下拉列表，列表項通過對象和數(shù)組循環(huán)輸出。
ng-repeat 指令是通過數(shù)組來循環(huán) HTML 代碼來創(chuàng)建下拉列表，但 ng-options 指令更適合創(chuàng)建下拉列表，它有以下優(yōu)勢：
使用 ng-options 的選項的一個對象， ng-repeat 是一個字符串。
ng-repeat 有局限性，選擇的值是一個字符串:
使用 ng-options 指令，選擇的值是一個對象：
當(dāng)選擇值是一個對象時，我們就可以獲取更多信息，應(yīng)用也更靈活。
AngularJS 表格
使用 CSS 樣式 讓頁面更加美觀
使用 orderBy 過濾器 排序顯示
使用 uppercase 過濾器轉(zhuǎn)換為大寫:
顯示序號 ($index)
表格顯示序號可以在 <td> 中添加 $index:
使用 $even 和 $odd
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Name }}</td>
<td ng-if="$even">
{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">
{{ x.Country }}</td>
<td ng-if="$even">
{{ x.Country }}</td>
</tr>
</table>
AngularJS SQL
服務(wù)端代碼
以下列出了列出了幾種服務(wù)端代碼類型：
使用 PHP 和 MySQL。返回 JSON。
使用 PHP 和 MS Access。返回 JSON。
使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
跨域 HTTP 請求
如果你需要從不同的服務(wù)器（不同域名）上獲取數(shù)據(jù)就需要使用跨域 HTTP 請求。
跨域請求在網(wǎng)頁上非常常見。很多網(wǎng)頁從不同服務(wù)器上載入 CSS, 圖片，Js腳本等。
在現(xiàn)代瀏覽器中，為了數(shù)據(jù)的安全，所有請求被嚴(yán)格限制在同一域名下，如果需要調(diào)用不同站點的數(shù)據(jù)，需要通過跨域來解決。
以下的 PHP 代碼運(yùn)行使用的網(wǎng)站進(jìn)行跨域訪問。
header("Access-Control-Allow-Origin: *");
PHP Ajax 跨域問題最佳解決方案
分類 編程技術(shù)
本文通過設(shè)置Access-Control-Allow-Origin來實現(xiàn)跨域。
例如：客戶端的域名是client.runoob.com，而請求的域名是server.runoob.com。
如果直接使用ajax訪問，會有以下錯誤：
XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.runoob.com' is therefore not allowed access.
1、允許單個域名訪問
指定某域名（http://client.runoob.com）跨域訪問，則只需在http://server.runoob.com/server.php文件頭部添加如下代碼：
header('Access-Control-Allow-Origin:http://client.runoob.com');
2、允許多個域名訪問
指定多個域名（http://client1.runoob.com、http://client2.runoob.com等）跨域訪問，則只需在http://server.runoob.com/server.php文件頭部添加如下代碼：
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://client1.runoob.com',
'http://client2.runoob.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
3、允許所有域名訪問
允許所有域名訪問則只需在http://server.runoob.com/server.php文件頭部添加如下代碼：
header('Access-Control-Allow-Origin:*');
使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。
AngularJS HTML DOM
AngularJS 為 HTML DOM 元素的屬性提供了綁定應(yīng)用數(shù)據(jù)的指令。
ng-disabled 指令
ng-disabled 指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="!mySwitch">點我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按鈕
</p>
<p>
{{ mySwitch }}
</p>
</div>
AngularJS 事件
ng-disabled 指令綁定應(yīng)用程序數(shù)據(jù) "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內(nèi)容（value）。
如果 mySwitch 為false, 按鈕將不可用:
ng-show 指令
ng-show 指令隱藏或顯示一個 HTML 元素。
ng-show 指令根據(jù) value 的值來顯示（隱藏）HTML 元素。
你可以使用表達(dá)式來計算布爾值（ true 或 false）:
單獨寫一個值例如ng-show="1"也可以顯示
AngularJS 模塊
模塊定義了一個應(yīng)用程序。
模塊是應(yīng)用程序中不同部分的容器。
模塊是應(yīng)用控制器的容器。
控制器通常屬于一個模塊。
創(chuàng)建模塊
你可以通過 AngularJS 的 angular.module 函數(shù)來創(chuàng)建模塊：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 參數(shù)對應(yīng)執(zhí)行應(yīng)用的 HTML 元素。
現(xiàn)在你可以在 AngularJS 應(yīng)用中添加控制器，指令，過濾器等。
添加控制器
你可以使用 ng-controller 指令來添加應(yīng)用的控制器:
添加指令
AngularJS 提供了很多內(nèi)置的指令，你可以使用它們來為你的應(yīng)用添加功能
此外，你可以使用模塊來為你應(yīng)用添加自己的指令：
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click 指令定義了 AngularJS 點擊事件。
隱藏 HTML 元素
ng-hide 指令用于設(shè)置應(yīng)用部分是否可見。
ng-hide="true" 設(shè)置 HTML 元素不可見。
ng-hide="false" 設(shè)置 HTML 元素可見。
創(chuàng)建自定義的指令
除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
你可以使用 .directive 函數(shù)來添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
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>
在模塊定義中 [] 參數(shù)用于定義模塊的依賴關(guān)系。
中括號[]表示該模塊沒有依賴，如果有依賴的話會在中括號寫上依賴的模塊名字。
函數(shù)會影響到全局命名空間
JavaScript 中應(yīng)避免使用全局函數(shù)。因為他們很容易被其他腳本文件覆蓋。
AngularJS 模塊讓所有函數(shù)的作用域在該模塊下，避免了該問題。
對于 HTML 應(yīng)用程序，通常建議把所有的腳本都放置在 <body> 元素的最底部。
這會提高網(wǎng)頁加載速度，因為 HTML 加載不受制于腳本加載。
在我們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區(qū)域被加載。
AngularJS 在 <head> 元素中被加載，因為對 angular.module 的調(diào)用只能在庫加載完成后才能進(jìn)行。
另一個解決方案是在 <body> 元素中加載 AngularJS 庫，但是必須放置在您的 AngularJS 腳本前面：
AngularJS 表單
AngularJS 表單是輸入控件的集合。
HTML 控件
以下 HTML input 元素被稱為 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
HTML 表單
HTML 表單通常與 HTML 控件同時存在。
例子：
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:
<input type="text" ng-model="user.firstName">
Last Name:
<input type="text" ng-model="user.lastName">
<button ng-click="reset()">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>
實例解析
ng-app 指令定義了 AngularJS 應(yīng)用。
ng-controller 指令定義了應(yīng)用控制器。
ng-model 指令綁定了兩個 input 元素到模型的 user 對象。
formCtrl 函數(shù)設(shè)置了 master 對象的初始值，并定義了 reset() 方法。
reset() 方法設(shè)置了 user 對象等于 master 對象。
ng-click 指令調(diào)用了 reset() 方法，且在點擊按鈕時調(diào)用。
novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認(rèn)驗證。
novalidate 屬性在應(yīng)用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫標(biāo)準(zhǔn)的 HTML5 驗證。
AngularJS 輸入驗證
AngularJS 表單和控件可以驗證輸入的數(shù)據(jù)。
AngularJS 表單和控件可以提供驗證功能，并對用戶輸入的非法數(shù)據(jù)進(jìn)行警告。
客戶端的驗證不能確保用戶輸入數(shù)據(jù)的安全，所以服務(wù)端的數(shù)據(jù)驗證也是必須的。
$dirty 表單有填寫記錄
$valid 字段內(nèi)容合法的
$invalid 字段內(nèi)容是非法的
$pristine 表單沒有填寫記錄
AngularJS API
API 意為 Application Programming Interface（應(yīng)用程序編程接口）。
angular.isString($scope.abs) $scope.abs為字符串則返回true，否則返回false；
angular.isNumber($scope.abs) $scope.abs為數(shù)字則返回true，否則返回false；
AngularJS Bootstrap
AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。
Bootstrap
你可以在你的 AngularJS 應(yīng)用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代碼:
<link rel="stylesheet" >
如果站點在國內(nèi)，建議使用百度靜態(tài)資源庫的Bootstrap，代碼如下：
<link rel="stylesheet" >
Bootstrap 類解析
元素 Bootstrap 類 定義
<div> container 內(nèi)容容器
<table> table 表格
<table> table-striped 帶條紋背景的表格
<button> btn 按鈕
<button> btn-success 成功按鈕
<span> glyphicon 字形圖標(biāo)
<span> glyphicon-pencil 鉛筆圖標(biāo)
<span> glyphicon-user 用戶圖標(biāo)
<span> glyphicon-save 保存圖標(biāo)
<form> form-horizontal 水平表格
<div> form-group 表單組
<label> control-label 控制器標(biāo)簽
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列
AngularJS 包含
在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。
在 HTML 中包含 HTML 文件
在 HTML 中，目前還不支持包含 HTML 文件的功能。
服務(wù)端包含
大多服務(wù)端腳本都支持包含文件功能 (SSI： Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件，并發(fā)送到客戶端瀏覽器。
客戶端包含
通過 JavaScript 有很多種方式可以在 HTML 中包含 HTML 文件。
通常我們使用 http 請求 (AJAX) 從服務(wù)端獲取數(shù)據(jù)，返回的數(shù)據(jù)我們可以通過 使用 innerHTML 寫入到 HTML 元素中。
AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內(nèi)容:
AngularJS 動畫
AngularJS 提供了動畫效果，可以配合 CSS 使用。
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。
還需在應(yīng)用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
什么是動畫？
動畫是通過改變 HTML 元素產(chǎn)生的動態(tài)變化效果。
應(yīng)用中動畫不宜太多，但合適的使用動畫可以增加頁面的豐富性，也可以更易讓用戶理解。
如果我們應(yīng)用已經(jīng)設(shè)置了應(yīng)用名，可以把 ngAnimate 直接添加在模型中：
var app = angular.module('myApp', ['ngAnimate']);依賴注入
ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素產(chǎn)生動畫，但是 ngAnimate 會監(jiān)測事件，類似隱藏顯示 HTML 元素 ，如果事件發(fā)生 ngAnimate 就會使用預(yù)定義的 class 來設(shè)置 HTML 元素的動畫。
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令會在進(jìn)入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性。
當(dāng) HTML 元素位置改變時，ng-repeat 指令同樣可以添加 ng-move 類 。
此外， 在動畫完成后，HTML 元素的類集合將被移除。例如： ng-hide 指令會添加一下類：
ng-animate
ng-hide-animate
ng-hide-add (如果元素將被隱藏)
ng-hide-remove (如果元素將顯示)
ng-hide-add-active (如果元素將隱藏)
ng-hide-remove-active (如果元素將顯示)
使用 CSS 動畫
我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產(chǎn)生動畫效果，
AngularJS 依賴注入
什么是依賴注入
wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設(shè)計模式，在這種模式下，一個或更多的依賴（或服務(wù)）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然后成為了該客戶端狀態(tài)的一部分。
該模式分離了客戶端依賴本身行為的創(chuàng)建，這使得程序設(shè)計變得松耦合，并遵循了依賴反轉(zhuǎn)和單一職責(zé)原則。與服務(wù)定位器模式形成直接對比的是，它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴
一句話 --- 沒事你不要來找我，有事我會去找你。
AngularJS 提供很好的依賴注入機(jī)制。以下5個核心組件用來作為依賴注入：
value
factory
service
provider
constant
value
Value 是一個簡單的 javascript 對象，用于向控制器傳遞值（配置階段）：
// 創(chuàng)建 value 對象 "defaultInput" 并傳遞數(shù)據(jù)
mainApp.value("defaultInput", 5);// 將 "defaultInput" 注入到控制器
factory
factory 是一個函數(shù)用于返回值。在 service 和 controller 需要時創(chuàng)建。
通常我們使用 factory 函數(shù)來計算或返回值。
// 創(chuàng)建 factory "MathService" 用于兩數(shù)的乘積 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
provider
AngularJS 中通過 provider 創(chuàng)建一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用于返回 value/service/factory。
constant
constant(常量)用來在配置階段傳遞數(shù)值，注意這個常量在配置階段是不可用的。
mainApp.constant("configParam", "constant value");
實例：重要
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 依賴注入</title>
</head>
<body>
<h2>AngularJS 簡單應(yīng)用</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>輸入一個數(shù)字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>結(jié)果: {{result}}</p>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
mainApp.value("defaultInput", 5);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
AngularJS 路由
本章節(jié)我們將為大家介紹 AngularJS 路由。
AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。
通過 AngularJS 可以實現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）。
通常我們的URL形式為 http://runoob.com/first/page，但在單頁Web應(yīng)用中 AngularJS 通過 # + 標(biāo)記 實現(xiàn)，例如：
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
當(dāng)我們點擊以上的任意一個鏈接時，向服務(wù)端請的地址都是一樣的 (http://runoob.com/)。 因為 # 號之后的內(nèi)容在向服務(wù)端請求時會被瀏覽器忽略掉。
所以我們就需要在客戶端實現(xiàn) # 號后面內(nèi)容的功能實現(xiàn)。 AngularJS 路由 就通過 # + 標(biāo)記
幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例 - 菜鳥教程</title>
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由應(yīng)用</h2>
<ul>
<li><a href="#/">首頁</a></li>
<li><a href="#/computers">電腦</a></li>
<li><a href="#/printers">打印機(jī)</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機(jī)頁面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
實例解析：
1、載入了實現(xiàn)路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
<div ng-view></div>
該 div 內(nèi)的 HTML 內(nèi)容會根據(jù)路由的變化而變化。
4、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規(guī)則。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機(jī)頁面'})
.otherwise({redirectTo:'/'});
}]);
AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。
$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個參數(shù):
第一個參數(shù)是 URL 或者 URL 正則規(guī)則。
第二個參數(shù)是路由配置對象。
