学习AngularJS这一篇就够了

最新推荐文章于 2024-07-11 15:59:35 发布
最新推荐文章于 2024-07-11 15:59:35 发布
阅读量3.2k 收藏 88
点赞数 35
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38490457/article/details/109729769
版权

目录

配套资料，免费下载
链接：https://pan.baidu.com/s/1rbw78rR-VlkTyfkg2m6w3g
提取码：oz8a
复制这段内容后打开百度网盘手机App，操作更方便哦

第一章 AngularJS简介

1.1、AngularJS简介

AngularJS诞生于2009年，由Misko Hevery等人创建，后被Google所收购。AngularJS是一款优秀的前端JavaScript框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定和依赖注入等等。AngularJS框架是为了克服HTML语言在构建App上天生的不足而设计的。AngularJS框架的内容非常庞大，涉及到WEB应用架构的各个方面。我们在这里学习的1.x版本，目的主要是为了改变我们的思想，由传统的页面开发转变为模块化App应用开发。

1.2、AngularJS版本介绍

随着Angular版本的频繁推出，有必要了解下AngularJS、 Angular 2的区别。我们常说的Angular 1是指AngularJS，从Angular 2开始已经改名了，不再带有JS，只是单纯的Angular。Angular JS是一个典型的MVC架构（Model View Controller），而Angular 2是一个典型的基于组件架构（Component），从这一点上来说，它与 React.JS 结构相似。目前官方已将Angular 2和之前的版本AngularJS分开维护，所以说AngularJS和Angular 2是两个完全不一样的框架，基本上来说Angular 2以后的版本大多相似，目前Angular的最新版本为Angular 10，而AngularJS的最新版本为1.8.2，我们本教程所使用的也就是最新版本1.8.2，由于官方地址打开速度太慢，相对应的依赖文件，我会打包放到配套资料中，如需要请自行下载。当然，你还有更多选择，那就是引入AngularJS CDN文件。

1.3、AngularJS官方地址

官方下载：点击访问

源码地址：点击访问

1.4、AngularJS代码体验

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>

<h1>{{msg}}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.title = 'AngularJS';
        $scope.msg = 'Hello,World';
    }]);
</script>
</body>
</html>

第二章 AngularJS方法

2.1、字符串大小写转换

var lowercase = angular.lowercase('Hello,World');
var uppercase = angular.uppercase('Hello,World');
console.log(lowercase);
console.log(uppercase);

image-20201115131424420

2.2、对象/数组深度拷贝

深度拷贝对象并判断：

// 创建一个对象
var obj = {
    name: 'zhangsan',
    age: 18,
    speak: function () {
        console.log(this.name);
    }
};

// 复制一个对象
var newObj = angular.copy(obj);
console.log(obj);
console.log(newObj);

// 判断是否相等
var flag = angular.equals(obj, newObj);
console.log(flag);

// 修改一个属性
obj.name = 'lisi';

// 再次判断相等
flag = angular.equals(obj, newObj);
console.log(flag);
console.log(obj);
console.log(newObj);

image-20201115132550360

深度拷贝数组并判断：

// 创建一个数组
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 复制一个数组
var newArr = angular.copy(arr);
console.log(arr);
console.log(newArr);

// 判断是否相等
var flag = angular.equals(arr, newArr);
console.log(flag);

// 修改一个数值
arr[0] = 100;

// 再次判断相等
flag = angular.equals(arr, newArr);
console.log(flag);
console.log(arr);
console.log(newArr);

image-20201115150551698

2.3、对象/数组迭代函数

对象迭代遍历：

// 创建一个对象
var obj = {
    name: 'zhangsan',
    age: 18,
    speak: function () { console.log(this.name); }
};

// 对象迭代遍历
angular.forEach(obj, function (data, index, object) {
    console.log(data, index, object);
});

image-20201115155403649

数组迭代遍历：

// 创建一个数组
var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90];

// 数组迭代遍历
angular.forEach(arr, function (data, index, array) {
    console.log(data, index, array);
});

image-20201115155520320

2.4、常见数据类型判断

var str = 'hello';
var num = 100;
var arr = [1, 2, 3];
var fun = function () {};
var date = new Date();
var obj = {};

console.log(angular.isString(str));//如果引用的是字符串返回 true
console.log(angular.isNumber(num));//如果引用的是数字返回 true
console.log(angular.isArray(arr));//如果引用的是数组返回 true
console.log(angular.isFunction(fun));//如果引用的是函数返回 true
console.log(angular.isDate(date));//如果引用的是日期返回 true
console.log(angular.isObject(obj));//如果引用的是对象返回 true
console.log(angular.isUndefined(obj));//如果引用的是未定义返回 true
console.log(angular.isDefined(obj));//如果引用的是已定义返回 true
console.log(angular.isElement(obj));//如果引用的是DOM元素返回 true

image-20201115160705285

2.5、序列化与反序列化

var person = '{"name":"zhangsan","age":"18"}';
var fromJson = angular.fromJson(person);//将json字符串转化为js对象
console.log(fromJson);
var toJson = angular.toJson(fromJson);//将js对象转化为json字符串
console.log(toJson);

image-20201115161255707

第三章 AngularJS指令

3.1、应用指令

3.1.1、ng-app

指令描述：AngularJS框架在使用的时候，除了需要引入框架文件之外，还需要为框架指明一个边界，告知框架在哪个范围内生效，这个时候我们就需要使用ng-app指令定义应用程序的根元素，习惯上写在html标签上，表示在当前页面中AngularJS都能正常使用。ng-app指令可以接收一个值，如果这个值为""，那么就不需要在script脚本中对应用初始化，一般来说，我们会指定这个值，这个值代表了当前正在开发应用的名称，一旦指定了这个值，就需要使用代码对当前应用进行初始化，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

angular.module方法详解：

  • 第一个参数：‘myapp’，对应ng-app中的值，代表了当前正在开发应用的名称，一般来说，这个应用名称在全局来看应该保持一致。
  • 第二个参数：[‘ngRoute’, ‘ngCookies’, ‘ngAnimate’]，由于AngularJS将功能进行了拆分，这一点从框架文件的引入就可以看出来，这就使得开发者可以按需加载自己所需要的模块，这三个模块从左到右依次为：路由、存储、动画，如果您不需要这三个模块，可以将上边的三个scrip引入删除，第二个参数值为空[]，但是，为了后边课程讲解的方便，我就把这三个模块提前导入了。

3.1.2、ng-init

指令描述：ng-init指令主要是在应用启动的时候，为AngularJS中的变量进行初始化，它还可以调用方法，以此来完成启动时，一些初始化功能的加载，ng-init指令并没有规定具体的摆放位置，但我们习惯上放在body标签上。ng-init指令中的变量不必写var，直接书写变量的名称和所对应的值即可，多个变量之间应该用;分割开来，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

