angularjs学习笔记--服务

素颜马尾好姑娘i 2022-09-24 06:29 202阅读 0赞

**angularjs学习笔记--服务**

今天初步了解了angularjs中的服务，服务是一个函数或者对象。我们一般调用或直接使用，angularjs有自己内置的服务，也可以自定义服务。

我们为什么要使用服务？其实服务相当于共用部分的一个封装，比如当我们在写控制器的时候，有很多控制器，它们之间有共同的部分，如果每个控制器里都重复这段代码那会显得比较冗余，我们最直接的想法就是把它单独抽离出来，当作一个公共的部分，可以调用。其实在angularjs中就是把公共的部分抽离成一个服务。内置的一些服务，比如说$http,$timeout,$window等等是直接可以用的，有时我们可以根据我们的需求自己定义服务。

下面是一个$http服务使用的一个小demo

<!DOCTYPE html>
    <html lang="en" ng-app="mySer">
    <head>
        <meta charset="UTF-8">
        <title>$http服务</title>
        <script src="js/angular.js"></script>
        <script src="js/servhttp.js"></script>
    </head>
    <body>
        <div ng-controller="LoadDataCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {
       {user.text}}
                </li>
            </ul>
        </div>
    </body>
    </html>

$http服务有几个配置，method,url,params,data等，这些其实和ajax当中的都一样，还有cache用来设置是否缓存，timeout用来设置超时。

其后面链式的两个方法分别是成功和失败时要执行的函数。

再举一个例子，$timeout服务，这个有些类似于js中的setTimeout，设置定时器。

$timeout(fn,\[delay\],\[invokeApply\]);

第一个参数是延时执行后的函数，第二个参数是延时时间（单位毫秒）,第三个参数是bool值，设置是否需要脏值检测，默认为false，如果为true，则回掉函数会被包在$scope.$apply中

返回值是一个promise对象

方法：$timeout.cancel() 用来取消回掉函数的执行，相当于定时器清零。

下面是一个小demo

<span style="font-size:14px;"><!DOCTYPE html>
    <html lang="en" ng-app="timeoutApp">
    <head>
        <meta charset="UTF-8">
        <title>$timeout练习</title>
        <script src="js/angular.js"></script>
        <script src="js/timeout.js"></script>
    </head>
    <body>
    
    </body>
    </html></span>

<span style="font-size:14px;">var timeoutApp = angular.module('timeoutApp',[]);
    
    //如果打开注释,执行.cancel()方法,那么$timeout的回调就不会被执行,它返回的promise被reject,控制台打印:
    timeoutApp.run(function($timeout){
        var a = $timeout(function(){
            console.log('执行$timeout回调');
            return 'angular'
        },1000);
        a.then(function(data){
            console.log(data)
        },function(data){
            console.log(data)
        });
        //$timeout.cancel(a);
    })</span>

今天，学习了这个两个服务，并且自己尝试着写了简单的服务，简单总结一下服务的几个特性：

1.service都是单例的，只有一个实例。

2.service由$injector负责实例化，不需要自己去new，对于这两点原理上还不是很了解，随着后面对angular的继续学习再探索吧~

3.service在整个应用的生命周期中存在，可以用来共享数据。

4.在需要使用的地方利用依赖注入机制注入service

5.自定义的service需要些在内置的service后面，注意顺序

6.内置的service以$符号开头，自定义的应该避免这样命名，用以区分。

今天就总结这些，明天继续~