一篇入门AngularJS

1、AngularJS 应用
2、AngularJS 指令
3、AngularJS 表达式
4、AngularJS 模型
5、AngularJS 控制器
6、AngularJS 作用域
7、AngularJS 过滤器
8、AngularJS 服务
9、AngularJS 表格
10、AngularJS 表单
11、AngularJS API
12、AngularJS 包含
13、AngularJS 样式
13、AngularJS 动画
14、AngularJS 依赖注入
15、AngularJS 路由

1、AngularJS 应用

AngularJS 是一个 JavaScript 框架，它可通过 <script> 标签添加到 HTML 页面，<script> 标签可以放置在 <head> 标签中

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

所以，<head> 标签可以写成以下的形式：

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

AngularJS 通过指令扩展 HTML，通过 表达式 绑定数据到 HTML

AngularJS 应用的构成元素如下：

模块 (Module)：定义 AngularJS 应用
视图 (View)：从用户角度看，视图是用户所看到的网页内容；从 AngularJS 角度看，视图是 AngularJS 指令和 AngularJS 表达式经过解析后的 DOM 元素
指令(Directives)：拓展的 HTML 属性，能被 AngularJS 框架识别，根据不同指令完成不同动作
表达式(Expressions)：用于向页面输出信息
模型(Model)：用于展示到页面的数据
控制器(Controller)：用于处理业务逻辑的方法
作用域(Scope)：可以把作用域理解成一个容器，控制器可以从容器中拿出模型数据，也可以往容器中放入模型数据，然后在视图中通过表达式将数据展示给用户
模板(Template)：AngularJS 以 HTML 作为模板语言，AngularJS 模板实际上就是 HTML 片段

2、AngularJS 指令

AngularJS 指令（Directives）是扩展的 HTML 属性，带有前缀 ng-，包含 内置指令 和 自定义指令

（1）内置指令

常见的内置指令列举如下：

ng-app：定义 AngularJS 应用程序的根元素，在网页加载完毕时会自动初始化应用程序
ng-controller：定义 AngularJS 应用程序的控制器
ng-init：初始化 AngularJS 应用程序数据，但是一般使用控制器或模块代替 ng-init 指令
ng-model：绑定 HTML 元素到应用 AngularJS 应用程序数据
ng-repeat：克隆数组中的每个项 HTML 元素

完整的内置指令请参考：http://www.runoob.com/angularjs/angularjs-reference.html

<body>
    <div ng-app="" ng-init="quantity=1; price=5">
        <h2>价格计算器</h2>
        <p>数量: <input type="number" ng-model="quantity"></p>
        <p>价格: <input type="number" ng-model="price"></p>
        <p>总价: {{quantity * price}}</p>
    </div>
</body>

（2）自定义指令

可以使用 directive 函数添加自定义指令

使用驼峰命名法命名指令，例 testFunction，但是在使用时需要以 - 分割，例 test-function

<body ng-app="myApp">
    <test-function></test-function>
    <script>
    var app = angular.module("myApp", []);
    app.directive("testFunction", function() {
        return {
            template : "<p>自定义指令!</p>"
        };
    });
    </script>
</body>

<!-- 网页显示内容：
    自定义指令!
-->

可以通过以下方式使用指令：

元素名：<test-function></test-function>
属性：<div test-function></div>
类名：<div class="test-function"></div>
注释：

添加 restrict 属性可以设置指令的使用方式，restrict 属性的可选值如下：

E：作为元素名使用
A：作为属性使用
C：作为类名使用
M：作为注释使用

restrict 属性的默认值为 EA，即既可以作为元素名使用，也可以作为属性使用

<body ng-app="myApp">
    <div test-function></div>
    <script>
    var app = angular.module("myApp", []);
    app.directive("testFunction", function() {
        return {
            restrict : "A",
            template : "<p>自定义指令!</p>"
        };
    });
    </script>
</body>

<!-- 这个例子通过使用 restrict 属性限制指令只能作为属性使用 -->
<!-- 网页显示内容：
    自定义指令!
-->

注意：HTML5 允许自定义属性，以 data- 开头，AngularJS 允许自定义属性，以 ng- 开头，故我们可以以 data-ng- 开头来让网页对 HTML5 有效

3、AngularJS 表达式

AngularJS 表达式（Expressions）将数据与页面 双向绑定 起来

所谓的双向绑定，简单来说就是界面的操作能实时反映到数据，数据的变更能实时展现到界面

它写在双大括号内 {{expression}}，与 JavaScript 表达式类似，可以包含文字、运算符和变量等