要是想要把初始化的变量显示到页面中，我们可以使用{{ }}可获取，{{ }}中支持变量、字符串甚至表达式，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">

<h1>{{msg}}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

3.1.3、ng-bind

问题引入：前边我们讲了在页面中我们可以使用{{ }}来获取变量的值，但是它存在一个问题，如果AngularJS加载速度慢，在使用{{ }}获取变量显示到页面中的时候，会先出现{{title}}、{{msg}}这样的代码，然后才会显示我们变量中存储的值，它的效果如下：

1

显示的效果我们大家也都看到了，这个体验着实不是很好，那有没有办法解决这个问题呢？答案是有的，那就需要用到ng-bind指令了。

指令描述：ng-bind指令的作用就是能够将AngularJS中的变量绑定到想要显示的标签之上，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title ng-bind="title"></title>
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">

<h1 ng-bind="msg"></h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

3.1.4、ng-cloak

问题引入：前边我们说了使用{{ }}显示变量值会存在代码闪烁的问题，我们可以使用ng-bind指令来解决，但是我非要使用{{ }}来显示，并且不存在代码闪烁，那有没有办法解决这个问题呢？答案是有的，那就需要用到ng-cloak指令了。

指令描述：防止使用{{ }}的时候出现代码闪烁的问题，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title ng-cloak>{{title}}</title>
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">

<h1 ng-cloak>{{msg}}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

2

3.1.5、ng-non-bindable

问题引入：前边我们讲过了{{ }}可以获取变量的值，那万一<p>{{ 5 + 5 }}</p>这个p标签中的数据就是{{ 5 + 5 }}而不是经过计算后的10，也就是让p标签里边的{{ }}失效，那有没有办法解决这个问题呢？答案是有的，那就需要用到ng-non-bindable指令了。

指令描述：规定元素或子元素不能绑定数据，如<p ng-non-bindable></p>不使用 AngularJS，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<h1 ng-non-bindable>{{ 5 + 5 }}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

image-20201116090939642

3.2、数据绑定指令

3.2.1、ng-model

问题引入：前边我们讲了ng-init指令，它可以用来初始化变量，现在我想要把文本框的值绑定到一个变量中，那有没有办法解决这个问题呢？答案是有的，那就需要用到ng-model指令了。

指令描述：AngularJS框架规定ng-model指令用来对input或textarea这类用于收集用户信息的标签进行数据绑定，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title ng-cloak>{{title}}</title>
</head>
<body ng-init="title='AngularJS'">

<input type="text" ng-model="message">
<p ng-bind="message"></p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

3

3.3、控制器指令

3.3.1、ng-controller

指令描述：ng-controller指令用来在页面中声明哪一个元素为控制器，使用了ng-controller指令就必须要在script标签中对控制器进行初始化，控制器主要是用来操作数据和视图，我们可以在控制器内部直接定义或修改变量，还可以定义方法等等，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title ng-bind="title"></title>
</head>
<body>

<h1 ng-bind="msg"></h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.title = 'AngularJS';
        $scope.msg = 'Hello,World';
    }]);
</script>
</body>
</html>

image-20201115195229478

*.controller方法详解：

  • 第一个参数：‘mainController’，对应ng-controller中的值，代表当前需要控制的是页面中的哪个控制器。
  • 第二个参数：[服务列表, function (服务列表) { }]，服务列表表示的是，在控制器中我们可以注入一些常用的服务，比如：$scope、$rootScope，$location，$http，$timeout，$interval以及我们自定义的服务等等，在这里我们先了解即可，后边会有专门的章节来介绍服务。而function(服务列表)函数，则代表操作数据和视图是在这个函数中进行的。

这里要注意一下，一个页面中，可以存在多个控制器，也就是说，我们可以把一个页面拆分为不同的模块，每一个模块都由一个专门的控制器来操作每个模块内的数据和视图，而且模块之间可以存在同名的变量，防止了变量名称冲突，这样的模块化开发是非常有利于我们团队合作开发的，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller">
    <h1 ng-bind="msg"></h1>
</div>

<div ng-controller="div2Controller">
    <h1 ng-bind="msg"></h1>
</div>

<div ng-controller="div3Controller">
    <h1 ng-bind="msg"></h1>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('div1Controller', ['$scope', function ($scope) {
        $scope.msg = 'div1Controller ...';
    }]);
    myapp.controller('div2Controller', ['$scope', function ($scope) {
        $scope.msg = 'div2Controller ...';
    }]);
    myapp.controller('div3Controller', ['$scope', function ($scope) {
        $scope.msg = 'div3Controller ...';
    }]);
</script>
</body>
</html>

3.4、鼠标指令

3.4.1、ng-click

指令描述：当用户触发元素上的鼠标单击事件的时候响应。

案例演示：当按钮被单击的时候，弹出信息框，提示”按钮被单击了“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-click="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('按钮被单击了');
        };
    }]);
</script>
</body>
</html>

4

3.4.2、ng-dblclick

指令描述：当用户触发元素上的鼠标双击事件的时候响应。

案例演示：当按钮被双击的时候，弹出信息框，提示”按钮被双击了“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-dblclick="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('按钮被双击了');
        };
    }]);
</script>
</body>
</html>

5

3.4.3、ng-mousedown

指令描述：当用户触发元素上的鼠标左键按下事件的时候响应。

案例演示：当鼠标左键按下的时候，弹出信息框，提示”鼠标左键按下“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-mousedown="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('鼠标左键按下');
        };
    }]);
</script>
</body>
</html>

6

3.4.4、ng-mouseup

指令描述：当用户触发元素上的鼠标左键弹起事件的时候响应。

案例演示：当鼠标左键弹起的时候，弹出信息框，提示”鼠标左键弹起“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-mouseup="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('鼠标左键弹起');
        };
    }]);
</script>
</body>
</html>

7

3.4.5、ng-mouseenter

指令描述：当鼠标进入指定元素的时候触发。

案例演示：创建两个div，当鼠标进入最外层div的时候，控制台输出“mouse enter“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background: pink;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: coral;
        }
    </style>
</head>
<body>

<div class="outer" ng-mouseenter="showConsole()">
    <div class="inner"></div>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('mouse enter');
        };
    }]);
</script>
</body>
</html>

8

3.4.6、ng-mouseleave

指令描述：当鼠标离开指定元素的时候触发。

案例演示：创建两个div，当鼠标离开最外层div的时候，控制台输出“mouse leave“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background: pink;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: coral;
        }
    </style>
</head>
<body>

<div class="outer" ng-mouseleave="showConsole()">
    <div class="inner"></div>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('mouse leave');
        };
    }]);
</script>
</body>
</html>

9

3.4.7、ng-mouseover

指令描述：当鼠标在指定元素上方的时候触发，包括在其子元素上方的时候也会触发。

