用生命谱写代码的赞歌

0%

AngularJS 简单介绍

Posted on Edited on In ,
闲来无事，简单总结了 AngularJs 一些常用知识点。

AngularJS 简介

AngularJS 是一款由 Google 公司开发维护的前端 MVC 框架，与我们常用的 jQuery 有很大不同。jQuery 更准确来说只是一个类库（类库指的是一系列函数的集合），以 DOM 做为驱动（核心），而 AngularJS 则一个框架（诸多类库的集合），以数据和逻辑做为驱动（核心）。

AngularJS 有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。

模块化

定义应用

通过为任一 HTML 标签添加 ng-app 属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。

一个页面可以有多个 ng-app ，但是不能嵌套， ng-app 可以不赋值，但是要关联相应模块时则必须赋值。

1
2
3
4
5
6
7
8
<body ng-app="App">
    <div class="box" ng-app="App">
        <!-- 添加ng-controller属性，并赋值为相应的控制器名称 -->
        <ul ng-controller="DemoController">
            <li ng-repeat="list in lists">{{list}}</li>
        </ul>
    </div>
</body>

定义模块

AngularJS 提供了一个全局对象 angular ，在此全局对象下存在若干的方法，其中 angular.module() 方法用来定义一个模块。

1
2
3
// 通过 module 方法定义模块
// 需要传递两个参数，第1个表示模块的名称，第2个表示此模块依赖的其他模块
var App = angular.module('App', [])

注意：应用（App）其本质也是一个模块。

定义控制器

控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。

1
2
3
4
5
6
7
8
9
// 模块返回值也是一个对象，通过此对象方法（controller）可以创建控制器
// 需要两个参数，第1个参数表示控制器名称，第2个参数是一个数组，这个数组除最后1个单元是函数外，其余都是字符串，表明此控制器的依赖关系
App.controller('DemoController', ['$scope', function($scope) {
    // 定义好了控制器
    // $socpe是一个空对象 {}
    // $scope 就是 Model
    // 数组数据来源于后端
    $scope.lists = ['html', 'javascript', 'css', 'php'];
}]);

指令

所谓指令就是 AngularJS 自定义的 HTML 属性或标签，这些指令都是以 ng- 做为前缀的，例如 ng-app 、 ng-controller 、 ng-repeat 等。

ng-repeat 处理重复值，使用 track by $index

1
2
3
4
5
6
7
8
$scope.items = [
 'red',
 'blue',
 'yellow',
 'white',
 'blue'
];
<li ng-repeat="item in items track by $index">{{ item }}</li>

内置指令

  • ng-app 指定应用根元素，至少有一个元素指定了此属性。
  • ng-controller 指定控制器
  • ng-show 控制元素是否显示，true显示、false不显示
  • ng-hide 控制元素是否隐藏，true隐藏、false不隐藏
  • ng-if 控制元素是否“存在”，true存在、false不存在
  • ng-src 增强图片路径
  • ng-href 增强地址
  • ng-class 利用布尔值控制类名，以便通过数据驱动视图。允许传递一个对象 ng-class=”{red: true, blue: true}”
  • ng-include 引入模板，需要以服务器的访问方式，ng-clude=”‘header.html’”
  • ng-disabled 表单禁用，ng-disabled=”true”
  • ng-readonly 表单只读
  • ng-checked 单/复选框表单选中
  • ng-selected 下拉框表单选中

自定义指令

AngularJS 允许自定义指令，通过 angular 全局对象下的 directive 方法实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义指令</title>
</head>
<body ng-app="App">
    <tag></tag>
    <div tag></div>
    <div class="tag"></div>

    <!-- 需要replace 为true -->
    <!-- directive:tag -->

    <script src="./libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        // 通过模块实例对象的directive方法可以自定义指令
        App.directive('tag', function () {
            // 返回与指令相关的内容
            return {
                // 规定指令的类型
                // E ELEMENT
                // A attribute
                // C class
                // M mark
                restrict: 'EACM',
                // 当由字符串定义模板时
                // 要确保整个字符串有一个根元素
                template: '<div><h1>hello world!</h1><small>123</small></div>',
                // template: '<img ng-src="" src="">'
                replace: true,
                // templateUrl: 'header.html'
            }
        });
    </script>
</body>
</html>

数据绑定

所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联

单向绑定