AngularJS 表达式与 JavaScript 表达式有以下的不同：

AngularJS 表达式可以写在 HTML 中
AngularJS 表达式不支持条件判断，循环及异常
AngularJS 表达式支持过滤器

<body>
    <div ng-app="" ng-init="firstName='Steve';lastName='Jobs'">
        <p>姓名: {{ firstName + " " + lastName }}</p>
    </div>
</body>

<!-- 网页显示内容：
    姓名: Steve Jobs
-->

4、AngularJS 模型

（1）数据绑定

ng-model 指令可以将输入域的数据与 AngularJS 创建的变量 双向绑定 起来

<body>
    <div ng-app="myApp" ng-controller="myController">
        输入值: <input ng-model="value">
        <p>变量值: {{value}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.value = "Hello";
        });
    </script>
</body>

（2）类型验证

ng-show 指令可以验证用户输入是否合法（number、email、required）

只有在 ng-show 属性返回 true 的情况下才显示提示信息

<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText">
        <p ng-show="myForm.myEmail.$error.email">输入的邮箱地址不合法</p>
    </form>
</body>

（3）应用状态

ng-model 指令可以为应用数据提供状态值（invalid、dirty、touched、error）

valid：若输入值合法则为 true
dirty：若输入值改变则为 true
touched：若有点击则为 true
error：若输入值不合法则为 true

<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText" required>
        <h1>状态</h1>
        <p>Valid: {{myForm.myEmail.$valid}}</p>
        <p>Dirty: {{myForm.myEmail.$dirty}}</p>
        <p>Touched: {{myForm.myEmail.$touched}}</p>
        <p>Error: {{myForm.myEmail.$error.email}}</p>
    </form>
</body>

（4）提供 CSS 类

ng-model 指令基于表单域的状态为 HTML 元素提供了 CSS 类，常见的表单域状态如下：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <style>
        input.ng-invalid { color: red; }
    </style>
</head>
<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myEmail" ng-model="myText" required>
    </form>
</body>

5、AngularJS 控制器

AngularJS 控制器（Controller）控制 AngularJS 应用程序的数据，它是常规的 JavaScript 对象

ng-controller 指令用于定义应用程序控制器，控制器不仅有属性，而且有方法

<body>
    <div ng-app="myApp" ng-controller="myController">
        名:  <input type="text" ng-model="firstName"><br />
        姓:  <input type="text" ng-model="lastName"><br />
        姓名: {{getName()}}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.firstName = "Steve";
            $scope.lastName = "Jobs";
            $scope.getName = function() {
                return $scope.firstName + " " + $scope.lastName;
            }
        });
    </script>
</body>

在大型应用程序中，通常把控制器存储在 外部文件 中

此时，只需要把原来 <script> 标签中的内容储存到文件中，然后通过 src 属性引用文件即可

<script src="fileName.js"></script>

6、AngularJS 作用域

AngularJS 作用域（Scope）是应用在 HTML (视图) 和 JavaScript (控制器) 之间的纽带

它用来保存 AngularJS Model 的对象，有可用的方法和属性

当创建控制器时，可以将 $scope 对象作为参数传入，此时，视图就可以获取这些方法和属性

在视图中，不需要添加 $scope 前缀，只需要添加属性名即可

<body>
    <div ng-app="myApp" ng-controller="myController">
        <input ng-model="name">
        <p>{{greeting}}</p>
        <button ng-click='sayHello()'>点我</button>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.name = "Steve";
            $scope.sayHello = function() {
                $scope.greeting = 'Hello, ' + $scope.name;
            };
        });
    </script>
</body>

所有应用都有一个 根作用域 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中

它是各个控制器中的作用域的桥梁，使用 rootscope 定义的值，可以在各个控制器中使用

<body>
    <div ng-app="myApp" ng-controller="myController">
        <h1>{{fruit}}</h1>
        <ul>
            <li ng-repeat="x in fruits">{{x}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope, $rootScope) {
            $scope.fruits = ["Apple", "Banana", "Cherry"];
            $rootScope.fruit = "Fruits";
        });
    </script>
</body>

7、AngularJS 过滤器

AngularJS 过滤器可以使用一个管道字符（|）添加到表达式和指令中，用于转换数据

常见的过滤器有：

currency：格式化数字为货币格式
lowercase：格式化字符串为小写
uppercase：格式化字符串为大写
orderBy：根据指定表达式排列数组
filter：从数组中选择一个子集

（1）在表达式中添加过滤器