案例演示：创建两个div，当鼠标在外层div上方的时候，控制台输出“mouse over“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background: pink;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: coral;
        }
    </style>
</head>
<body>

<div class="outer" ng-mouseover="showConsole()">
    <div class="inner"></div>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('mouse over');
        };
    }]);
</script>
</body>
</html>

10

3.4.8、ng-mousemove

指令描述：当鼠标在指定元素内移动的时候触发。

案例演示：创建一个div，当鼠标在div内移动的时候，控制台输出“mouse move“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer {
            width: 400px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>

<div class="outer" ng-mousemove="showConsole()"></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('mouse move');
        };
    }]);
</script>
</body>
</html>

15

3.5、键盘指令

3.5.1、ng-keypress

指令描述：当指定元素上的键盘按键时响应。

案例演示：创建一个文本框，当键盘按键时，输出文本框的内容到控制台

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keypress="showConsole()" ng-model="msg">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

16

3.5.2、ng-keydown

指令描述：当指定元素上的键盘按键按下时响应。

案例演示：创建一个文本框，当键盘按键按下时，输出文本框的内容到控制台

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keydown="showConsole()" ng-model="msg">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

16

3.5.3、ng-keyup

指令描述：当指定元素上的键盘按键松开时响应。

案例演示：创建一个文本框，当键盘按键松开时，输出文本框的内容到控制台

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keyup="showConsole()" ng-model="msg">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

17

3.6、表单指令

3.6.1、ng-focus

指令描述：当指定元素获取到焦点的时候触发。

案例演示：创建一个文本框，当文本框获取到焦点的时候，向控制台输出“文本框获取到焦点”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-focus="showConsole()">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框获取到焦点');
        };
    }]);
</script>
</body>
</html>

18

3.6.2、ng-blur

指令描述：当指定元素失去了焦点的时候触发。

案例演示：创建一个文本框，当文本框失去了焦点的时候，向控制台输出“文本框失去了焦点”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-blur="showConsole()">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框失去了焦点');
        };
    }]);
</script>
</body>
</html>

19

3.6.3、ng-change

指令描述：当指定元素的内容发生改变的时候触发。

案例演示：创建一个文本框，当文本框的内容发生改变的时候，向控制台输出“文本框内容改变了”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-change="showConsole()" ng-model="msg">
<p ng-bind="msg"></p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框内容改变了');
        };
    }]);
</script>
</body>
</html>

20

3.6.4、ng-copy

指令描述：当指定元素被复制的时候触发。

案例演示：创建一个文本框，当文本框的内容被复制的时候，向控制台输出“文本框内容被复制了”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-copy="showConsole()" value="123456">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框内容被复制了');
        };
    }]);
</script>
</body>
</html>

21

3.6.5、ng-cut

指令描述：当指定元素被剪切的时候触发。

案例演示：创建一个文本框，当文本框的内容被剪切的时候，向控制台输出“文本框内容被剪切了”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-cut="showConsole()" value="123456">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框内容被剪切了');
        };
    }]);
</script>
</body>
</html>

22

3.6.6、ng-paste

指令描述：当指定元素被粘贴的时候触发。

案例演示：创建一个文本框，当文本框的内容被粘贴的时候，向控制台输出“文本框内容被粘贴了”

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-paste="showConsole()" value="123456">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log('文本框内容被粘贴了');
        };
    }]);
</script>
</body>
</html>

23

3.6.7、ng-submit

指令描述：当表单被提交的时候触发。

案例演示：当表单被提交的时候，弹出提示框，提示”表单被提交了“

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form action="#" ng-submit="showAlert()">
    <input type="text" name="username"><br>
    <input type="text" name="password"><br>
    <input type="submit">
</form>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('表单被提交了');
        };
    }]);
</script>
</body>
</html>

24

3.7、属性指令

3.7.1、ng-checked

指令描述：用于设置复选框(checkbox)或单选按钮(radio)的checked属性。

<input type="checkbox" ng-checked="true">

3.7.2、ng-selected

指令描述：用于设置下拉列表框的selected属性。

<select>
    <option>河北</option>
    <option ng-selected="true">天津</option>
    <option>上海</option>
</select>

3.7.3、ng-readonly

指令描述：用于设置文本框是否只读。

<input type="text" ng-readonly="true" value="123456">

3.7.4、ng-disabled

指令描述：用于设置表单控件是否禁用。

<input type="text" ng-disabled="true" value="123456">

3.7.5、ng-value

指令描述：用于设置文本框的值。

<input type="text" ng-value="123456">

3.7.6、ng-href

指令描述：用于设置a标签的href属性。

<a ng-href="https://www.baidu.com">打开百度，你就知道！</a>

3.7.7、ng-src

指令描述：用于设置img标签的src属性。

<img ng-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

3.7.8、ng-class

指令描述：用于设置标签的class属性。

.beauty {
    font-size: 16px;
    font-weight: bold;
    color: coral;
}

<p ng-class="{'beauty':true}">我是段落</p>

这里再给出几种不同的写法，根据项目的需求来进行选择：

div {
    width: 200px;
    margin-top: 20px;
}

.hot {
    color: red;
}

.active {
    border: 2px solid coral;
}

.title {
    background: blue;
}

<!--初始化变量-->
<body ng-init="isActive=true;isShow=false">

<!--写法一-->
<div ng-class="{'hot active': isActive, 'title': !isActive}">商品标题</div>

<!--写法二-->
<div ng-class="{'hot active': true, 'title': isActive}">商品标题</div>

<!--写法三-->
<div ng-class="{true: 'hot active', false: 'title'}[true]">商品标题</div>

<!--写法四-->
<div ng-class="isShow?'hot active':'title'">商品标题</div>

image-20201115221633702

3.7.9、ng-style

指令描述：用于设置标签的style属性。

<p ng-style='{"color": "white", "background": "coral", "font-size": "20px"}'>我是段落</p>

image-20201115232815535

3.8、循环指令

3.8.1、ng-repeat

指令描述：定义集合中每项数据的模板，例如：<option ng-repeat="x in list track by $index">{{x}}</option>

案例演示1：把用户列表循环显示到页面表格中

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

image-20201115225414168

案例演示2：把用户列表循环显示到页面表格中，并使用$even和$odd实现隔行换色

$even：只在下标为偶数的时候为 true
$odd：只在下标为奇数的时候为 true

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text-info {background: cornflowerblue;}
        .text-danger {background: red;}
    </style>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr ng-class="{'text-info': $even, 'text-danger': $odd }" ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

image-20201115225708915

案例演示3：把用户列表循环显示到页面表格中，并使用ng-class-even和ng-class-odd实现隔行换色

ng-class-even:类似 ng-class，但只在偶数行起作用，常用table/tr/td、ul/li等元素配合使用
ng-class-odd:类似 ng-class，但只在奇数行起作用，常用table/tr/td、ul/li等元素配合使用

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text-info {background: cornflowerblue;}
        .text-danger {background: red;}
    </style>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr ng-class-even="'text-info'" ng-class-odd="'text-danger'" ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

