Angular JS：服务与自定义指令

小丸子学前端

于 2018-12-09 18:22:08 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_43187545/article/details/84930308

版权

1.服务service

描述：可以这么来认为，服务service相当于是app提供给用户使用的全局变量而服务存在的目的，其实可以认为是对各个controller功能的一个扩展
说明：
(1)在NG框架中，服务是一个名词。实在不能理解就替换成【NG全局变量】
(2)在NG框架中，因为controller的作用域问题，平级controller之间无法互相沟通，所以提出服务这一概念，不同的controller可以通过注入服务的方式来进行交互
(3)在NG框架中，存在多种不同的服务，有系统服务，也允许自定义服务
【在angular框架内存在多种全局变量，有系统自带的，也可以自己重新定义】
注意：不管是系统服务还是自定义服务，服务没有优劣之分。只是从功能角度去选择更适合的。

2.系统服务$http

描述：NG框架内直接对app数据模型内置了一个用于处理网络功能的服务，就是$http
可以认为系统提供的服务都是带有$前缀的，而为了区分服务，我们自定义的服务一般都不写$前缀
语法：因为$http服务是系统直接提供，所以不需要手动定义服务的内容。而是直接通过注入的方式，添加到controller内，直接使用即可。

 app.controller('控制器名', ['$scope','$http',function ($scope, $http)
 {...}]);

注意：对controller注入了$http服务后，只是说明在这个controller的脚本内可以使用网络请求，而不是已经使用了网络请求，具体的网络请求还需要我们手动编辑。
举例：
1.get请求测试

$http({
    			method:'GET',
    			url:'lesson4_httpService.php'   //get的带参请求直接加问好
    		}).success(function (data){
    			console.log(data);
    			//
    			$scope.imgSrc = data.src;
    		}).error(function (err){
    			console.log(err);  如果发送失败
    		});

2.post请求测试

