AngularJSAngularJS1.X就学笔记11-服务

  如果自己并未记错的话,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>

  provider非常强,可以透过config对咱们的劳务拓展安排。上例被提供了debugEnabled方法,可以针对是否记录日志进行布局。实质上,看看源码就会懂得即便好知晓service和factory方法都是provider方法的新鲜形式。

AngularJS 1

  看没有,factory是调用的provider,service是调用的factory,所以说service和factory都是provider,他们好举行的provider也得举行。

季、内置服务

  这里引用一下(请参考:http://www.cnblogs.com/best/p/6263915.html)

  $http 发送http请求

  $resource 创建一个可以RESTful服务器端数据源交互对象

  $window 浏览器的window元素的jQuery包装

  $document 浏览器的document元素的jQuery包装

  $rootScope 根作用域的走访

  $rootElement 根元素的走访

  $cacheFactory 提供键/值对停到对象缓存

  $interval 提供对window.setInterval访问

  $timeout 提供对window.setTimeout访问

  $cookies 提供针对性浏览器的cookie的读写访问

  $animate 提供动画钩子来和时链接到因CSS和JavaScript为根基的动画

  好了,关于劳动就是先到当时了,今天必须将ajax和路由看罢。加油加油!     

 

相关文章