image-20201115230123562

3.8.2、ng-options

指令描述：用于循环生成select下拉选择框中的option。

案例演示1：环生成select下拉选择框中的option，要求被循环的对象是一个基本类型数组

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select ng-model="selectedValue" ng-options="item for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
    }]);
</script>
</body>
</html>

image-20201116083107815

案例演示2：环生成select下拉选择框中的option，要求被循环的对象是一个键值对象数组

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select ng-model="selectedValue" ng-options="item.index as item.name for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = [
            {index: 0, name: 'Emil'},
            {index: 1, name: 'Tobias'},
            {index: 2, name: 'Linus'}
        ];
    }]);
</script>
</body>
</html>

image-20201116083249637

案例演示3：环生成select下拉选择框中的option，要求被循环的对象是一个键值对象数组，并且要求按照其group字段进行分组

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select ng-model="selectedValue" ng-options="item.index as item.name group by item.group for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = [
            {index: 0, name: 'Emil', group: 'english'},
            {index: 1, name: 'Tobias', group: 'english'},
            {index: 2, name: 'Linus', group: 'english'},
            {index: 3, name: 'zhangsan', group: 'chinese'},
            {index: 4, name: 'lisi', group: 'chinese'},
            {index: 5, name: 'wangwu', group: 'chinese'}
        ];
    }]);
</script>
</body>
</html>

image-20201116085008790

ng-options有以下格式的语法，仅供参考：

数据来自于数组：

  • label for value in array
  • select as label for value in array
  • label group by group for value in array
  • select as label group by group for value in array track by trackexpr

数据来自于对象：

  • label for (key , value) in object
  • select as label for (key , value) in object
  • label group by group for (key, value) in object
  • select as label group by group for (key, value) in ob

3.9、显示指令

3.9.1、ng-hide

指令描述：隐藏或显示 HTML 元素，可设值为true|false。

<h1 ng-hide="true">我是标题</h1>

3.9.2、ng-show

指令描述：显示或隐藏 HTML 元素，可设值为true|false。

<h1 ng-show="true">我是标题</h1>

3.9.3、ng-open

指令描述：指定元素的 open 属性，可设值为true|false，常与details等具展开效果的元素配合使用。

<details ng-open="true">
    <summary>我是summary</summary>
    <p>我是p</p>
</details>

3.9.4、ng-if

指令描述：显示或移除 HTML 元素，可设值为true|false。

<div ng-if="true">我是div</div>

3.9.5、ng-switch

指令描述：ng-switch规定显示或隐藏子元素的条件，常与ng-switch-when配合使用，类似于switch和case。

<select ng-model="mySelect">
    <option value="baidu">百度</option>
    <option value="google">谷歌</option>
    <option value="taobao">淘宝</option>
</select>
<div ng-switch="mySelect">
    <div ng-switch-when="baidu">
        <h1>百度</h1>
        <p>欢迎访问百度</p>
    </div>
    <div ng-switch-when="google">
        <h1>谷歌</h1>
        <p>欢迎访问谷歌</p>
    </div>
    <div ng-switch-when="taobao">
        <h1>淘宝</h1>
        <p>欢迎访问淘宝</p>
    </div>
    <div ng-switch-default>
        <h1>切换</h1>
        <p>选择不同选项显示对应的值。</p>
    </div>
</div>

3.10、包含指令

3.10.1、ng-include

指令描述：在应用中包含 HTML 文件，但不能执行引入文件中的JavaScript代码。

<div ng-include="'myFile.html'"></div>

3.11、自定义指令

语法格式：

myapp.directive('指令名称', function () {
    return {
        restrict: '指令类型',
        template: '指令结构',
        replace: '指令复写',
        scope: '新作用域',
        link: function (scope, element, attrs) {
            // 当前自定义指令的行为代码请写在这里...
        }
    }
});

参数解读：

  • 指令名称：
    • 指令名称必须采用小写，任何大写都会导致无效。如果是M类型，则replace字段就是必须写的，并且必须设置为true才能生效。
  • 指令类型：
    • “A”，指的是attribute，意味着指令需要通过属性的方式使用，例如：<div my-directive=”exp”></div>
    • “E”，指的是element，意味着指令需要通过元素的方式使用，例如：<my-directive></my-directive>
    • “C”，指的是class，意味着指令需要通过类名的方式使用，例如：<div class=”my-directive:exp;”></div>
    • “M”，指的是comment，意味着指令需要通过注释的方式使用，例如：<!-- directive: my-directive exp -->
  • 指令结构：
    • 指令结构template指的是指令在页面中能够显示的html结构，如果需要从外部文件中加载指令的结构，则需要写成templateUrl。
  • 指令复写：
    • 指令复写指的是指令当在页面中存在时，是否会被当做是一个子元素添加到当前所在的元素内，如果设置为true，那么模版将会替换当前元素，而不是作为子元素添加到当前元素中。（注意：为true时，模版必须有一个根节点）
  • 新作用域：
    • 如果设置为true，将为这个directive创建一个新的scope。如果在同一个元素中有多个directive需要新的scope的话，它还是只会创建一个scope。新的作用域规则不适用于根模版，因此根模版往往会获得一个新的scope。
    • 如果设置为{}，将创建一个新的、独立的scope。它与一般的scope的区别在于它不是通过原型继承于父scope的。这对于创建可复用的组件是很有帮助的，可以有效防止读取或者修改父级scope的数据。
  • link： 专门为自定义指令提供了一个用来编写对应脚本的区域。
    • scope：如果将整个指令看作是一个controller，那么scope的作用等价于$scope，在指令内部，需要对scope进行初始化，如果不进行初始化操作，那么scope默认为当前Controller中的​$scope。
    • element：一个包含了指令中所有页面元素的数组，每一个元素都是一个DOM对象，数组整体支持jQuery操作，而数组元素本身支持JavaScript原生操作。
    • attrs：当前指令的属性集合，用来获取元素的属性。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div mydirective></div>
<mydirective></mydirective>
<div class="mydirective"></div>
<!-- directive:mydirective -->

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    // 自定义指令
    myapp.directive('mydirective', function () {
        return {
            restrict: 'AECM',
            template: '<h1>{{msg}}</h1>',
            replace: true,
            scope: {},
            link: function (scope, element, attrs) {
                scope.msg = 'Hello,Directive';
            }
        }
    });
</script>
</body>
</html>

image-20201116102726878

第四章 AngularJS路由

4.1、路由介绍

AngularJS 路由允许我们在同一个页面中可以通过不同的 URL 访问不同的内容。也就是可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://mywebsite.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://mywebsite.com/#/first
http://mywebsite.com/#/second
http://mywebsite.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的（http://mywebsite.com/）。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 AngularJS 路由就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。所以，我们就需要在客户端实现 # 号后面内容的功能实现。