<body>
    <div ng-app="myApp" ng-controller="myController">
        <h2>价格计算器</h2>
        <p>数量: <input type="number" ng-model="quantity"></p>
        <p>价格: <input type="number" ng-model="price"></p>
        <p>总价: {{ (quantity * price) | currency }}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.quantity = 1;
            $scope.price = 5;
        });
    </script>
</body>

（2）在指令中添加过滤器

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>循环对象:</p>
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
            {{ x.name + ', ' + x.country }}
            </li>
        </ul>
    </div>
    <script>
        app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.names = [
                {name:'Rain',country:' England'},
                {name:'Steve',country:'England'},
                {name:'Tami',country:'America'}
            ];
        });
    </script>
</body>

（3）自定义过滤器

下面的例子自定义一个过滤器 reverse，用于反转字符串

<body>
    <div ng-app="myApp" ng-controller="myController">
        正常: <input ng-model="string"></p>
        反转: {{ string | reverse }}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.string = "abcdefg";
        });
        app.filter('reverse', function() {
            return function(text) {
                return text.split("").reverse().join("");
            }
        });
    </script>
</body>

8、AngularJS 服务

AngularJS 服务（Service）是一个函数或者对象，很多服务都可以使用 DOM 中存在的对象

AngularJS 内建 30 多个服务，同时也允许自定义服务

（1）内建服务

$http：核心服务，用于读取远程服务器上的数据

// 简单的 GET/POST 请求如下：
$http({
    method: 'GET/POST',
    url: 'URL'
}).then(function successCallback(response) {
        // 请求成功时执行的代码
    }, function errorCallback(response) {
        // 请求失败时执行的代码
});

// 简写如下：
$http.get('URL', config).then(successCallback, errorCallback);
$http.post('URL', data, config).then(successCallback, errorCallback);

$location：返回当前页面的 URL，它作为参数传递给控制器

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{myUrl}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope, $location) {
        $scope.myUrl = $location.absUrl();
    });
    </script>
</body>

$timeout：对应 JavaScript 中的 window.setTimeout 函数，按照指定的时间来调用函数

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{greeting}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope, $timeout) {
        $scope.greeting = "Hello World!";
        $timeout(function() {
            $scope.greeting = "Hello AngularJS!";
        }, 2000);
    });
    </script>
</body>

$interval：对应 JavaScript 中的 window.setInterval 函数，按照指定的周期来调用函数

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>{{time}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope, $interval) {
            $scope.time = new Date().toLocaleTimeString();
            $interval(function() {
                $scope.time = new Date().toLocaleTimeString();
            }, 1000);
        });
    </script>
</body>

（2）自定义服务

可以使用 .service 添加自定义指令

<body>
    <div ng-app="myApp" ng-controller="myController">
        <p>10进制下的255 = 16进制下的{{hex}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.service('toHex', function() {
            this.myFunc = function(x) {
                return x.toString(16);
            }
        });
        app.controller('myController', function($scope, toHex) {
            $scope.hex = toHex.myFunc(255);
        });
    </script>
</body>

当创建自定义服务后，可以在控制器，指令，过滤器或者其它服务中使用

9、AngularJS 表格

可以通过 ng-repeat 指令创建一个表格

<body>
    <div ng-app="myApp" ng-controller="myController">
        <table>
            <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.names = {
                Rain: {Name:'Rain', Country:' England'},
                Steve: {Name:'Steve', Country:'England'},
                Tami: {Name:'Tami', Country:'America'}
            }
        });
    </script>
</body>

可以通过 $index 服务让表格显示序号

<table>
    <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}</td>
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
    </tr>
</table>

可以通过 $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>

10、AngularJS 表单

AngularJS 表单是输入控件的集合，包括 input 元素、select 元素、button 元素、textarea 元素

（1）单选框

使用 input 元素指定 type 属性为 radio 可以创建单选框

ng-model 指令可以双向绑定数据

ng-switch 指令可以根据选择结果显示或隐藏 HTML 区域

<body ng-app="">
    <form>
        请选择一个选项:
        <input type="radio" ng-model="myVar" value="dogs">Dogs
        <input type="radio" ng-model="myVar" value="cars">Cars
        <input type="radio" ng-model="myVar" value="tuts">Tutorials
    </form>
    <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
        </div>
    </div>
</body>

（2）复选框

使用 input 元素指定 type 属性为 checkbox 可以创建复选框

ng-model 指令可以双向绑定数据

ng-show 指令 / ng-hide 指令可以根据选择结果隐藏或显示 HTML 元素

