angular 筆記

ng-model 指令
ng-model 指令 綁定 HTML 元素 到應用程序數(shù)據(jù)嗜桌。
ng-model 指令也可以：
為應用程序數(shù)據(jù)提供類型驗證（number蛇摸、email硬耍、required）匿值。
為應用程序數(shù)據(jù)提供狀態(tài)（invalid赠制、dirty、touched挟憔、error）钟些。
為 HTML 元素提供 CSS 類烟号。
綁定 HTML 元素到 HTML 表單。

創(chuàng)建自定義的指令
除了 AngularJS 內置的指令外政恍，我們還可以創(chuàng)建自定義指令汪拥。
你可以使用 .directive 函數(shù)來添加自定義的指令。
要調用自定義指令篙耗，HTML 元素上需要添加自定義指令名迫筑。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:

你可以通過以下方式來調用指令：
元素名
屬性
類名
注釋

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

限制使用
你可以限制你的指令只能通過特定的方式來調用宗弯。
實例
通過添加 restrict 屬性,并設置只值為 "A", 來設置指令只能通過屬性的方式來調用:

restrict 值可以是以下幾種:
E 作為元素名使用
A 作為屬性使用
C 作為類名使用
M 作為注釋使用
restrict 默認值為 EA, 即可以通過元素名和屬性名來調用指令铣焊。
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

當在控制器中添加 $scope 對象時渐逃，視圖 (HTML) 可以獲取了這些屬性够掠。
視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可茄菊，如： {{carname}}疯潭。

Scope 概述
AngularJS 應用組成如下：
View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數(shù)據(jù)面殖。
Controller(控制器), 即 JavaScript 函數(shù)竖哩，可以添加或修改屬性。
scope 是模型脊僚。
scope 是一個 JavaScript 對象相叁，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。

Scope 作用范圍
了解你當前使用的 scope 是非常重要的钝荡。
在以上兩個實例中，只有一個作用域 scope舶衬，所以處理起來比較簡單埠通，但在大型項目中， HTML DOM 中有多個作用域逛犹，這時你就需要知道你使用的 scope 對應的作用域是哪一個端辱。

根作用域
所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中虽画。
$rootScope 可作用于整個應用中舞蔽。是各個 controller 中 scope 的橋梁。用 rootscope 定義的值码撰，可以在各個 controller 中使用渗柿。

AngularJS 控制器 控制 AngularJS 應用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對象脖岛《淦埽控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數(shù) 創(chuàng)建柴梆。

應用解析：
AngularJS 應用程序由 ng-app 定義陨溅。應用程序在 <div> 內運行。
ng-controller="myCtrl"屬性是一個 AngularJS 指令绍在。用于定義一個控制器门扇。
myCtrl 函數(shù)是一個 JavaScript 函數(shù)。
AngularJS 使用$scope 對象來調用控制器偿渡。
在 AngularJS 中臼寄， $scope 是一個應用對象(屬于應用變量和函數(shù))。
控制器的 $scope （相當于作用域溜宽、控制范圍）用來保存AngularJS Model(模型)的對象脯厨。

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

AngularJS 過濾器
AngularJS 過濾器可用于轉換數(shù)據(jù)：
過濾器 描述
currency 格式化數(shù)字為貨幣格式坑质。
filter 從數(shù)組項中選擇一個子集合武。
lowercase 格式化字符串為小寫。
orderBy 根據(jù)某個表達式排列數(shù)組涡扼。
uppercase 格式化字符串為大寫稼跳。

AngularJS 服務(Service)
AngularJS 中你可以創(chuàng)建自己的服務，或使用內建服務吃沪。
什么是服務汤善？
在 AngularJS 中，服務是一個函數(shù)或對象，可在你的 AngularJS 應用中使用红淡。
AngularJS 內建了30 多個服務不狮。
有個 $location 服務，它可以返回當前頁面的 URL 地址在旱。
注意 $location 服務是作為一個參數(shù)傳遞到 controller 中摇零。如果要使用它，需要在 controller 中定義桶蝎。
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
為什么使用服務?
$http 是 AngularJS 應用中最常用的服務驻仅。服務向服務器發(fā)送請求，應用響應服務器傳送過來的數(shù)據(jù)登渣。
AngularJS 會一直監(jiān)控應用噪服，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好胜茧。

$http 服務
$http 是 AngularJS 應用中最常用的服務粘优。 服務向服務器發(fā)送請求，應用響應服務器傳送過來的數(shù)據(jù)呻顽。
$timeout 服務
AngularJS $timeout 服務對應了 JS window.setTimeout 函數(shù)敬飒。
$interval 服務
AngularJS $interval 服務對應了 JS window.setInterval 函數(shù)。