注意：注意 Angular1.6 之前的版本是通过 # + 标记 实现路由，而在 Angular1.6 及之后的版本是通过 #! + 标记 实现路由，为了解决版本不统一造成的路由不一致的问题，我们可以使用代码规定到底加不加!，$locationProvider.hashPrefix('');

4.2、路由使用

  1. 载入了实现路由的JavaScript文件：angular-route.js。

  2. 包含了 ngRoute 模块作为主应用模块的依赖模块。

    var myapp = angular.module('myapp',['ngRoute']);

  3. 使用 ngView 指令，该 div 内的 HTML 内容会根据路由的变化而变化。

    <div ng-view></div>

  4. 配置 $routeProvider， $routeProvider用来定义路由规则，$locationProvider用来解决版本差异带来的路由不一致问题。

    myapp.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('');

    $routeProvider
        .when('/', {template: '这是商城首页页面'})
        .when('/computers', {template: '这是电脑分类页面'})
        .when('/phones', {template: '这是手机分类页面'})
        .when('/books', {template: '这是图书分类页面'})
        .otherwise({redirectTo: '/'});
}]);

4.3、路由配置

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

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

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

参数说明：

  • template: 如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

    .when('/computers',{template:'这是电脑分类页面'})

  • templateUrl: 如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

  • controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

  • controllerAs: string类型，为controller指定别名。

  • redirectTo: 重定向的地址。

  • resolve: 指定当前controller所依赖的其他模块。

4.4、路由实战

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .viewNav {
            height: 50px;
        }

        .viewNav a {
            margin: 0;
            padding: 0;
            width: 150px;
            height: 50px;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            color: white;
            background: coral;
            text-decoration: none;
            float: left;
        }

        .viewNav a:hover {
            background: cornflowerblue;
        }
    </style>
</head>
<body>

<div class="viewNav">
    <a href="#/">商城首页</a>
    <a href="#/computers">电脑分类</a>
    <a href="#/phones">手机分类</a>
    <a href="#/books">图书分类</a>
</div>

<div ng-view></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('');

        $routeProvider
            .when('/', {template: '这是商城首页页面'})
            .when('/computers', {template: '这是电脑分类页面'})
            .when('/phones', {template: '这是手机分类页面'})
            .when('/books', {template: '这是图书分类页面'})
            .otherwise({redirectTo: '/'});
    }]);
</script>
</body>
</html>

27

第五章 AngularJS存储

5.1、存储介绍

本地存储是一个非常重要的功能，在AngularJS中，我们使用ngCookies来解决存储问题。

5.2、存储使用

  1. 载入了实现存储的JavaScript文件：angular-cookies.js。

  2. 包含了 ngCookies 模块作为主应用模块的依赖模块。

    var myapp = angular.module('myapp',['ngCookies']);

  3. 在controller中的使用。

    myapp.controller('mainController', ['$scope', '$cookies', function ($scope, $cookies) {
    // 在这里书写对cookie的操作
}]);

5.3、存储对象

$cookies提供了四个主要操作cookie的方法，这四个方法分别是：get、getAll、getObject、put、putObject、remove方法，分别对应cookie操作的获取、获取全部、获取对象、设置、设置对象、移除等操作。

5.4、存储实战

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', '$cookies', function ($scope, $cookies) {
        // 添加一个cookie（没有name这个cookie就是添加）
        $cookies.put('name', 'zhangsan');
        console.log($cookies.get('name'));

        // 查询所有cookie
        var cookies = $cookies.getAll();
        console.log(cookies);

        // 设置一个cookie（存在name这个cookie就是设置）
        $cookies.put('name', 'lisi');
        console.log($cookies.get('name'));

        // 移除一个cookie
        $cookies.remove('name');
        console.log($cookies.get('name'));

        // 设置带有过期时间的cookie，5秒后该cookie过期
        var time = new Date(new Date().getTime() + 5000);
        $cookies.put('age', '18', {expires: time});
        console.log($cookies.get('age'));

        // 创建一个对象并把它保存到cookie中
        var obj = {
            name: 'wangwu',
            age: 21,
            sex: '男'
        };
        $cookies.putObject('obj', obj);

        // 从cookie中把刚保存的对象读取出来
        console.log($cookies.getObject('obj'));
    }]);
</script>
</body>
</html>

image-20201116125241181

第六章 AngularJS动画

6.1、动画介绍

AngularJS 提供了动画效果，可以配合 CSS 使用，ngAnimate模块可以添加或移除 class 。ngAnimate模块本身并不能使 HTML 元素产生动画，但是ngAnimate模块会监听事件，如果有类似隐藏显示HTML元素的事件发生，如ngAnimate模块就会使用预定义的 class 来设置HTML元素的动画。那么支持这种方式定义动画的指令有哪些？如下所示：

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

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 transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，我们这里做的额外工作只是编写css文件。只编写样式就可以了？实际上，$animate服务本身支持几个内置的指令，比如ng-repeat，ng-show，ng-view等。而它的本质只是为其在视图变化期间添加了额外的CSS样式，仅此而已！

6.2、动画使用

  1. 载入了实现动画的JavaScript文件：angular-animate.js。

  2. 包含了 ngAnimate 模块作为主应用模块的依赖模块。

    var myapp = angular.module('myapp',['ngAnimate']);

  3. 根据业务需求，编写对应的样式类即可。

6.3、动画实战

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @keyframes myChange {
            from {
                height: 100px;
            }
            to {
                height: 0;
            }
        }

        div {
            height: 100px;
            background-color: lightblue;
        }

        div.ng-hide {
            animation: 1s myChange;
        }
    </style>
</head>
<body>

隐藏DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
</script>
</body>
</html>

28

为了让大家的体会更加深刻，我特意把angular-animate.js去掉，把注入的ngAnimate模块取消，让大家看看效果，对比一下！

29

第七章 AngularJS服务

7.1、服务介绍

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中直接使用，AngularJS 内建了30 多个服务。如常见的$scope、$rootScope，$location，$http，$timeout，$interval等。甚至我们可以自定义属于我们自己的服务，自定义服务的目的在于定义一些公共方法，实现便捷开发以及代码重用。自定义服务常用于在控制器中，除此之外，还能用在过滤器中。

7.2、作用域服务

7.2.1、$scope

服务描述：$scope是控制器级别的作用域服务，每一个控制器中都存在一个$scope，它们之间互不干扰，$scope的主要作用就是用来搭建HTML (视图)和 JavaScript (控制器)之间的桥梁，打个比方：我们在AngularJS中可以定义、添加以及修改一些变量，但是，我们要想在页面中显示出来，就必须先要把这些变量存放到$scope中，然后，页面在取的时候就会默认去当前控制器下的$scope里找。当你在 AngularJS 创建控制器时，你可以将$scope对象当作一个参数传递，这样在当前控制器控制的视图HTML (视图)里可以获取了$scope中所有的属性和方法，在视图中，你不需要添加$scope前缀，只需要写属性名即可，如： {{name}}。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
{{name}}

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.name = '我是mainController中添加的name';
    }]);