<body>
    <div ng-app="">
        <form>
            选中复选框，显示标题:
            <input type="checkbox" ng-model="myVar">
        </form>
        <h1 ng-show="myVar">My Header</h1>
    </div>
</body>

（3）文本框

使用 input 元素指定 type 属性为 text 可以创建单行文本框

使用 textarea 元素可以创建多行文本框

ng-model 指令可以双向绑定数据

ng-init 指令可以为数据设置初始值

<body>
    <div ng-app="" ng-init = "firstName='Steve'; lastName='Jobs'">
        <form>
            First Name: <input type="text" ng-model="firstName"><br />
            Last Name: <input type="text" ng-model="lastName"><br />
        </form>
    </div>
</body>

（4）按钮

使用 input 元素指定 type 属性为 button 可以创建按钮

使用 button 元素可以创建按钮

ng-model 指令可以双向绑定数据

ng-click 指令可以定义点击按钮后发生的动作

<body>
    <div ng-app="myApp" ng-controller="myController">
        <button ng-click="set()"> 点我 </button>
        <p>{{value}}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.value = "点击按钮前出现的文本";
            $scope.set = function() {
                $scope.value = "点击按钮后出现的文本";
            };
        });
    </script>
</body>

（5）下拉列表

使用 select 元素可以创建下拉列表

ng-model 指令可以双向绑定数据

ng-option 指令可以创建下拉列表的列表项

<body>
    <div ng-app="myApp" ng-controller="myController">
        <select ng-model="myWeb" ng-options="x for x in webs"></select>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.webs = ["Google", "Baidu", "Bing"];
        });
    </script>
</body>

ng-repeat 指令也可以创建下拉列表的列表项

<body>
    <div ng-app="myApp" ng-controller="myController">
        <select>
            <option ng-repeat="x in webs">{{x}}</option>
        </select>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function($scope) {
            $scope.webs = ["Google", "Baidu", "Bing"];
        });
    </script>
</body>

它们之间的区别在于 ng-options 创建的选项是一个对象， ng-repeat 创建的选项是一个字符串

显然，ng-options 更适用于创建一个下拉列表的选项

11、AngularJS API

AngularJS 全局 API 是用于执行常见任务的 JavaScript 函数集合，使用 Angular 对象进行访问

lowercase()：转换字符串为小写，自 AngularJS 1.7 之后改为 $$lowercase()
uppercase()：转换字符串为大写，自 AngularJS 1.7 之后改为 $$uppercase()

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ x1 }}</p>
        <p>{{ x2 }}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.x1 = "hello";
            $scope.x2 = angular.$$uppercase($scope.x1);
        });
    </script>
</body>

<!-- 网页显示内容：
    hello
    HELLO
-->

isString()：判断给定的对象是否为字符串
isNumber()：判断给定的对象是否为数字

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{ x1 }}</p>
        <p>{{ x2 }}</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.x1 = "hello";
            $scope.x2 = angular.isNumber($scope.x1);
        });
    </script>
</body>

<!-- 网页显示内容：
    hello
    false
-->

12、AngularJS 包含

在 AngularJS 中，可以在 HTML 中包含 HTML 文件，主要有 服务端包含 和 客户端包含 两种方式

我们通常使用 HTTP 请求从服务端获取数据，然后将数据写入到客户端（AJAX）

可以使用 ng-include 指令包含 HTML 文件或者 AngularJS 代码

<body ng-app="">
    <div ng-include="'fileName.htm'"></div>
</body>

默认情况下， ng-include 指令不允许跨域包含

13、AngularJS 样式

AngularJS 首选的样式表是 Bootstrap，它可通过 <link> 标签添加到 HTML 页面，<link> 标签可以放置在 <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">

13、AngularJS 动画

AngularJS 提供动画效果，可以配合 CSS 使用，它需要引入库 angular-animate.min.js

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需要在应用中使用模型 ngAnimate，可以在设置应用名时，同时添加 ngAnimate 模型

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

实际上，ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，如果事件发生，ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画

AngularJS 添加/移除 class 的指令:

