angular--服务

发表于

什么是服务

  • 服务是公用的方法，可以把控制器中相同的部分抽取出来封装成一个服务，需要的时候注入控制器。

服务的分类

  • 服务分为内置服务与自定义服务

常见内置服务

  1. $http服务用来向后台请求数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    var mod=angular.module('m',[]);
    mod.controller('myCtrl',function  ($scope,$http) {
    	// 注入http服务
    		// $http用来向后台请求数据
    		$http({
    			url:'http.json',
    			method:'GET',
    			params:{data:'aaaa'} //只是对于GET请求使用，在问号后面传递参数
    		//method:'POST',
    		//data:{}
    		}).success(function  (data,status,headers,config) {
    			// 当成功时执行success方法中的回调函数
    				// data 请求回来的数据
    				// status 状态码
    				// headers是一个方法，执行时可看到头部信息
    				// config 配置信息，包含以上三者
    				console.log(data,status,headers,config);
    		}).error(function  (err) {
    			// 当失败时执行error中的回调函数
    			// err错误信息
    		})
    })
    //$http返回的是一个promise (用来解决异步)
    // 封装的简便方法
    // $http.get()  $http.delete()
    	// 参数1 路径字符串 参数2 config 对象，放配置内容
    // $http.post()  $http.put()
    	// 参数1 路径字符串 参数2 请求体data  参数3 config
    // $http.jsonp() (实现跨域请求,其回调函数名 JSON_CALLBACK)
    	// 参数 请求路径
    // $http.delete()
    // $http.put()

  2. \$interval与$timeout 设定计时器，不同于原生计时器在于其可触发脏值查询,调用其cancel方法清除计时器

1
2
3
4
5
6
7
8
9
10
var newMod=angular.module('newm',[]);
newMod.controller('ctrl',function  ($scope,$interval,$timeout) {
	$scope.age=8;
	$interval(function  () {})
	$scope.fn=function  () {
		$timeout.cancel(timer);
		var timer=$timeout(fn,1000);
	 // 未完
	}
})

五种自定义服务

  1. provider是最全面的自定义服务，注入的是服务实例上$get方法的返回值，可以暴露方法作为API，模块的config方法接受服务名+Provider参数，该参数是服务的一个实例，可以对暴露的API进行配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var myModule = angular.module('myModule', []);
    //配置名为myPro的服务
    myModule.provider('myPro',function  () {
        var currency='$';
        this.setCurrency=function  (a) {
            currency=a;
        };
        this.$get=function  () {
            return {
                '+':function  (a,b) {
                    return currency+(Number(a)+Number(b));
                }
            }
        }
    })
    //    配置函数，对服务暴露出来的接口进行配置,函数中传递的参数是
    //    服务名+provider
    //    myProvider是my服务的实例
    myModule.config(function  (myProProvider) {
        myProProvider.setCurrency('￥');
    })
    //    注入自定义服务
    myModule.controller('myCtrl',['$scope','myPro',function  ($scope,myPro) {
        //注入的是服务的实例$get方法的返回值
        $scope.result=myPro['+'](1,2);
    }])

  2. factory 最常用定义服务的方法.内部封装的也是provider,函数定义部分只要返回值,不能调用config配置函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var myModule = angular.module('myModule', []);
    //    注入自定义服务 注入的是factory返回值
    myModule.factory('myPro',function  () {
        return {
            '+':function  (a,b) {
                return (Number(a)+Number(b));
            },
            '-':function  (a,b) {
                return (a-b);
            }
        }
    })
    myModule.controller('myCtrl',['$scope','myPro',function  ($scope,myPro) {
        $scope.cal=function  () {
            $scope.result=myPro[$scope.val]($scope.one,$scope.two);
        }
    }])

  3. service 相当于原生js中的构造函数,向控制器注入服务的时候，注入的是该方法的一个实例,不能调用配置函数config

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var myModule = angular.module('myModule', []);
    myModule.controller('myCtrl',['$scope','myPro',function  ($scope,myPro) {
        $scope.result=myPro['*'](3,5);
    }])
    myModule.service('myPro',function  () {
            this['+']=function  (a,b) {
                return (Number(a)+Number(b));
            };
            //ES6写法 箭头函数
            this['*']=(a,b)=>a*b;
    })

  4. value用来定义变量，也可以作为服务注入到控制器中,不能在配置函数中调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var myModule = angular.module('myModule', []);
    //相当于把myPro赋值为'123'
    myModule.value('myPro','123');
    myModule.controller('myCtrl',['$scope','myPro',function  ($scope,myPro) {
        $scope.result=myPro;
    }])

  5. constant 定义常量,用法同value.与value不同点在于可以注入到配置函数中