</script>
</body>
</html>

image-20201116154603840

7.2.2、$rootScope

服务描述：之前我们介绍了控制器级别的$scope作用域服务，但是，这种控制器级别的作用域并不跨控制器，现在大家试想一下，比如，我有两个控制器，我想在控制器1中处理数据，但是，我要把数据显示到控制器2所管理的视图中，我该怎么办，$scope好像就没有用了，这时候就需要到应用级的$rootScope作用域服务了，$rootScope作用域服务在每一个控制器中都能访问到。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller">
    <h3>div1Controller：{{name}}</h3>
</div>

<div ng-controller="div2Controller">
    <h3>div2Controller：{{name}}</h3>
</div>


<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('div1Controller', ['$scope', '$rootScope', function ($scope, $rootScope) {
        $rootScope.name = '我是div1Controller中添加的name';
    }]);

    myapp.controller('div2Controller', ['$scope', '$rootScope', function ($scope, $rootScope) {

    }]);
</script>
</body>
</html>

image-20201116161024932

7.3、监听服务

服务描述：$watch虽然我们称之为监听服务，但实际上这个服务并不需要我们主动注入，而是可以在任何时刻，在控制器中任何位置直接使用它。它的作用是监听任何想要监听的变量的值，并在这个值发生变化的时候回调。

语法描述：

$scope.$watch('想要监听的angular表达式或字符串', 回调函数);

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="checkbox" ng-model="isFlag">复选框

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.$watch('isFlag', function () {
            console.log('复选框的选择状态发生了改变，当前值：' + $scope.isFlag);
        });
    }]);
</script>
</body>
</html>

30

7.4、地址服务

服务描述：$location服务主要用于分析浏览器地址栏中的URL(基于window.location)，它让我们可以在应用中较为方便地使用URL。在地址栏中更改URL，会响应到$location服务中，而在$location中修改URL，也会响应到地址栏中。

常用方法：

  • $location.path(url); ：跳转到指定的地址

    $location.path('/foo');

  • $location.search(键值对对象/查询参数字符串); ：用于指定?后边的参数

    $location.search({a: 'b', c: true});

  • $location.path(url).search(键值对对象/查询参数字符串); ：跳转到指定地址，并且指定查询参数

    $location.path('/new').search('x=y');

  • $location.absUrl()：获取浏览器当前页面的完整地址

    http://localhost:63342/AngularJS/index.html?_ijt=q9u768msa5j4b9iu4j2ckj1927

7.5、过滤服务

7.5.1、内置的过滤服务

$filter服务在AngularJS框架中是对数据进行转换显示的一种小工具，使用本服务能够让页面中的显示内容呈现为不一样的结构，$filter虽然是系统服务，但是支持自定义内容，在$filter服务中共计提供了五种内置过滤器服务。

7.5.1.1、currency

服务介绍：该服务可在页面中直接使用，不需要额外的注入操作，它的作用是用于将内容转换为货币格式，默认转换为美元格式。

案例演示：

<span>手机价格：{{5799 | currency:'￥'}}</span>

image-20201116171854833

7.5.1.2、lowercase

服务介绍：该服务可在页面中直接使用，不需要额外的注入操作，它的作用是用于将内容转换为小写格式，只支持英文单词。

案例演示：

<h2>{{'hello WORLD! 你好世界! がぃい' | lowercase}}</h2>

image-20201116172126116

7.5.1.3、uppercase

服务介绍：该服务可在页面中直接使用，不需要额外的注入操作，它的作用是用于将内容转换为大写格式，只支持英文单词。

案例演示：

<h2>{{'hello WORLD! 你好世界! がぃい' | uppercase}}</h2>

image-20201116172136728

7.5.1.4、orderBy

服务介绍：该服务可在页面中直接使用，不需要额外的注入操作，用于根据表达式的值对显示的内容进行顺序排列，一般会用于ng-repeat结构中，并且repeat结构不是简单数据结构。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<ul>
    <li ng-repeat='info in infos | orderBy:"score"'>{{info.stuName+','+info.score}}</li>
</ul>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.infos = [
            {stuName: 'frank', score: 100},
            {stuName: 'lily', score: 105},
            {stuName: 'lucy', score: 92},
            {stuName: 'liLei', score: 3}
        ];
    }]);
</script>
</body>
</html>

image-20201116172720338

7.5.1.5、filter

服务介绍：该服务可在页面中直接使用，不需要额外的注入操作，用于从一个数组选项中筛选出符合要求的子集数组，类似于输入提示功能。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<span>展示符合要求的内容</span>
<input type="text" ng-model='filter_input'>
<ul>
    <li ng-repeat='pname in pnames | filter:filter_input'>{{pname}}</li>
</ul>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.filter_input = '';
        $scope.pnames = ['lily', 'lasa', 'lbsure', 'lczerbeila', 'lcbai', 'lilei', 'lihua'];
    }]);
</script>
</body>
</html>

31

7.5.2、自定义过滤服务

7.5.2.1、语法介绍

直接对app页面数据模型，通过.filter()方法进行扩展，即可在页面中直接使用，不需要额外的注入操作。

语法描述：

app.filter('自定义过滤服务名称', function (){
    return function (text){
        // ... 功能代码
    }
});
7.5.2.2、prefix
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>{{'人不吃饭就会饿' | prefix}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    // 自定义过滤服务，添加前缀
    myapp.filter('prefix', function () {
        return function (text) {
            return ('Frank Speaking : ').concat(text);
        };
    });
</script>
</body>
</html>

image-20201116173759788

7.5.2.3、suffix
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>{{'人不吃饭就会饿' | surfix}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    // 自定义过滤服务，添加后缀
    myapp.filter('surfix', function () {
        return function (text) {
            return text.concat(' ------by Frank');
        };
    });
</script>
</body>
</html>

image-20201116173612195

7.5.2.4、trustHtml
<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-init="title='<h1>我是受信任的HTML源码</h1>'">

<div ng-bind-html="title | trustHtml"></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    // 自定义过滤服务，信任HTML源码
    myapp.filter('trustHtml', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        }
    }]);
</script>
</body>
</html>

image-20201116181852879

7.6、网络服务

服务描述：$http是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

通用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
    // 请求成功执行代码
}, function errorCallback(response) {
    // 请求失败执行代码
});

简写格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

其它简写：

  • $http.get
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.head
  • $http.patch

在使用jsonp请求时，还需要为请求地址设置白名单才会请求成功：