ng-repeat
ng-show
ng-hide
ng-switch
ng-if
ng-view
ng-class
ng-include

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
        <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
        <style>
            div {
              transition: all linear 0.5s;
              background-color: lightblue;
              height: 100px;
              width: 100%;
              position: relative;
              top: 0;
              left: 0;
            }
            .ng-hide {
              background-color: transparent;
              height: 0;
              width: 0;
              top:-200px;
              left: 200px;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <p>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></p>
        <div ng-hide="myCheck"></div>
        <script>
        var app = angular.module('myApp', ['ngAnimate']);
        </script>
    </body>
</html>

14、AngularJS 依赖注入

依赖注入（Dependency Injection，DI）是一种软件设计模式

在这种模式下，一个或更多的依赖（或服务）被注入（或通过引用传递）到一个独立的对象（或客户端）中，然后成为客户端状态的一部分

AngularJS 提供 5 个核心组件用来作为依赖注入

value：是一个对象，用于向控制器传递值
factory：是一个函数，用于返回值
service：是一个函数或者对象

<body>
    <div ng-app = "myApp" ng-controller = "myCtrl">
        <p>输入数字: <input type = "number" ng-model = "number" /></p>
        <button ng-click = "square()">计算平方</button>
        <p>得到结果: {{result}}</p>
    </div>
    <script>
        var app = angular.module("myApp", []);

        // 创建 value 对象 "defaultInput"，用于传递数据
        app.value("defaultInput", 5);

        // 创建 factory 函数 "MathService"，用于两数乘积
        app.factory('MathService', function() {
           var factory = {};
           factory.multiply = function(a, b) {
              return a * b
           }
           return factory;
        }); 

        // 将 factory 函数 "MathService" 注入到 service
        // 创建 service 服务 "CalcService"，用于计算平方
        app.service('CalcService', function(MathService) {
            this.square = function(a) {
                return MathService.multiply(a,a);
            }
        });

        // 将 value 对象 "defaultInput" 注入到 controller
        // 将 service 服务 "CalcService" 注入到 controller
        app.controller('myCtrl', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);
            $scope.square = function() {
                $scope.result = CalcService.square($scope.number);
            }
        });
    </script>
</body>

provider：提供一个方法 get()，用于返回 value/factory/service

app.config(function($provide) {
    $provide.provider('MathService', function() {
        this.$get = function() {
            var factory = {};
            factory.multiply = function(a, b) {
                return a * b;
            }
            return factory;
        };
    });
});

constant：用于在配置阶段传递数值，注意这个常量在配置阶段是不可用的

15、AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容，它需要引入库 angular-route.min.js

<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>

还需要在应用中使用模型 ngRoute，可以在设置应用名时，同时添加 ngRoute 模型

<script>
var app = angular.module('myApp', ['ngRoute']);
</script>

AngularJS 可以通过 #! 标记，实现多视图 (不同的页面内容) 单页 (同一个请求地址) Web 应用

考虑以下两个 URL：http://example.com/#!/first、http://example.com/#!/second

事实上，无论我们点击哪一个链接时，向服务端请求的地址都是一样的 http://example.com

#! 后面内容在发送请求时会被浏览器忽略，所以我们需要在客户端实现 #! 后面内容的功能实现

AngularJS 路由通过 #! 帮助我们区分不同的逻辑页面，并将不同的页面绑定到对应的控制器上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
        <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
    </head>
    <body ng-app='myApp'>
        <h1>AngularJS 路由应用</h1>
        <ul>
            <li><a href="#!/">首页</a></li>
            <li><a href="#!/about">关于</a></li>
            <li><a href="#!/archives">归档</a></li>
            <li><a href="#!/categories">分类</a></li>
            <li><a href="#!/tags">标签</a></li>
            <li><a href="#!/other">其它</a></li>
        </ul>
        <div ng-view></div>
        <script>
            app = angular.module('myApp',['ngRoute']);
            app.config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/about',{template:'这是关于页面'})
                .when('/archives',{template:'这是归档页面'})
                .when('/categories',{template:'这是分类页面'})
                .when('/tags',{template:'这是标签页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
    </body>
</html>

ngView 指令可以根据路由的变化改变 HTML 内容

config 函数可以用于配置路由规则

把 $routeProvider 注入配置函数，并使用 when(path,object) 和 otherwise(object) 函数

参数 path 定义 URL 规则；参数 object 定义 路由配置对象

路由配置对象的语法规则如下：

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

template：如果只需在 ng-view 中插入简单的 HTML 内容，则使用该参数
templateUrl：如果需要在 ng-view 中插入 HTML 模板文件，则使用该参数
controller：在当前模板上执行的 controller 函数，生成新的 scope
controllerAs：指定当前 controller 别名
redirectTo：指定重定向的地址
resolve：指定当前 controller 所依赖的其他模块

参考资料：

http://www.angularjs.net.cn/tutorial/

http://www.runoob.com/angularjs/angularjs-tutorial.html

https://www.w3cschool.cn/angularjs/