AngularJS1.X学习笔记11-服务

来源：互联网发布：地下城一上就网络中断编辑：程序博客网时间：2024/05/18 10:21

如果我没记错的话，spring里边有个service层。什么是服务呢？个人理解就是很多地方要用的，可以跨越控制器甚至是跨越模块的工具。AngularJS也为我们提供了服务这种机制，这让我们可以将一些不属于某个控制器独有的东西定义成一个服务，要用的时候直接拿过来就好。使用服务有什么好处呢？一是便于统一修改，二是调用者不用关心内部实现，三是便于测试。

一、factory

<!DOCTYPE html><html lang="en" ng-app='myApp'><head>    <meta charset="UTF-8">    <title>factory</title></head><body>    <div ng-controller="dayCtrl"></div>    <div ng-controller="secondCtrl"></div>        <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>    <script type="text/javascript">        var myApp = angular.module("myApp",[]);        myApp.controller('dayCtrl',function($scope,logService){            logService.log("dayCtrl exec");        })        .factory('logService',function(){            var messageCount = 0;            return {                log: function(msg){                    console.log("LOG"+messageCount++ +":"+msg);                }            }        })        .controller("secondCtrl",function(logService){            logService.log("secondCtrl exec");        })    </script></body></html>

　　本例中我们用factory方法创建了一个服务，factory方法接受俩个参数，第一个表示服务名字，第二个是一个工厂函数，该函数返回一个对象，在对象中可以暴露服务的方法。注意服务是单例的，正是因为如此，我们上面的服务才能够正确计数。调用自定义服务的方法和调用内置服务的方法是相同的，也是使用依赖注入。

二、service

　　service的使用方法和factory方法有所区别，他的第二个参数是一个构造器（或者叫构造函数）。

<!DOCTYPE html><html lang="en" ng-app='myApp'><head>    <meta charset="UTF-8">    <title>service</title></head><body>    <div ng-controller="dayCtrl"></div>    <div ng-controller="secondCtrl"></div>        <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>    <script type="text/javascript">        var myApp = angular.module("myApp",[]);        function BaseLogger(){            this.messageCount = 0;            this.log = function(msg){                console.log(this.messageType+":"+this.messageCount++ +":"+msg);            }        }        function DebugLogger(){};        DebugLogger.prototype = new BaseLogger();        DebugLogger.prototype.messageType="Debug";        function ErrorLogger(){};        ErrorLogger.prototype = new BaseLogger();        ErrorLogger.prototype.messageType = "Error";        myApp.controller('dayCtrl',function($scope,logService){            logService.log("dayCtrl exec");        })        .service("logService",DebugLogger)        .service("errorService",ErrorLogger)        .controller("secondCtrl",function(errorService){            errorService.log("secondCtrl exec");        })    </script></body></html>

　　　其实，service也可以当作facrory用

<!DOCTYPE html><html lang="en" ng-app='myApp'><head>    <meta charset="UTF-8">    <title>factory</title></head><body>    <div ng-controller="dayCtrl"></div>    <div ng-controller="secondCtrl"></div>        <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>    <script type="text/javascript">        var myApp = angular.module("myApp",[]);        myApp.controller('dayCtrl',function($scope,logService){            logService.log("dayCtrl exec");        })        .service('logService',function(){            var messageCount = 0;            return {                log: function(msg){                    console.log("LOG"+messageCount++ +":"+msg);                }            }        })        .controller("secondCtrl",function(logService){            logService.log("secondCtrl exec");        })    </script></body></html>

　　这样做是没有问题的。

三、provider

　　provider方法可以让你更好地控制被创建或被配置的服务对象的方式。

<!DOCTYPE html><html lang="en" ng-app='myApp'><head>    <meta charset="UTF-8">    <title>provider</title></head><body>    <div ng-controller="dayCtrl"></div>        <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>    <script type="text/javascript">        var myApp = angular.module("myApp",[]);        myApp        .config(function(logServiceProvider){            logServiceProvider.debugEnabled(false);        })        .controller('dayCtrl',function($scope,logService){            logService.log("dayCtrl exec");        })        .provider('logService',function(){            var debug = true;            return {                debugEnabled:function(setting){                    if(angular.isDefined(setting)){                        debug = setting;                        return this;                    }else{                        return debug;                    }                },                $get:function(){                return {                    messageCount:0,                    log:function(msg){                        if(debug){                            console.log("LOG"+this.messageCount++ +":"+msg);                        }                                            }                }            }        }                    })    </script></body></html>