//配置http访问的白名单，使用jsonp时用到
myapp.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self', //本域
        'http://voice.yoya.com/**' //跨域
    ]);
});

有时候服务端会要求$http请求会自带特定头信息，可通过下面代码实现：

var myapp = angular.module("myApp", ['ngRoute', 'ngCookies', 'ngAnimate'], function ($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
});

如果要实现文件上传，我们需要这样设置：

<input type="file" id="file">

var formData = new FormData();
formData.append("file", file.files[0]);
$http({
    method: 'POST',
    url: "/upload.do",
    data: formData,
    headers: {
        'Content-Type': undefined
    },
    transformRequest: angular.identity
}).then(function successCallback(response) {
    // 请求成功执行代码
}, function errorCallback(response) {
    // 请求失败执行代码
});

7.7、时间轴服务

7.7.1、$interval

服务介绍：间隔调用服务，每间隔一段时间调用一次。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
{{num}}

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('mainController', ['$scope', '$interval', function ($scope, $interval) {
        $scope.num = 1;

        //间隔调用服务
        var timer = $interval(function () {
            if ($scope.num >= 100) {
                /*清除时间轴服务*/
                $interval.cancel(timer);
            } else {
                $scope.num++;
            }
        }, 20);
    }]);
</script>
</body>
</html>

32

7.7.2、$timeout

服务名称：延迟调用服务，延迟一段时间后调用一次。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('mainController', ['$scope', '$timeout', function ($scope, $timeout) {
        //延迟调用服务
        var timerout = $timeout(function () {
            alert('调用完毕');
        }, 2000);
    }]);
</script>
</body>
</html>

33

7.8、控制器继承服务

服务描述：当多个控制器中存在大量相同或者重复的代码，我们可以把这些代码，单独抽成一个公共基础的控制器，然后分别在其他控制器中将这个公共基础的控制器中的$scope作用域分别复制到每一个注入后的控制器中，这样就实现了一种控制器继承的关系。

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{msg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{msg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.controller('baseController', function ($scope) {
        $scope.msg = '想不到吧，我是baseController';
    });

    myapp.controller('div1Controller', ['$scope', '$controller', function ($scope, $controller) {
        $controller('baseController', {
            $scope: $scope
        });
    }]);

    myapp.controller('div2Controller', ['$scope', '$controller', function ($scope, $controller) {
        $controller('baseController', {
            $scope: $scope
        });
    }]);
</script>
</body>
</html>

image-20201116204821759

7.9、自定义服务

系统服务是系统直接提供的，有不同的功能，angularJS中的服务实际上就是对app数据模型的扩展，从某种意义上可以理解为服务就是全局变量的含义，自定义服务需要手动编辑功能，但两者都需要注入之后才能使用，特殊的服务不需要注入，例如：$filter、$watch。自定义服务的方式常见有五种：value服务、constant服务、factory服务、service服务、provider服务，无论哪一种自定义服务，它们的目的基本都是一致的，就是提供一个全局变量，来支持Controller之间的交流。

7.9.1、value服务

服务描述：value服务是通过.value()方法对app数据模型进行扩展的一种服务定制方式，通过对app进行扩展，可以使得服务在controller之间进行信息交换，充当“全局变量”的角色，value服务实际上就是一个全局变量，所以，可以随意的对其内容进行读取和修改。

语法描述：

app.value('自定义服务名称', 服务内容JSON);

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{showMsg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{showMsg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.value('globalObj', {});

    myapp.controller('div1Controller', ['$scope', 'globalObj', function ($scope, globalObj) {
        globalObj.msg = 'div1Controller';
        $scope.showMsg = globalObj.msg;
    }]);

    myapp.controller('div2Controller', ['$scope', 'globalObj', function ($scope, globalObj) {
        $scope.showMsg = globalObj.msg;
    }]);
</script>
</body>
</html>

image-20201116201218123

7.9.2、constant服务

服务描述：constant服务可以认为从作用上完全等价于value服务，区别就是constant服务一旦被定制完成，那么在注入使用之前都是不能更改的，多次定制constant服务，只有第一个生效。

语法描述：

app.constant('自定义服务名称', 服务内容JSON);

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{showMsg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{showMsg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.constant('NameService', {
        name: 'Frank'
    });
    myapp.constant('NameService', {
        name: 'LiLei'
    });

    myapp.controller('div1Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
    }]);

    myapp.controller('div2Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
    }]);
</script>
</body>
</html>

image-20201116201835053

7.9.3、factory服务

服务描述：factory服务是通过.factory()方法去创建一个object结构并直接返回的操作。乍一看返回一个对象和直接value式提供一个对象并无区别，但是通过函数返回一个对象，那么这个对象的所有结构就都是在函数内完成，而函数内是可以对对象进行任意的操作和扩充的，但是在value式固定结构中却无法做到。

语法描述：

app.factory('自定义服务名称', function () {
    var obj = {};
    // ...
    return obj;
});

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{showMsg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{showMsg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.factory('NameService', function () {
        var obj = {};
        obj.name = 'Frank';
        obj.showName = function () {
            console.log(this.name);
        };
        return obj
    });

    myapp.controller('div1Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
        NameService.showName();
    }]);

    myapp.controller('div2Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
        NameService.showName();
    }]);
</script>
</body>
</html>

image-20201116202319239

7.9.4、service服务

服务描述：service服务相当于本身已经构建了一个空白对象，在服务内部所有内容的操作均通过this.来完成。这个自定义服务是我们今后使用最多的一个，请大家务必要注意！

语法描述：

app.service('自定义服务名称', function () {
    // ...
});

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{showMsg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{showMsg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.service('NameService', function () {
        this.name = 'Frank';
        var secret = '这是一个小秘密';
        //特权函数
        this.setSecret = function (tempSecret) {
            secret = tempSecret;
        }
        //特权函数
        this.getSecret = function () {
            return secret;
        };
    });

    myapp.controller('div1Controller', ['$scope', 'NameService', function ($scope, NameService) {
        NameService.setSecret('div1Controller的秘密');
        $scope.showMsg = NameService.name + ' : ' + NameService.getSecret();
    }]);

    myapp.controller('div2Controller', ['$scope', 'NameService', function ($scope, NameService) {
        NameService.setSecret('div2Controller的秘密');
        $scope.showMsg = NameService.name + ' : ' + NameService.getSecret();
    }]);
</script>
</body>
</html>

image-20201116202836562

7.8.5、provider服务

服务描述：provider服务通过.provider()方法添加，并在第二个参数的函数内通过this.$get = function (){…}的固定结构对服务内容进行扩充，provider服务只要被创建，就会直接添加到app当中，无论是否对controller进行注入，provider服务都会一直存在，其余四种自定义服务都不能做到这点。

语法描述：

app.provider('自定义服务名称', function (){
    // ...
    this.$get = function (){
        var obj = {};
        // ...
        return obj;
    }
});

案例演示：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller"><h1>{{showMsg}}</h1></div>
<div ng-controller="div2Controller"><h6>{{showMsg}}</h6></div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

    myapp.provider('NameService', function () {
        console.log('NameService provider initialized');
        this.$get = function () {
            var obj = {};
            obj.name = 'Frank';
            return obj;
        }
    });

    myapp.controller('div1Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
    }]);

    myapp.controller('div2Controller', ['$scope', 'NameService', function ($scope, NameService) {
        $scope.showMsg = NameService.name;
    }]);