$http({
			method:'POST',
			url:'lesson4_httpService.php',
			headers:{  //请求头：表示参数以何种方式发送，否则data无意义
				"Content-Type":'multipart/form-data'  //表单方式
				"Content-Type":'application/json'   //json方式
				"Content-Type":'application/x-www-form-urlencoded'       
				 //angular必须采用此方式
			},
			data:'userName=frank&password=123456'
		}).success(function (data){
			console.log(data);
		}).error(function (err){
			console.log(err);

3.过滤服务$filter

1.描述：$filter服务在NG框架中是对数据进行转换显示的一种小工具
使用本服务能够让页面中的显示内容呈现为不一样的结构
语法：{{ 任意内容 | 过滤器 }}
补充：$filter虽然是系统服务，但是支持自定义内容
说明：在$filter服务中共计提供了四种过滤器
(1)*** | currency:‘货币符号’
用于将内容转换为货币格式
tips：默认转换为美元格式，当然支持定制。
(2)*** | filter:子集数组
用于从一个数组选项中筛选出符合要求的子集数组
类似于输入提示功能
(3)*** | uppercase，lowercase
用于将内容的格式进行大小写转换，只针对英文
(4)*** | orderBy:‘表达式’
用于根据表达式的值对显示的内容进行顺序排列
一般会用于ng-repeat结构中，并且repeat结构不是简单数据结构
2.自定义过滤服务
描述：直接对app页面数据模型，通过.filter()方法进行扩展，
即可在页面中直接使用，不需要额外的注入操作。
语法：

app.filter('自定义过滤服务名称', function (){
				 return function (text){
					//...功能代码
				 }
			  });

4.时间轴服务

描述：时间轴服务共有三种，没有统一的名称
在使用之前必须注入到controller之中才能使用
类型：【间隔调用服务$interval】、【延迟调用服务$timeout】、【清除时间轴内容服务$interval.cancel】
补充：以上三种服务与bom（Browser Object Model）即浏览器对象模型中间隔调用等函数基本没有区别。

5.监听服务$watch

描述：$watch虽然我们称之为服务，但实际上这个服务并不需要我们主动注入而是可以在任何时刻，在控制器中任何位置直接使用他们。他的作用是监听任何想要监听的NG变量的值，并在这个值发生变化的时候回调。
语法：$scope.$watch('想要监听的angular表达式或字符串', 回调函数);

6.自定义服务

描述：之前课程中我们提到过，angularJS中的服务实际上就是对app数据模型的扩展
从某种意义上可以理解为【服务就是全局变量】的含义
接下来要提到的自定义服务则很好的贯彻了这个观点
系统服务是系统直接提供的，有不同的功能
自定义服务需要手动编辑功能
但两者都需要注入之后才能使用(特殊的服务不需要注入，$filter $watch)
说明：
自定义服务的方式常见有五种：
(1)value服务
(2)constant服务
(3)factory服务
(4)service服务
(5)provider服务
补充：
不论哪一种自定义服务，自定义服务的目的基本都是一致的，就是提供一个全局变量
来支持controller之间的交流

7.value自定义服务

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

app.value('FrankService', {
				pname:'frank'
			});
			...
			$scope.msg = FrankService.pname;

8.constant服务

描述：constant服务可以认为从作用上完全等价于value服务
区别就是constant服务一旦被定制完成，那么在注入使用之前都是不能更改的
(多次定制constant服务，只有第一个生效)
语法：app.constant('自定义服务名称', 服务内容JSON);

9.factory服务

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

10.service服务

描述：service服务相当于本身已经构建了一个空白对象
在服务内部所有内容的操作均通过this.来完成。

11. provider服务

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

12.自定义指令

1.【指令】与【自定义指令】
描述：指令可以理解为属性，
angularJS中的系统指令使得页面元素拥有了除了本身之外的一些特殊功能
自定义指令更像是创造了一个组件(标签)

13.如何自定义指令

描述：在angular框架内部，所有的自定义指令都是通过app.directivef()方法创建的。
语法：

app数据模型.directive('自定义指令名称', function(){
					return {
						restrict:'指令类型',
						template:'指令结构',
						replace:'指令复写'
					};
			  });

说明：(1)restrict指令类型
描述：指令类型指的是，指令在页面中需要通过何种形式进行唤醒
类型：指令共计有四种唤醒方式，分别为"A"“E”“C”“M”
说明：
a:“A”,指的是attribute，意味着指令需要通过属性的方式实现
eg:

app.directive('frankbutton', function (){
								return {
									restrict:'A',
									...
								}
						  	})

b:“E”,指的是element，意味着指令需要通过元素的方式进行唤醒
c:“C”,指的是class，意味着指令需要通过类名的方式呈现
d:“M”,指的是comment，意味着指令需要通过注释的方式进行唤醒
注意：
a:指令名称必须采用小写，任何大写都会导致无效。
b:指令名称如果是M类型，则replace字段就是必须写的，并且必须设置为true才能生效
c:指令如果通过template加载，则有且仅有唯一一个根节点。
(2)指令结构template
描述：指令结构template指的是指令在页面中能够显示的html结构
如果需要从外部文件中加载指令的结构，则需要写成templateUrl
(3)指令复写replace
描述：指令复写指的是指令当在页面中存在时，
是否会被当做是一个子元素添加到当前所在的元素内
默认为false，表示不会当成是子元素，而是会直接替换当前元素
可以设置为true，表示不覆盖当前元素，而是作为他的一个子元素添加到页面中

14.指令方案link

描述：指令方案link是angularJS中提供给自定义指令的一种“专有行为”
专门为自定义指令提供了一个用来编写对应脚本的区域
语法：

app.directive('指令名称', function (){
				 ...
				 ...
				 link:function (scope, element, attrs){...}
			  });

说明：
(1)scope：如果将整个指令看作是一个controller，那么scope的作用等价于$scope
(2)element:一个包含了指令中所有页面元素的数组，每一个元素都是一个dom对象
数组整体支持jq操作，而数组元素本身支持js原生操作
(3)attrs：当前指令的属性集合，用来获取元素的属性。
补充：
在指令内部，需要对scope进行初始化编辑
…

 scope:{},
 link:function (scope, element, attrs){...}
原因是如果不进行初始化操作，那么scope默认为mainController中的$scope

小丸子学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular JS：服务与自定义指令

1.服务service描述：可以这么来认为，服务service相当于是app提供给用户使用的全局变量而服务存在的目的，其实可以认为是对各个controller功能的一个扩展说明：(1)在NG框架中，服务是一个名词。实在不能理解就替换成【NG全局变量】(2)在NG框架中，因为controller的作用域问题，平级controller之间无法互相沟通，所以提出服务这一概念，不同的contr...
复制链接

扫一扫