創(chuàng)建自定義服務
你可以創(chuàng)建訪問自定義服務芬位，鏈接到你的模塊中：
<p>自定義服務无拗，用于轉換16進制數(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() 方法可把一個邏輯值轉換為字符串，并返回結果昧碉。

語法
booleanObject.toString()
返回值
根據(jù)原始布爾值或者 booleanObject 對象的值返回字符串 "true" 或 "false"英染。
拋出
如果調用該方法的對象不是 Boolean，則拋出異常 TypeError被饿。
提示和注釋
注釋：在 Boolean 對象被用于字符串環(huán)境中時四康，此方法會被自動調用。
實例
在本例中狭握，我們將創(chuàng)建一個 Boolean 對象闪金，并把它轉換成字符串：
<script type="text/javascript">

var boo = new Boolean(true)
document.write(boo.toString())

</script>
輸出：
true

AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個核心服務，用于讀取遠程服務器的數(shù)據(jù)论颅。
AngularJS $http 是一個用于讀取web服務器上數(shù)據(jù)的服務哎垦。
$http.get(url) 是用于讀取服務器數(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ù)組或對象創(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 指令瞻离，選擇的值是一個對象：
當選擇值是一個對象時，我們就可以獲取更多信息乒裆，應用也更靈活套利。

AngularJS 表格
使用 CSS 樣式 讓頁面更加美觀
使用 orderBy 過濾器 排序顯示
使用 uppercase 過濾器轉換為大寫:
顯示序號 ($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
服務端代碼
以下列出了列出了幾種服務端代碼類型：
使用 PHP 和 MySQL。返回 JSON缸兔。
使用 PHP 和 MS Access。返回 JSON吹艇。
使用 ASP.NET, VB, 及 MS Access惰蜜。 返回 JSON。

跨域 HTTP 請求
如果你需要從不同的服務器（不同域名）上獲取數(shù)據(jù)就需要使用跨域 HTTP 請求受神。
跨域請求在網頁上非常常見抛猖。很多網頁從不同服務器上載入 CSS, 圖片，Js腳本等鼻听。
在現(xiàn)代瀏覽器中财著，為了數(shù)據(jù)的安全，所有請求被嚴格限制在同一域名下撑碴，如果需要調用不同站點的數(shù)據(jù)撑教，需要通過跨域來解決。
以下的 PHP 代碼運行使用的網站進行跨域訪問醉拓。
header("Access-Control-Allow-Origin: *");

PHP Ajax 跨域問題最佳解決方案
分類 編程技術
本文通過設置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 元素的屬性提供了綁定應用數(shù)據(jù)的指令街氢。
ng-disabled 指令
ng-disabled 指令直接綁定應用程序數(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 指令綁定應用程序數(shù)據(jù) "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）阳仔。
如果 mySwitch 為false, 按鈕將不可用:

ng-show 指令
ng-show 指令隱藏或顯示一個 HTML 元素忧陪。
ng-show 指令根據(jù) value 的值來顯示（隱藏）HTML 元素扣泊。
你可以使用表達式來計算布爾值（ true 或 false）:
單獨寫一個值例如ng-show="1"也可以顯示

AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不同部分的容器嘶摊。
模塊是應用控制器的容器延蟹。
控制器通常屬于一個模塊。

創(chuàng)建模塊
你可以通過 AngularJS 的 angular.module 函數(shù)來創(chuàng)建模塊：

<div ng-app="myApp">...</div>

<script>

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

</script>
"myApp" 參數(shù)對應執(zhí)行應用的 HTML 元素叶堆。
現(xiàn)在你可以在 AngularJS 應用中添加控制器阱飘，指令，過濾器等虱颗。

添加控制器
你可以使用 ng-controller 指令來添加應用的控制器:

添加指令
AngularJS 提供了很多內置的指令沥匈，你可以使用它們來為你的應用添加功能
此外，你可以使用模塊來為你應用添加自己的指令：

AngularJS 有自己的 HTML 事件指令忘渔。
ng-click 指令
ng-click 指令定義了 AngularJS 點擊事件高帖。

隱藏 HTML 元素
ng-hide 指令用于設置應用部分是否可見。
ng-hide="true" 設置 HTML 元素不可見畦粮。
ng-hide="false" 設置 HTML 元素可見散址。

創(chuàng)建自定義的指令
除了 AngularJS 內置的指令外，我們還可以創(chuàng)建自定義指令宣赔。
你可以使用 .directive 函數(shù)來添加自定義的指令预麸。
要調用自定義指令，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ù)用于定義模塊的依賴關系。
中括號[]表示該模塊沒有依賴钩蚊，如果有依賴的話會在中括號寫上依賴的模塊名字犁罩。

函數(shù)會影響到全局命名空間
JavaScript 中應避免使用全局函數(shù)。因為他們很容易被其他腳本文件覆蓋两疚。
AngularJS 模塊讓所有函數(shù)的作用域在該模塊下床估，避免了該問題。

對于 HTML 應用程序诱渤，通常建議把所有的腳本都放置在 <body> 元素的最底部丐巫。
這會提高網頁加載速度，因為 HTML 加載不受制于腳本加載勺美。
在我們的多個 AngularJS 實例中递胧，您將看到 AngularJS 庫是在文檔的 <head> 區(qū)域被加載。
AngularJS 在 <head> 元素中被加載赡茸，因為對 angular.module 的調用只能在庫加載完成后才能進行缎脾。
另一個解決方案是在 <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 應用联喘。
ng-controller 指令定義了應用控制器。
ng-model 指令綁定了兩個 input 元素到模型的 user 對象辙纬。
formCtrl 函數(shù)設置了 master 對象的初始值豁遭，并定義了 reset() 方法。
reset() 方法設置了 user 對象等于 master 對象贺拣。
ng-click 指令調用了 reset() 方法蓖谢，且在點擊按鈕時調用。
novalidate 屬性是在 HTML5 中新增的譬涡。禁用了使用瀏覽器的默認驗證闪幽。
novalidate 屬性在應用中不是必須的，但是你需要在 AngularJS 表單中使用涡匀，用于重寫標準的 HTML5 驗證盯腌。

AngularJS 輸入驗證
AngularJS 表單和控件可以驗證輸入的數(shù)據(jù)。
AngularJS 表單和控件可以提供驗證功能渊跋，并對用戶輸入的非法數(shù)據(jù)進行警告腊嗡。
客戶端的驗證不能確保用戶輸入數(shù)據(jù)的安全着倾，所以服務端的數(shù)據(jù)驗證也是必須的拾酝。

$dirty 表單有填寫記錄
$valid 字段內容合法的
$invalid 字段內容是非法的
$pristine 表單沒有填寫記錄

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

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 應用中加入 Twitter Bootstrap恒傻，你可以在你的 <head>元素中添加如下代碼:
<link rel="stylesheet" >
如果站點在國內脸侥，建議使用百度靜態(tài)資源庫的Bootstrap，代碼如下：
<link rel="stylesheet" >

Bootstrap 類解析
元素 Bootstrap 類 定義
<div> container 內容容器
<table> table 表格
<table> table-striped 帶條紋背景的表格
<button> btn 按鈕
<button> btn-success 成功按鈕
<span> glyphicon 字形圖標
<span> glyphicon-pencil 鉛筆圖標
<span> glyphicon-user 用戶圖標
<span> glyphicon-save 保存圖標
<form> form-horizontal 水平表格
<div> form-group 表單組
<label> control-label 控制器標簽
<label> col-sm-2 跨越 2 列
<div> col-sm-10 跨越 10 列

AngularJS 包含
在 AngularJS 中盈厘，你可以在 HTML 中包含 HTML 文件睁枕。
在 HTML 中包含 HTML 文件
在 HTML 中，目前還不支持包含 HTML 文件的功能沸手。
服務端包含
大多服務端腳本都支持包含文件功能 (SSI： Server Side Includes)外遇。
使用 SSI, 你可在 HTML 中包含 HTML 文件，并發(fā)送到客戶端瀏覽器契吉。
客戶端包含
通過 JavaScript 有很多種方式可以在 HTML 中包含 HTML 文件跳仿。
通常我們使用 http 請求 (AJAX) 從服務端獲取數(shù)據(jù)，返回的數(shù)據(jù)我們可以通過 使用 innerHTML 寫入到 HTML 元素中捐晶。

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

AngularJS 動畫
AngularJS 提供了動畫效果菲语，可以配合 CSS 使用妄辩。
AngularJS 使用動畫需要引入 angular-animate.min.js 庫。
還需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
什么是動畫谨究？
動畫是通過改變 HTML 元素產生的動態(tài)變化效果恩袱。
應用中動畫不宜太多，但合適的使用動畫可以增加頁面的豐富性胶哲，也可以更易讓用戶理解畔塔。

如果我們應用已經設置了應用名，可以把 ngAnimate 直接添加在模型中：
var app = angular.module('myApp', ['ngAnimate']);依賴注入

ngAnimate 做了什么?
ngAnimate 模型可以添加或移除 class 鸯屿。
ngAnimate 模型并不能使 HTML 元素產生動畫澈吨，但是 ngAnimate 會監(jiān)測事件，類似隱藏顯示 HTML 元素 寄摆，如果事件發(fā)生 ngAnimate 就會使用預定義的 class 來設置 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 的值。
其他指令會在進入 DOM 會添加 ng-enter 類婶恼，移除 DOM 會添加 ng-leave 屬性桑阶。
當 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 元素產生動畫效果萎河，

AngularJS 依賴注入
什么是依賴注入
wiki 上的解釋是：依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式蕉饼，在這種模式下虐杯，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然后成為了該客戶端狀態(tài)的一部分昧港。
該模式分離了客戶端依賴本身行為的創(chuàng)建擎椰，這使得程序設計變得松耦合，并遵循了依賴反轉和單一職責原則创肥。與服務定位器模式形成直接對比的是达舒，它允許客戶端了解客戶端如何使用該系統(tǒng)找到依賴
一句話 --- 沒事你不要來找我，有事我會去找你瓤的。

AngularJS 提供很好的依賴注入機制休弃。以下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 簡單應用</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>結果: {{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 訪問不同的內容顿仇。
通過 AngularJS 可以實現(xiàn)多視圖的單頁Web應用（single page web application淘正，SPA）。
通常我們的URL形式為 http://runoob.com/first/page臼闻，但在單頁Web應用中 AngularJS 通過 # + 標記 實現(xiàn)鸿吆，例如：
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
當我們點擊以上的任意一個鏈接時，向服務端請的地址都是一樣的 (http://runoob.com/)述呐。 因為 # 號之后的內容在向服務端請求時會被瀏覽器忽略掉惩淳。
所以我們就需要在客戶端實現(xiàn) # 號后面內容的功能實現(xiàn)。 AngularJS 路由 就通過 # + 標記
幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應的控制器上乓搬。
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例 - 菜鳥教程</title>
</head>
<body ng-app='routingDemoApp'>

    <h2>AngularJS 路由應用</h2>
    <ul>
        <li><a href="#/">首頁</a></li>
        <li><a href="#/computers">電腦</a></li>
        <li><a href="#/printers">打印機</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:'這是打印機頁面'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>
 
 
</body>

</html>

實例解析：
1思犁、載入了實現(xiàn)路由的 js 文件：angular-route.js。
2进肯、包含了 ngRoute 模塊作為主應用模塊的依賴模塊激蹲。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令坷澡。
<div ng-view></div>
該 div 內的 HTML 內容會根據(jù)路由的變化而變化托呕。
4含蓉、配置 $routeProvider频敛，AngularJS $routeProvider 用來定義路由規(guī)則。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{template:'這是電腦分類頁面'})
.when('/printers',{template:'這是打印機頁面'})
.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ù)是路由配置對象。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末蓄喇，一起剝皮案震驚了整個濱河市发侵，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌妆偏，老刑警劉巖刃鳄，帶你破解...
    沈念sama閱讀 219,539評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異钱骂，居然都是意外死亡叔锐，警方通過查閱死者的電腦和手機挪鹏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來愉烙，“玉大人讨盒，你說我怎么就攤上這事〔皆穑” “怎么了返顺？”我有些...
    開封第一講書人閱讀 165,871評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長蔓肯。 經常有香客問我创南，道長，這世上最難降的妖魔是什么省核？ 我笑而不...
    開封第一講書人閱讀 58,963評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任稿辙，我火速辦了婚禮，結果婚禮上气忠，老公的妹妹穿的比我還像新娘邻储。我一直安慰自己，他們只是感情好旧噪，可當我...
    茶點故事閱讀 67,984評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布吨娜。 她就那樣靜靜地躺著，像睡著了一般淘钟。 火紅的嫁衣襯著肌膚如雪宦赠。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,763評論 1贊 307
  • 城市分裂傳說
    那天米母，我揣著相機與錄音勾扭，去河邊找鬼。 笑死铁瞒，一個胖子當著我的面吹牛妙色，可吹牛的內容都是我干的。 我是一名探鬼主播慧耍，決...
    沈念sama閱讀 40,468評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼身辨，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了芍碧？” 一聲冷哼從身側響起煌珊，我...
    開封第一講書人閱讀 39,357評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎泌豆，沒想到半個月后定庵，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 45,850評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年洗贰，在試婚紗的時候發(fā)現(xiàn)自己被綠了找岖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,144評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡敛滋，死狀恐怖许布，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情绎晃，我是刑警寧澤蜜唾，帶...
    沈念sama閱讀 35,823評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站庶艾，受9級特大地震影響袁余，放射性物質發(fā)生泄漏。R本人自食惡果不足惜咱揍，卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一颖榜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧煤裙，春花似錦掩完、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0贊 22
  • 一樁弒父案且蓬，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至题翰，卻和暖如春恶阴，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背豹障。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工冯事， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人沼填。 一個月前我還...
    沈念sama閱讀 48,415評論 3贊 373
  • 代替公主和親
    正文 我出身青樓桅咆，卻偏偏與公主長得像括授，于是被迫代替她去往敵國和親坞笙。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2贊 355

推薦閱讀更多精彩內容