</script>
</body>
</html>

image-20201116203739763

轻松的小希
关注
专栏目录
AngularJS学习总结
LimonSea的博客
10-26 665
最近一段时间的AngularJS学习终于告一段落了，虽然没有做什么实际的项目，但是因为写过微信小程序，总体感觉还是非常相似的。下面就让我对我这段时间的学习来一个总结吧！ 一、什么是AngularJS？ AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性...
Vue 3.0/Vue2.0快速学习方法，看我这一篇就够！！！
小北哥哥和北妈
01-12 7428
一 昨天分享了《5分钟看懂，2019年web前端新趋势》 这篇文章。 反响很不错，但我写完翻译完，发完才知道，有其他号也发了，我很佛了。 他们一看就是机翻，而我就不一样了，每段、每个知识点我都写了自己的评语和理解建议，只是部分是翻译，以防大家花费不必要的脑细胞，或许这就是我比较帅的原因吧。 废话不多说，昨天上百条留言，我都一一看完，其中大约占4成留言说的是：我学不动了、这个还没学完，又要学新...
学习AngularJS有这一篇就好了
qibulemingzi的博客
01-20 3999
一、AngularJS简介   AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 二、AngularJS四大特征 2.1 MVC模式   Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular.
AngularJS快速入门
最新发布
LG_971124的博客
07-11 992
记录angularJS1.0学习笔记
Angular.js学习-入门
csdnluolei
11-19 781
官方文档 https://angular.io/guide/quickstart 一、Angular.js是什么？ Angular.js是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。         AngularJS 是一个 JavaScript 框架。它是一个...
AngularJS学习
weiweismile123的博客
12-27 412
1、AngularJS四大特性：MVC 、模块化、双向数据绑定、指令系统。 （1）MVC：一个古老的框架，MVC开始是存在于桌面程序中的，M是指业务模型，V是指用户界面，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。比如一批统计数据可以分别用柱状图、饼图来表示。C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。 Mod
AngularJS 学习
Scfan的博客天涯
05-25 785
标签 ： web angularjs html 记录不怎么熟悉的语法 AngularJS 教程 AngularJS Scope(作用域) AngularJS 控制器 AngularJS 过滤器 过滤器 自定义过滤器 AngularJS 服务(Service) $location $http 服务 $timeout 服务 创建自定义服务 AngularJS XMLHttpRequest...
angular2入门，就这一篇就够了
01-27
AngularJS2，简称Angular2，是由Google维护的一款强大的开源JavaScript库，专为构建单一页面应用程序(SPA)设计。相较于其前身Angular1.x，Angular2进行了重大改进，性能大幅提升，并且全面支持Web开发组件。Angular2...
面试技巧 面试复盘 编程技术 架构 看这一篇就够了
china19931017的博客
11-25 2232
神经网路与深度学习 Kubernetes实战 大型网站性能监测、分析与优化 Flume日志收集与MapReduce模式 ZooKeeper：分布式过程协同技术详解 自己动手写Java虚拟机 Java WebSocket编程 开发、部署和保护动态Web应用 SpringBoot揭秘：快速构建微服务体系 Web全栈工程师的自我修养 Apache Spark源码剖析 Wireshark数据包分析实战详解 深入剖析Tomcat-网上版本不够清晰 故重做 Kafka技术内幕 图文详解Kafka
一篇对年轻程序员很有帮助的文章，共勉
lsz137105的专栏
02-25 245
我的公众号「码农之屋」(id: Spider1818)，分享的内容包括但不限于 Linux、网络、云计算虚拟化、容器Docker、OpenStack、Kubernetes、SDN、OVS、DPDK、Go、Python、C/C++编程技术等内容，欢迎大家关注。 0 题记 一转眼工作已有8年，前两天公司一位初入职场的同事希望我给一些建议与经验。我觉得这个话题很有价值，这里以个人的想...
史上最全前端学习路线图（视频+工具+书籍+资源）
Ahahaha___的博客
07-19 2012
所以下面我也为大家整理了！！
angularjs学习笔记
二枫的代码小窝
07-21 679
angularJS笔记
AngularJS
luzhangtong的博客
03-22 498
第一章 编写第一个AngularWeb应用 1.1 仿制Reddit网站项目 Reddit是建立在投票机制上的社交新闻平台，任何人都可以发布任何链接，划分不同板块，最多“赞”的链接将上升到页面的顶部。 这简单的应用涵盖Angular大部分基本要素，包括： 构建自定义组件 从表单中接收用户输入 把对象列表渲染到视图中 拦截用户的点击操作，并据此作出反应 1.2 准备 1.2.1 Ty...
AngularJS入门
hu1376586的博客
04-27 739
AngularJS的学习
AngularJS学习笔记(一)
weixin_30363981的博客
04-19 91
在刚开始接触AngularJS的时候，并不觉得有什么吸引我的地方，因为它奇怪的编码方式让我感觉陌生，然而与它接触一段时间后，我感觉我喜欢上了这种简洁，干净的编码方式，虽然目前理解的并不是很深入，。。。 AngularJS的原理 Angularjs 是google开源的一套web前端框架，它的优势在于它的五大特性：双向数据绑定(Two Way Data-Binding...
Angularjs 1.x 学习笔记
王扬扬的博客
05-02 1046
一，引入百度CDN：&lt;script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;引入参考地址：http://www.angularjs.net.cn/download/二，AngularJS 指令当网页加载完毕，AngularJS 自动开启。ng-app 指令告诉 Ang...
angularjs学习
小二郎
05-26 240
1.controller依赖注入的方式 (1)angular.module('app',['dep1','dep2',function(dep1,dep2){}]); (2) function ctrl(a,b){} ctrl.$inject=['dep1','dep2']; angular.module('app',ctrl); 2.angular中的MVVM模式 view:负责视
angularjs 学习
xiaoxiaoyu85的专栏
07-13 399
mark radio..........
深入学习AngularJS：权威指南与实战开发
"《AngularJS权威指南中文版》是一本由美国作者Ari Lerner撰写并经赵望野、徐飞、何鹏飞三位译者的权威教材，适合各类层次的AngularJS...这是一本不可多得的AngularJS学习宝典，值得每位想要精通此框架的开发者珍藏。
评论 31
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轻松的小希

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值