angularJS的自定义服务-factory、service、value 三种方式实现的异同

一、在angualrjs中什么是服务？

服务这个概念其实并不陌生，在其他语言中如java便有这样的概念，其作用就是对外提供某个特定的功能，如消息服务，文件压缩服务等，是一个独立的模块。ng的服务是这样定义的：

     Angular services are singletons objects or functions that carry out specific tasks common to web apps.

说明两点

     ①  服务是为了提供特定的功能

    ②  服务是一个单例，即不管该服务被注入到什么地方，它只有一个实例

二、自定义服务

angular中提供了30多中内置服务，是以 $ 符号开头，但是这些内置服务提供的功能并不能完全的满足我们开发的需求，所以angular提供了自定义服务。

自定义服务的方式：

   ①  factory--->本质就是返回一个有属性有方法的对象

   ②  service-->相当于new的形式创建对象

   ③  value-->当做全局变量来使用

factory方式自定义服务

    //创建一个名为app的模块
    var app = angular.module("app",[]);
    //使用factory来自定义一个叫 firstFactor的服务 ，实现的功能是将传入的字符串的首字母大写
    app.factory("firstFactor",['$filter',function ($filter) {
        return function (type) {
            //zhang 首字大写
            return  $filter('uppercase')(type[0])+type.slice(1);
        }
    }]);
    // 创建一个myController控制器，注入自定义的服务firstFactor
    app.controller("myController",['$scope','firstFactor',function ($scope,firstFactor) {
        $scope.name = 'zhang';
        // 实现服务的功能
        $scope.name = firstFactor($scope.name);
    }])

上面的方式通过直接 return ，只能定义一个功能，当想要利用同一个服务实现多个功能的时候，采用下面的方式实现：

//创建一个名为app的模块
    var app = angular.module("app",[]);
    //使用factory来自定义一个叫 firstFactor的服务
    app.factory("firstFactor",['$filter',function ($filter) {
        // 实现格式化时间的功能
        function showTime(time) {
          return  $filter('date')(time,'yyyy-MM-dd');
        }

        //实现遍历数组
        function eachArr(arr) {
            for(var i=0;i<arr.length ;i++){
                console.log("我的名字是："+arr[i]);
            }
        }
        return{ //以key--value的方式，抛出服务在外部调用的方法名，key为服务中的方法名，value为外部调用的方法名，一般都设置为同名
            showTime:showTime,
            eachArr:eachArr
        }
    }]);
    // 创建一个myController控制器，注入自定义的服务firstFactor
    app.controller("myController",['$scope','firstFactor',function ($scope,firstFactor) {
        $scope.time = new Date();
        var arr=['张三','小黄','小尤','梅梅'];

        // 实现服务的功能
        $scope.time = firstFactor.showTime($scope.time);
        firstFactor.eachArr(arr);
    }])

第二种方式，在一个自定义服务中，可以实现多个功能，只要通过return 对象，将函数名字返回

service 方式自定义服务

 var app = angular.module('app',[]);
    app.controller("myController",['$scope','firstService',function ($scope,firstService) {
        $scope.name = '张扬';
        $scope.str = 'FLAG JQUERY';
        $scope.name= firstService.sayHello($scope.name);
        $scope.str = firstService.toLower($scope.str);
    }])
        .service("firstService",['$filter',function ($filter) {   //这里使用的是ng的链式调用
            this.sayHello = function (name) {
                return "我是机器人小马，你好，"+name
            }
            this.toLower =function (str) {
                return $filter('lowercase')(str);
            }
        }])

service创建服务和factory创建服务的区别：

   同：都是创建一个对象的方式

   异：factory 直接就是一个对象，通过手动的返回，而service 内部默认通过new 的形式创建对象，这样service就可以直接使用this

value自定义服务：

value 表现形式上是一个服务，本质上可以看作一个常量，即其值始终保持不变的值，在ES6 中规定了常量，通过const定义常量

  var app = angular.module("app",[]);
    app.controller("myController",['$scope','version','key',function ($scope,version,key) {
        $scope.version = version;
        $scope.key=key;

    }]);
    app.value("version",'v1.0');
    app.value("key",'admin')