传统的单向数据绑定，指的是将模型（Model）数据，按着写好的视图（View）模板生成 HTML 标签，然后追加到 DOM 中显示，如 artTemplate 模板引擎的工作方式。通常由模型数据决定视图显示效果。

双向绑定

可以实现模型（Model）数据和视图（View）模板的双向传递

  • ng-cloak 防止双重大括号解析闪烁
  • ng-bind-template 可以绑定多个数据
  • ng-init 初始化模型数据
  • ng-dblclick
  • ng-blur
  • ng-keyup
  • ng-switch on 过滤循环数据
  • ng-switch-when
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 数据绑定</title>
</head>
<body ng-app="App">
    <div ng-controller="DemoController" ng-init="sex='男';hobby='写代码'">
        <h1 ng-cloak>{{name}}{{age}}</h1>
        <!-- <h2 ng-bind="age"></h2> -->
        <h2 ng-bind-template="name age"></h2>
        <h3>{{sex}}</h3>
        <h3>{{hobby}}</h3>
        <ul>
            <li ng-repeat="item in items" ng-switch on="item">
                <span ng-switch-when="css">{{item}}</span>
            </li>
        </ul>

        <!-- <span ng-model=""></span> -->
        <input type="text" ng-model="test">
        <!-- <span>{{test}}</span> -->
        <button ng-click="say()">提示</button>
        <button ng-dblclick="dblclick()">双击事件</button>
    </div>

    <script src="./libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function ($scope) {
            $scope.name = 'xiaomi';
            $scope.age = 10;
            // $scope.test
            $scope.items = ['html', 'js', 'css']
            $scope.say = function () {
                alert($scope.test);
            }
            $scope.dblclick = function () {
                alert('双击操作')
            }
        }]);
    </script>
</body>
</html>

作用域

每个控制器（Controller）对应一个模型（Model）也就是 $scope 对象，不同层级控制器（Controller）下的 $scope 便产生了作用域。

根作用域

一个 AngularJS 的应用（App）在启动时会自动创建一个根作用域 $rootScope ，这个根作用域在整个应用范围（ ng-app 所在标签以内）都是可以被访问到的。

子作用域

通过 ng-controller 指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

过滤器

在双重大括号内使用 “|” 来调用过滤器，使用 “:” 传递参数。

内置过滤器

  1. currency 将数值格式化为货币格式
  2. date 日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
  3. filter 在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
  4. json 将 Javascrip 对象转成 JSON 字符串。
  5. limitTo 取出字符串或数组的前（正数）几位或后（负数）几位
  6. lowercase 将文本转换成小写格式
  7. uppercase 将文本转换成大写格式
  8. number 数字格式化，可控制小位位数
  9. orderBy 对数组进行排序，第1个参数表示按照什么属性排序，第2个参数控制排序方向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 过滤器</title>
</head>
<body ng-app="App">
    <ul ng-controller="DemoController">
        <li>{{date|date: 'y/M/dd'}}</li>
        <li>{{price|currency:'￥'}}</li>
        <li>{{items|filter: 's'}}</li>
        <li>{{students|filter: {age: 21} }}</li>
        <li>{{info|json}}</li>
        <li>{{str|limitTo: -4}}</li>
        <li>{{items|limitTo: -4}}</li>
        <li>{{str|uppercase|lowercase|limitTo: 4|uppercase}}</li>
        <li>{{num|number:0}}</li>
        <li>{{letters|orderBy: '': true}}</li>
        <li>{{students|orderBy: 'age': true}}</li>
    </ul>
    <script src="./libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function($scope) {
            $scope.date = new Date(); // 2016/11/02
            $scope.price = 12.45;
            $scope.items = ['html', 'css', 'javascript', 'java', 'php', 'photoshop'];
            $scope.students = [
                {name: '小明', age: 20, score: 100},
                {name: '小红', age: 21, score: 89},
                {name: '小米', age: 21, score: 92}
            ]
            $scope.info = {
                name: 'xiaomi',
                age: 10
            }
            $scope.str = 'hello angular!';
            $scope.num = '123.456';
            $scope.letters = ['b', 'a', 'c', 'd'];
        }]);
        // var testnum = '123a456a';
        // alert(parseInt(testnum));
        // alert(Number(testnum));
    </script>
</body>
</html

自定义过滤器

