学习AngularJS这一篇就够了 超、凢脫俗 2022-12-21 14:59 98阅读 0赞 ### 目录 ### * 第一章 AngularJS简介 * * 1.1、AngularJS简介 * 1.2、AngularJS版本介绍 * 1.3、AngularJS官方地址 * 1.4、AngularJS代码体验 * 第二章 AngularJS方法 * * 2.1、字符串大小写转换 * 2.2、对象/数组深度拷贝 * 2.3、对象/数组迭代函数 * 2.4、常见数据类型判断 * 2.5、序列化与反序列化 * 第三章 AngularJS指令 * * 3.1、应用指令 * * 3.1.1、ng-app * 3.1.2、ng-init * 3.1.3、ng-bind * 3.1.4、ng-cloak * 3.1.5、ng-non-bindable * 3.2、数据绑定指令 * * 3.2.1、ng-model * 3.3、控制器指令 * * 3.3.1、ng-controller * 3.4、鼠标指令 * * 3.4.1、ng-click * 3.4.2、ng-dblclick * 3.4.3、ng-mousedown * 3.4.4、ng-mouseup * 3.4.5、ng-mouseenter * 3.4.6、ng-mouseleave * 3.4.7、ng-mouseover * 3.4.8、ng-mousemove * 3.5、键盘指令 * * 3.5.1、ng-keypress * 3.5.2、ng-keydown * 3.5.3、ng-keyup * 3.6、表单指令 * * 3.6.1、ng-focus * 3.6.2、ng-blur * 3.6.3、ng-change * 3.6.4、ng-copy * 3.6.5、ng-cut * 3.6.6、ng-paste * 3.6.7、ng-submit * 3.7、属性指令 * * 3.7.1、ng-checked * 3.7.2、ng-selected * 3.7.3、ng-readonly * 3.7.4、ng-disabled * 3.7.5、ng-value * 3.7.6、ng-href * 3.7.7、ng-src * 3.7.8、ng-class * 3.7.9、ng-style * 3.8、循环指令 * * 3.8.1、ng-repeat * 3.8.2、ng-options * 3.9、显示指令 * * 3.9.1、ng-hide * 3.9.2、ng-show * 3.9.3、ng-open * 3.9.4、ng-if * 3.9.5、ng-switch * 3.10、包含指令 * * 3.10.1、ng-include * 3.11、自定义指令 * 第四章 AngularJS路由 * * 4.1、路由介绍 * 4.2、路由使用 * 4.3、路由配置 * 4.4、路由实战 * 第五章 AngularJS存储 * * 5.1、存储介绍 * 5.2、存储使用 * 5.3、存储对象 * 5.4、存储实战 * 第六章 AngularJS动画 * * 6.1、动画介绍 * 6.2、动画使用 * 6.3、动画实战 * 第七章 AngularJS服务 * * 7.1、服务介绍 * 7.2、作用域服务 * * 7.2.1、$scope * 7.2.2、$rootScope * 7.3、监听服务 * 7.4、地址服务 * 7.5、过滤服务 * * 7.5.1、内置的过滤服务 * * 7.5.1.1、currency * 7.5.1.2、lowercase * 7.5.1.3、uppercase * 7.5.1.4、orderBy * 7.5.1.5、filter * 7.5.2、自定义过滤服务 * * 7.5.2.1、语法介绍 * 7.5.2.2、prefix * 7.5.2.3、suffix * 7.5.2.4、trustHtml * 7.6、网络服务 * 7.7、时间轴服务 * * 7.7.1、$interval * 7.7.2、$timeout * 7.8、控制器继承服务 * 7.9、自定义服务 * * 7.9.1、value服务 * 7.9.2、constant服务 * 7.9.3、factory服务 * 7.9.4、service服务 * 7.8.5、provider服务 -------------------- **配套资料，免费下载** 链接：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官方地址 ## 官方下载：[点击访问][Link 1] 源码地址：[点击访问][Link 2] ## 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][16 1] ### 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][] [Link 1]: https://code.angularjs.org/ [Link 2]: https://github.com/angular/angular.js/ [image-20201115131424420]: /images/20221120/2021b2d8f68944d68a0d8294a471faa7.png [image-20201115132550360]: /images/20221120/d3129339acc64001aee829dfb016829f.png [image-20201115150551698]: /images/20221120/9afd03a9ebb34fc08c3f541a8db90747.png [image-20201115155403649]: /images/20221120/226e1e0ff2d548a0b6d4dd5a217e0eff.png [image-20201115155520320]: /images/20221120/0503be64efe04cb7955d1de38a7e7a69.png [image-20201115160705285]: /images/20221120/d59bf96b2ec6409ebb278ceb38521ef3.png [image-20201115161255707]: /images/20221120/aaf085d88c8541d8bb00d492451f0775.png [1]: /images/20221120/55c62f367bcd457f9e2176309c9494c8.png [2]: /images/20221120/f8fc4311636e4a709f410f0678cbcc32.png [image-20201116090939642]: /images/20221120/d192656987ae4036a76b5885a930a843.png [3]: /images/20221120/472f57f148b44a0d9c97b23ae75faec2.png [image-20201115195229478]: /images/20221120/ca67cd93d34b4b4db9fe1aaf7e2db6ad.png [4]: /images/20221120/490ca61576ae44f28d05c0cbecabf145.png [5]: /images/20221120/580ea764a9594f349336eb6f0852b5f4.png [6]: /images/20221120/0b35b6efac1b44268b45bfc230a88cdc.png [7]: /images/20221120/08589c5dc5ad493aa48c08fe5b79d14e.png [8]: /images/20221120/ffd0e0b25f4f44eeabefc6b5c5942965.png [9]: /images/20221120/ab07c63bd58b4ad3b36a1f61fa8646d2.png [10]: /images/20221120/e7b84c24bccf4c73b0db00d3576df27c.png [15]: /images/20221120/34661b9a5a5a4a5db2720c56559f98e7.png [16]: /images/20221120/32d81d4a445c4742b55a83690ec9201c.png [16 1]: /images/20221120/b4206820cb18400e9d56f4967be2ea59.png [17]: /images/20221120/15cc15a96e5e40c6a346d2f65b607007.png [18]: /images/20221120/7c16825a5a3d42e987240ac6d31358a9.png [19]: /images/20221120/046602c1411f42b3a5a24672d918b72a.png [20]: /images/20221120/af33340c320844388d390308313afcc6.png [21]: /images/20221120/3e6b5376db2c41fd9e1d849ee6ee0b9f.png [22]: /images/20221120/f44f104272d24a54b29325171353270a.png [23]: /images/20221120/c4b4d63659534822b09bf4f89d656695.png [24]: /images/20221120/278e04f0a533436397b71c896f4370bb.png [image-20201115221633702]: /images/20221120/563947d203e24db8afaf4f66344c9ae3.png [image-20201115232815535]: /images/20221120/5ded7ac863ff4616806b03a915aa7cc1.png [image-20201115225414168]: /images/20221120/ef57d471521c4e59b366c1f109264b04.png [image-20201115225708915]: /images/20221120/1cf65961699746bbafb56ec974cdd12d.png [image-20201115230123562]: /images/20221120/537f5307aac04c70bfec953a96c39f7e.png [image-20201116083107815]: /images/20221120/ae24a452284e441e9cd73072e8eb7d1a.png [image-20201116083249637]: /images/20221120/e86502db111d403a9720dad21c0ba10e.png [image-20201116085008790]: /images/20221120/24cf0afb17534244bbcf33cdf7d4d14b.png [image-20201116102726878]: /images/20221120/4826f000df1c4df7809715dae7fac538.png [27]: /images/20221120/f00b8929b94d4bf4b747129219cafc4b.png [image-20201116125241181]: /images/20221120/cf43af8fefe6439480b6ae20ef4e23c4.png [28]: /images/20221120/390a1a9897d14f218f61e29227db7017.png [29]: /images/20221120/48cbad3c93564e51a68b25f8f471d9b0.png [image-20201116154603840]: /images/20221120/7310bb2160024d23a07c1b58a00bcb32.png [image-20201116161024932]: /images/20221120/b49bbf6e20904fab9fcc1d274a97a270.png [30]: /images/20221120/42ea2c6846e847e1a91a58e9b444a30b.png [image-20201116171854833]: https://img-blog.csdnimg.cn/img_convert/eb05ce7d6d2a6f6de3743d1246cdcbbb.png [image-20201116172126116]: https://img-blog.csdnimg.cn/img_convert/6a9e146d52a8eca1f6a3a2b7bbf3e20d.png [image-20201116172136728]: https://img-blog.csdnimg.cn/img_convert/7e5ce5f9f06c9b888ff876b94720a190.png [image-20201116172720338]: https://img-blog.csdnimg.cn/img_convert/47e76b2f86e4b4f7b7814375b9f64a72.png [31]: https://img-blog.csdnimg.cn/img_convert/be6278f6339f55318b9a7cee29fe01a7.gif [image-20201116173759788]: https://img-blog.csdnimg.cn/img_convert/d0ed4ac44709c4047034c7660fe9622c.png [image-20201116173612195]: https://img-blog.csdnimg.cn/img_convert/5be5f6d78141572a5f84d6a92155bc2c.png [image-20201116181852879]: https://img-blog.csdnimg.cn/img_convert/e89555023b4016687a3546bfadd8d233.png [32]: https://img-blog.csdnimg.cn/img_convert/118baf4c5438fb0b53c9e9d49413432e.gif [33]: https://img-blog.csdnimg.cn/img_convert/c37fe4532854fd418b978b3d2ba1f4e4.gif [image-20201116204821759]: https://img-blog.csdnimg.cn/img_convert/60e8b143247ef6430b20f1986270d51e.png [image-20201116201218123]: https://img-blog.csdnimg.cn/img_convert/8fa9a272d467da2245fcdc94e7fb5c83.png [image-20201116201835053]: https://img-blog.csdnimg.cn/img_convert/1f0db2aaf2d73e1010273e5958690b3c.png [image-20201116202319239]: https://img-blog.csdnimg.cn/img_convert/4da9d33cc5a18222b7820a92c9720b20.png [image-20201116202836562]: https://img-blog.csdnimg.cn/img_convert/fc2d3b8442c9dfc62385729016781baf.png [image-20201116203739763]: https://img-blog.csdnimg.cn/img_convert/00b4641202fe2fb2d82b575e03aa7ea0.png
相关 学习Maven这一篇就够了 目录 第一章 Maven简介 1.1、Maven概述 1.2、Maven特点 1.3、Maven官网 1.4、 ╰+哭是因爲堅強的太久メ/ 2022年12月28日 05:28/ 0 赞/ 708 阅读
相关 学习AngularJS这一篇就够了 目录 第一章 AngularJS简介 1.1、AngularJS简介 1.2、AngularJS版本介绍 1.3、Angul 超、凢脫俗/ 2022年12月21日 14:59/ 0 赞/ 99 阅读
相关 学习JavaScript这一篇就够了 目录 第一章 JavaScript简介 1.1、JavaScript的起源 1.2、JavaScript的组成 1.3、Ja 痛定思痛。/ 2022年12月17日 15:55/ 0 赞/ 285 阅读
相关 学习JavaWeb这一篇就够了 目录 第一章 开发工具 1.1、JDK安装 1.2、Tomcat安装 1.3、IDEA安装 1.4、IDEA集 忘是亡心i/ 2022年12月06日 04:14/ 0 赞/ 203 阅读
相关 学习Tomcat这一篇就够了 目录 第一章 Tomcat概述 1.1、Tomcat概述 1.2、Tomcat历史 1.3、T 短命女/ 2022年12月04日 08:37/ 0 赞/ 472 阅读
相关 学习FastDFS这一篇就够了 目录 第一章 FastDFS简介 1.1、FastDFS的简介 1.2、FastDFS的发展历史 ╰+攻爆jí腚メ/ 2022年12月04日 07:40/ 0 赞/ 677 阅读
相关 学习Nginx这一篇就够了 目录 第一章 Nginx概述 1.1、Nginx概述 1.2、Nginx官网 1.3、Ngin 叁歲伎倆/ 2022年12月02日 04:24/ 0 赞/ 417 阅读
相关 学习Oracle这一篇就够了 目录 第一章 数据库概述 1.1、数据库的好处 1.2、数据库的常见概念 1.3、数据库的存储 缺乏、安全感/ 2022年11月27日 03:13/ 0 赞/ 438 阅读
相关 学习JavaScript这一篇就够了 [https://blog.csdn.net/qq\_38490457/article/details/109257751?utm\_medium=distribute.pc\ 左手的ㄟ右手/ 2022年11月21日 03:34/ 0 赞/ 320 阅读
相关 学习JDBC这一篇就够了 文章目录 一、JDBC简介 二、获取数据库连接 准备工作 1、导入驱动jar包 2、加载与注册JDBC驱 痛定思痛。/ 2022年11月18日 01:42/ 0 赞/ 369 阅读
╰+哭是因爲堅強的太久メ
超、凢脫俗
痛定思痛。
忘是亡心i
╰+攻爆jí腚メ
左手的ㄟ右手
还没有评论，来说两句吧...