angular-笔记

时间 2019-12-08

原文原文链接

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


限制使用
你能够限制你的指令只能经过特定的方式来调用。
实例
经过添加 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