根据业务需要自定义过滤器，通过模块对象实例提供的 filter 方法自定义过滤器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 自定义过滤器</title>
</head>
<body ng-app="App">
    <div class="box" ng-controller="DemoController">
        <h1>{{name|capitalize|sayHello}}</h1>
    </div>

    <script src="./libs/angular.min.js"></script>
    <script>
        var App = angular.module('App', []);
        App.controller('DemoController', ['$scope', function($scope) {
            $scope.name = 'xiaomi';
        }]);

        // 自定义过滤器
        // 通过模块实例App提供的 filter 方法来自定义
        App.filter('sayHello', function () {
            return function (input) {
                // console.log('你好' + input);
                return '你好' + input;
                // var txt = '';
                // for(var i=0; i<100; i++) {
                //  txt += input;
                // }
                // return txt;
            }
        });
        App.filter('capitalize', function () {
            return function (input) {
                return input[0].toUpperCase() + input.slice(1);
            }
        });
    </script>
</body>
</html>

依赖注入

AngularJS 采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。

推断式注入

没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

1
2
3
4
5
6
7
// AngularJS 内置一些具有特殊功能的“模块”
// 开发者在开发的时候可以直接使用这些“模块”
// 定义控制时，需要使用一个叫 $scope 的 “模块”
// 推断式依赖注入
App.controller('DemoController', function ($scope) {
    $scope.name = 'xiaomi';
});

注意： 这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

行内注入

以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

推荐使用这种方式声明依赖

1
2
3
4
5
// 行内注入方式
// 数组参数是标明依赖（指定需要哪些依赖）
App.controller('DemoController', ['$scope', '$http', function(abc, $http) {
    abc.name = 'xiaomi';
}]);

服务

服务是一个对象或函数，对外提供特定的功能。

