angular-筆記

時間  2019-12-08
標籤 angular 筆記 欄目 AngularJS 简体版
原文   原文鏈接

ng-model 指令
ng-model 指令 綁定 HTML 元素 到應用程序數據。
ng-model 指令也能夠：
爲應用程序數據提供類型驗證（number、email、required）。
爲應用程序數據提供狀態（invalid、dirty、touched、error）。
爲 HTML 元素提供 CSS 類。
綁定 HTML 元素到 HTML 表單。

建立自定義的指令
除了 AngularJS 內置的指令外，咱們還能夠建立自定義指令。
你可使用 .directive 函數來添加自定義的指令。
要調用自定義指令，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>


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

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

restrict 值能夠是如下幾種:
E 做爲元素名使用
A 做爲屬性使用
C 做爲類名使用
M 做爲註釋使用
restrict 默認值爲 EA, 便可以經過元素名和屬性名來調用指令。
ng-model 指令能夠將輸入域的值與 AngularJS 建立的變量綁定。


<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>編輯郵箱地址，查看狀態的改變。</p>
<h1>狀態</h1>
<p>Valid: {{myForm.myAddress.$valid}} (若是輸入的值是合法的則爲 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (若是值改變則爲 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (若是經過觸屏點擊則爲 true)。</p>

</form>

編輯郵箱地址，查看狀態的改變。

狀態

Valid: true (若是輸入的值是合法的則爲 true)。

Dirty: false (若是值改變則爲 true)。

Touched: false (若是經過觸屏點擊則爲 true)。


<style>
input.ng-invalid {
   
}
</style>
</head>
<body>

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

<p>編輯文本域，不一樣狀態背景顏色會發送變化。</p>
<p>文本域添加了 required 屬性，該值是必須的，若是爲空則是不合法的。</p>

</body>
</html>


ng-model 指令根據表單域的狀態添加/移除如下類：
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(模型), 當前視圖中可用的數據。
Controller(控制器), 即 JavaScript 函數，能夠添加或修改屬性。
scope 是模型。
scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法能夠在視圖和控制器中使用。

Scope 做用範圍
瞭解你當前使用的 scope 是很是重要的。
在以上兩個實例中，只有一個做用域 scope，因此處理起來比較簡單，但在大型項目中， HTML DOM 中有多個做用域，這時你就須要知道你使用的 scope 對應的做用域是哪個。

根做用域
全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。
$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。

AngularJS 控制器 控制 AngularJS 應用程序的數據。
AngularJS 控制器是常規的 JavaScript 對象。控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 建立。

應用解析：
AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。
ng-controller="myCtrl"屬性是一個 AngularJS 指令。用於定義一個控制器。
myCtrl 函數是一個 JavaScript 函數。
AngularJS 使用$scope 對象來調用控制器。
在 AngularJS 中， $scope 是一個應用對象(屬於應用變量和函數)。
控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

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

AngularJS 過濾器
AngularJS 過濾器可用於轉換數據：
過濾器                描述
currency        格式化數字爲貨幣格式。
filter        從數組項中選擇一個子集。
lowercase        格式化字符串爲小寫。
orderBy        根據某個表達式排列數組。
uppercase        格式化字符串爲大寫。

AngularJS 服務(Service)
AngularJS 中你能夠建立本身的服務，或使用內建服務。
什麼是服務？
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它能夠返回當前頁面的 URL 地址。
注意 $location 服務是做爲一個參數傳遞到 controller 中。若是要使用它，須要在 controller 中定義。
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
爲何使用服務?
$http 是 AngularJS 應用中最經常使用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。

$http 服務
$http 是 AngularJS 應用中最經常使用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。
$timeout 服務
AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
$interval 服務
AngularJS $interval 服務對應了 JS window.setInterval 函數。

建立自定義服務
你能夠建立訪問自定義服務，連接到你的模塊中：
<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>
toString() 方法可把一個邏輯值轉換爲字符串，並返回結果。

語法
booleanObject.toString()
返回值
根據原始布爾值或者 booleanObject 對象的值返回字符串 "true" 或 "false"。
拋出
若是調用該方法的對象不是 Boolean，則拋出異常 TypeError。
提示和註釋
註釋：在 Boolean 對象被用於字符串環境中時，此方法會被自動調用。
實例
在本例中，咱們將建立一個 Boolean 對象，並把它轉換成字符串：
<script type="text/javascript">

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

</script>
輸出：
true


AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個核心服務，用於讀取遠程服務器的數據。
AngularJS $http 是一個用於讀取web服務器上數據的服務。
$http.get(url) 是用於讀取服務器數據的函數。

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 可使用數組或對象建立一個下拉列表選項。
使用 ng-options 建立選擇框
在 AngularJS 中咱們可使用 ng-option 指令來建立一個下拉列表，列表項經過對象和數組循環輸出。
ng-repeat 指令是經過數組來循環 HTML 代碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有如下優點：
使用 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="
    {{ x.Name }}</td>
    <td ng-if="$even">
    {{ x.Name }}</td>
    <td ng-if="$odd" style="
    {{ 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 請求
若是你須要從不一樣的服務器（不一樣域名）上獲取數據就須要使用跨域 HTTP 請求。
跨域請求在網頁上很是常見。不少網頁從不一樣服務器上載入 CSS, 圖片，Js腳本等。
在現代瀏覽器中，爲了數據的安全，全部請求被嚴格限制在同一域名下，若是須要調用不一樣站點的數據，須要經過跨域來解決。
如下的 PHP 代碼運行使用的網站進行跨域訪問。
header("Access-Control-Allow-Origin: *");

PHP Ajax 跨域問題最佳解決方案
分類 編程技術
本文經過設置Access-Control-Allow-Origin來實現跨域。
例如：客戶端的域名是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.
一、容許單個域名訪問
指定某域名（http://client.runoob.com）跨域訪問，則只需在http://server.runoob.com/server.php文件頭部添加以下代碼：
header('Access-Control-Allow-Origin:http://client.runoob.com');
二、容許多個域名訪問
指定多個域名（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);       
} 
三、容許全部域名訪問
容許全部域名訪問則只需在http://server.runoob.com/server.php文件頭部添加以下代碼：
header('Access-Control-Allow-Origin:*'); 
使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。


AngularJS HTML DOM
AngularJS 爲 HTML DOM 元素的屬性提供了綁定應用數據的指令。
ng-disabled 指令
ng-disabled 指令直接綁定應用程序數據到 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 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。
ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）。
若是 mySwitch 爲false, 按鈕將不可用: 

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

AngularJS 模塊
模塊定義了一個應用程序。
模塊是應用程序中不一樣部分的容器。
模塊是應用控制器的容器。
控制器一般屬於一個模塊。

建立模塊
你能夠經過 AngularJS 的 angular.module 函數來建立模塊：

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

<script>

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

</script>
"myApp" 參數對應執行應用的 HTML 元素。
如今你能夠在 AngularJS 應用中添加控制器，指令，過濾器等。

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

添加指令
AngularJS 提供了不少內置的指令，你可使用它們來爲你的應用添加功能
此外，你可使用模塊來爲你應用添加本身的指令：


AngularJS 有本身的 HTML 事件指令。
ng-click 指令
ng-click 指令定義了 AngularJS 點擊事件。

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


建立自定義的指令
除了 AngularJS 內置的指令外，咱們還能夠建立自定義指令。
你可使用 .directive 函數來添加自定義的指令。
要調用自定義指令，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>

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

函數會影響到全局命名空間
JavaScript 中應避免使用全局函數。由於他們很容易被其餘腳本文件覆蓋。
AngularJS 模塊讓全部函數的做用域在該模塊下，避免了該問題。

對於 HTML 應用程序，一般建議把全部的腳本都放置在 <body> 元素的最底部。
這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。
在咱們的多個 AngularJS 實例中，您將看到 AngularJS 庫是在文檔的 <head> 區域被加載。
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:<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()">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 函數設置了 master 對象的初始值，並定義了 reset() 方法。
reset() 方法設置了 user 對象等於 master 對象。
ng-click 指令調用了 reset() 方法，且在點擊按鈕時調用。
novalidate 屬性是在 HTML5 中新增的。禁用了使用瀏覽器的默認驗證。
novalidate 屬性在應用中不是必須的，可是你須要在 AngularJS 表單中使用，用於重寫標準的 HTML5 驗證。

AngularJS 輸入驗證
AngularJS 表單和控件能夠驗證輸入的數據。
AngularJS 表單和控件能夠提供驗證功能，並對用戶輸入的非法數據進行警告。
客戶端的驗證不能確保用戶輸入數據的安全，因此服務端的數據驗證也是必須的。

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

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

angular.isString($scope.abs) $scope.abs爲字符串則返回true，不然返回false；
angular.isNumber($scope.abs) $scope.abs爲數字則返回true，不然返回false；        

AngularJS Bootstrap
AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。

Bootstrap
你能夠在你的 AngularJS 應用中加入 Twitter Bootstrap，你能夠在你的 <head>元素中添加以下代碼:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
若是站點在國內，建議使用百度靜態資源庫的Bootstrap，代碼以下：
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">


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 文件，併發送到客戶端瀏覽器。
客戶端包含
經過 JavaScript 有不少種方式能夠在 HTML 中包含 HTML 文件。
一般咱們使用 http 請求 (AJAX) 從服務端獲取數據，返回的數據咱們能夠經過 使用 innerHTML 寫入到 HTML 元素中。

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

AngularJS 動畫
AngularJS 提供了動畫效果，能夠配合 CSS 使用。
AngularJS 使用動畫須要引入 angular-animate.min.js 庫。
還需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
什麼是動畫？
動畫是經過改變 HTML 元素產生的動態變化效果。
應用中動畫不宜太多，但合適的使用動畫能夠增長頁面的豐富性，也能夠更易讓用戶理解。

若是咱們應用已經設置了應用名，能夠把 ngAnimate 直接添加在模型中：
var app = angular.module('myApp', ['ngAnimate']);依賴注入

ngAnimate 作了什麼?
ngAnimate 模型能夠添加或移除 class 。
ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件，相似隱藏顯示 HTML 元素 ，若是事件發生 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）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者經過引用傳遞）到一個獨立的對象（或客戶端）中，而後成爲了該客戶端狀態的一部分。
該模式分離了客戶端依賴自己行爲的建立，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式造成直接對比的是，它容許客戶端了解客戶端如何使用該系統找到依賴
一句話 --- 沒事你不要來找我，有事我會去找你。

AngularJS 提供很好的依賴注入機制。如下5個核心組件用來做爲依賴注入：
value
factory
service
provider
constant

value
Value 是一個簡單的 javascript 對象，用於向控制器傳遞值（配置階段）：
// 建立 value 對象 "defaultInput" 並傳遞數據
mainApp.value("defaultInput", 5);// 將 "defaultInput" 注入到控制器

factory
factory 是一個函數用於返回值。在 service 和 controller 須要時建立。
一般咱們使用 factory 函數來計算或返回值。

// 建立 factory "MathService" 用於兩數的乘積 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 建立一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。

constant
constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。
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>輸入一個數字: <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 路由
本章節咱們將爲你們介紹 AngularJS 路由。
AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容。
經過 AngularJS 能夠實現多視圖的單頁Web應用（single page web application，SPA）。
一般咱們的URL形式爲 http://runoob.com/first/page，但在單頁Web應用中 AngularJS 經過 # + 標記 實現，例如：
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
當咱們點擊以上的任意一個連接時，向服務端請的地址都是同樣的 (http://runoob.com/)。 由於 # 號以後的內容在向服務端請求時會被瀏覽器忽略掉。
因此咱們就須要在客戶端實現 # 號後面內容的功能實現。 AngularJS 路由 就經過 # + 標記 
幫助咱們區分不一樣的邏輯頁面並將不一樣的頁面綁定到對應的控制器上。
<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>


實例解析：
一、載入了實現路由的 js 文件：angular-route.js。
二、包含了 ngRoute 模塊做爲主應用模塊的依賴模塊。
angular.module('routingDemoApp',['ngRoute'])
三、使用 ngView 指令。
<div ng-view></div>
該 div 內的 HTML 內容會根據路由的變化而變化。
四、配置 $routeProvider，AngularJS $routeProvider 用來定義路由規則。
module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'這是首頁頁面'})
        .when('/computers',{template:'這是電腦分類頁面'})
        .when('/printers',{template:'這是打印機頁面'})
        .otherwise({redirectTo:'/'});
}]);
AngularJS 模塊的 config 函數用於配置路由規則。經過使用 configAPI，咱們請求把$routeProvider注入到咱們的配置函數而且使用$routeProvider.whenAPI來定義咱們的路由規則。
$routeProvider 爲咱們提供了 when(path,object) & otherwise(object) 函數按順序定義全部路由，函數包含兩個參數:
第一個參數是 URL 或者 URL 正則規則。
第二個參數是路由配置對象。javascript

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