内置服务

  1. $location 是对原生 Javascript 中 location 对象属性和方法的封装。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    App.controller('DemoController', ['$scope', '$location', function($scope, $location) {
        // 通过依赖注入的方式将 $scope 和 $location 两个服务注入进来了
        $scope.title = '$location服务';
        console.log($location);
        $scope.absUrl = $location.absUrl();
        $scope.host = $location.host();
        $scope.port = $location.port();
        $scope.protocol = $location.protocol();

        // 与原生 pathname 不同，只代表 # 之后的字符
        $scope.path = $location.path();
        // 与原生 search 不同，只代表 # 之后的查询字符串，会自动转化为 json 对象
        $scope.search = $location.search();
        // 哈希，与原生 hash 不同，只代表 # 后面的 # 之后的字符
        $scope.hash = $location.hash();
    }]);

    // 原生 location 对象
    for(var key in location) {
        console.log(key + '~~~' + location[key]);
    }
  2. $timeout&$interval 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    App.controller('DemoController', ['$scope', '$timeout', '$interval',function ($scope, $timeout, $interval) {
        $timeout(function () {
            $scope.time = '123';
        }, 3000);
        var stopTime = $interval(function () {
            $scope.now = new Date();
        }, 1000);
        $scope.stop = function () {
            // 停止定时器
            $interval.cancel(stopTime);
        }
    }]);
  3. $filter 格式化数据。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    App.controller('DemoController', ['$scope', '$filter', function ($scope, $filter) {
        // $filter这个服务可以“生产”很多函数，这些可以实现不同的数据格式化任务，通过传递不同的参数实现的
        // $filter 负责“造”新过滤器，根据传递的参数不同，过滤器也不一样
        var date = $filter('date');
        $scope.now = date(new Date(), 'y/M/d');
        var currency = $filter('currency');
        $scope.price = currency(12.345, '￥');
        var limitTo = $filter('limitTo');
        $scope.items = limitTo(['html', 'js', 'css'], 2);
        var uppercase = $filter('uppercase');
        $scope.str = uppercase('hello servcie');
    }]);
  4. $log 打印调试信息。
    • $log.log(‘日志`)
    • $log.info(‘信息’)
    • $log.warn(‘警告’)
    • $log.error(‘错误’)
    • $log.debug(‘调试’)
  5. $http 用于向服务端发起异步请求。
    • get 传参采用 params: {sex: '男'} 方式
    • post 传参=采用 data: 'name=xiaomi&age=10' 方式，而且 post 也可以传递 params 参数 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      App.controller('DemoController', ['$scope', '$http', '$log',function($scope, $http, $log) {
          // AngularJS也对XMLHttpRequest对象进行封装，封装成了一个服务叫 $http，是一个函数
          // var xhr = new XMLHttpRequest;
          // xhr.open('post', './example.php');
          // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
          // xhr.send('name=xiaomi&age=10');
          // xhr.onreadystatechange = function () {
          // if(xhr.readyState == 4 && xhr.status == 200) {
          //     xhr.responseText;
          // }
          // }

          $http({
              url: 'example.php',
              method: 'post',
              headers: {
                  'Content-type': 'application/x-www-form-urlencoded'
              },
              // restful 接口
              // data: {name: 'xiaomi', age: 10}
              data: 'name=xiaomi&age=10'
          }).success(function (info) {
              // console.log(info);
              $log.info(info);

              $scope.stars = info;
          });
      }])

自定义服务

所谓服务是将一些通用性的功能逻辑进行封装方便使用，自定义服务就是要返回一个对象或函数以供使用。

  1. factory 方法 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    App.factory('showTime', ['$filter', function ($filter) {
        // 返回一个函数形式
        // return function () {
        //  var now = new Date();
        //  var date = $filter('date');
        //  return date(now, 'y-M-d H:m:s');
        // }

        // 返回一个对象形式
        var now = new Date();
        var date = $filter('date');
        return {
            now: date(now, 'y-M-d H:m:s')
        }
    }]);

    App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {
        // $scope.now = showTime();
        $scope.now = showTime.now;
    }])
  2. service 方法 –> 不需要 return 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var App = angular.module('App', []);

    // 自定义服务显示日期
    App.service('showTime', ['$filter', function($filter) {
        var now = new Date();
        var date = $filter('date');
        this.now = date(now, 'y-M-d H:mm:ss');
    }]);

    App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {
        $scope.now = showTime.now;
    }])
  3. value 方法定义常量 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 自定义常量服务
    App.value('author', 'xiaomi');
    App.value('version', '1.0');

    // 本质上一个服务
    // 从表现形式上是一个常量
    // 常量就是不变的值与变量名相对应

    // 声明依赖调用服务
    App.controller('DemoController', ['$scope', 'author', 'version', function($scope, author, version) {
        $scope.author = author;
        $scope.ver = version;
    }]);

模块加载

AngularJS 模块可以在被加载和执行之前对其自身进行配置。

AngularJS 执行流程

  1. 启动阶段(startup)
    1. 开始
    2. 浏览器解析 DOM 树
    3. 遇到 angular.js 停止解析，开始执行脚本
    4. Angular 监听到 DOMContentLoaded 事件，表示 DOM 树构建完毕
    5. 启动 Angular 应用
  2. 初始化阶段(initial)
    1. 查找模块依赖
    2. 寻找 ng-app 指令
    3. 初始化必要组件($injector/$compile/$rootScope)，准备默认的注入器（依赖注入）、编译器（ng指令与双重大括号解析）、根作用域（准备存储初始化数据）
    4. 配置与运行，在 angular 解析 DOM 数之前提前配置或者运行注入器与编译器，可以使用默认配置，省略此步骤
    5. angular 开始解析 DOM 树
  3. 编译、链接(compile/link)
    1. $compile 遍历 DOM 树，搜集解析指令
    2. 执行每个指令的 compile 函数
    3. 处理 DOM 转换，编译模板
    4. 调用链接函数，生成实时视图
  4. 运行阶段(running)
    1. 等待事件触发，执行 $digest 循环
    2. 检测到变化，调用 $watch 函数
    3. 再次执行 $digest 循环，直到没有变化
    4. 结束

配置块

通过 config 方法实现对模块的配置， AngularJS 中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 配置$log服务(禁用debug)，可以同时配置两个服务
App.config(['$logProvider', '$filterProvider', function($logProvider, $filterProvider) {
    // 通过$logProvider可以配置$log服务
    $logProvider.debugEnabled(false);
}]);

// 配置$filter(增加一个过滤器)
App.config(['$filterProvider', function($filterProvider) {
    // 可以实现新增过滤器的功能
    $filterProvider.register('showTime', function () {
        return function () {
            var now = new Date;

            return now;
        }
    });
}])

运行块

不需要将服务作为依赖注入到 ng-controller 模块中，可以直接运行相应的服务模块， AngularJS 提供了 run 方法来实现。

1
2
3
4
5
6
7
8
9
10
11
12
var App = angular.module('App', []);
// 直接运行$http、$rootScope服务
// $rootScope代表根作用域
App.run(['$log', '$http', '$rootScope', function ($log, $http, $rootScope) {
    $rootScope.name = '祖宗';
    $http({
        url: 'example.php',
        method: 'get'
    }).success(function (data) {
        $log.log(data);
    });
}]);

而且， run 方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过 run 方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。

路由

一个应用是由若干个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由是实现这一功能的关键。

SPA

SPA（Single Page Application）指的是通单一页面展示所有功能，通过 Ajax 动态获取数据然后进行实时渲染，结合 CSS3 动画模仿原生 App 交互，然后再进行打包（使用工具把 Web 应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

SPA 在 PC 端也有广泛的应用，通常情况下使用 Ajax 异步请求数据，然后实现内容局部刷新。

前端路由

在后端开发中通过 URL 地址可以实现页面（视图）的切换，但是 AngularJS 是一个纯前端 MVC 框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换 URL 地址（即不允许产生跳转），但 Web 应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

  1. 只有一页面
  2. 链接使用锚点

单页面应用原理 是通过 hashchange 事件监听到锚点的变化，从而实现为不同的锚点准备不同的视图。

angular-route.js 对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

路由参数

  1. ngRoute 提供两个方法匹配路由，分别是 when 和 otherwise ， when 方法需要两个参数， otherwise 方法作为 when 方法的补充只需要一个参数，其中 when 方法可以被多次调用。
  2. 第1个参数是一个字符串，代表当前 URL 中的 hash 值。
  3. 第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
    1. template 字符串形式的视图模板
    2. templateUrl 引入外部视图模板
    3. controller 视图模板所属的控制器
    4. redirectTo跳转到其它路由（一般用于 otherwise 参数对象中）
  4. 获取参数，在控制中注入 $routeParams 可以获取传递的参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 路由和多视图</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F7F7F7;
            font-family: Arial;
        }
        .wrapper {
            max-width: 980px;
            margin: 50px auto;
        }
        ul {
            padding: 0;
            margin: 0;
            overflow: hidden;
            list-style: none;
            background-color: #000;
            border-radius: 4px;
        }
        li {
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
        }
        li.active {
            background-color: #333;
        }
        li a {
            display: block;
            color: #FFF;
            text-decoration: none;
        }
        .content {
            margin-top: 30px;
            font-size: 24px;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 导航菜单 -->
        <ul>
            <li class="active">
                <a href="#/index">Index</a>
            </li>
            <li>
                <a href="#/introduce">Introduce</a>
            </li>
            <li>
                <a href="#/contact">Contact Us</a>
            </li>
            <li>
                <a href="#/list">List</a>
            </li>
            <li>
                <a href="#/page/1/name">Page</a>
            </li>
        </ul>
        <!-- 内容 -->
        <div class="content">
            <!-- 占位符 -->
            <div ng-view></div>
        </div>
    </div>
    <!-- AngularJS核心框架 -->
    <script src="./libs/angular.min.js"></script>
    <!-- 引入实现单页面应用的模块 angular-route.js -->
    <script src="./libs/angular-route.js"></script>
    <script>
        // 第2个参数是处理依赖
        // App这个模块是依赖 ngRoute 模块
        var App = angular.module('App', ['ngRoute']);

        // 需要配置路由模块
        App.config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/', {
                template: 'Index Page'
            })
            .when('/index', {
             template: 'Index Page'
            })
            .when('/introduce', {
                template: 'Introduce Page'
            })
            .when('/contact', {
                template: 'Contact Us Page'
            })
            .when('/404', {
                // template: '404 not found'
                templateUrl: './404.html'
            })
            .when('/list', {
                templateUrl: './list.html',
                controller: 'ListController'
            })
            .when('/page/:n/name/:s', {
                template: '页码',
                controller: 'ListController'
            })
            .otherwise({
                redirectTo: '/404'
            })
        }]);

        // 通过$routeParams可以获得参数
        App.controller('ListController', ['$scope', '$routeParams', function ($scope, $routeParams) {
            $scope.items = ['移动web', 'AngularJS', '面向对象', 'Ajax'];
            console.log($routeParams);
        }]);
    </script>
</body>
</html>

其它

AngularJS 本身实现了简版的 jQuery Lite ，如果没有引入 jQuery ，那么通过 angular.element(原生DOM) 不能选择元素，但是可以将一个 DOM 元素转成 jQuery 对象。

如果引提前引入了 jQuery ，则 angular.element 完全等于 jQuery 或者 $ 。