自定义服务

自定义服务和自定义指令,自定义过滤器写法类似,一共有 三种关键字 定义服务
使用服务必须注入，使用原生的服务注入方式是"$" + 原生服务名称。而自定义服务方式是将服务名称直接注入
1. 通过service关键字自定义服务

<body ng-app = "app" ng-controller = "wmxController">

<p>{{said}}</p>

<script src="angular.js"></script>

<script>
    var app = angular.module('app',[]);

    //使用自定义服务：先注入自定义服务wmxService
    app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {

        //调用服务的方法
        wmxService.say('我是调用后传递的参数');
        
        //接受函数的返回值
        $scope.said =  wmxService.say('接受函数的返回值');
    }]);
    
//    通过service关键字自定义服务
     // 参数一：自定义服务的名称
     // 参数二：回调的方法
     // this代表当前作用域（wmxService的对象）

    app.service('wmxService',function () {

        //可传递参数，也可不传递参数
        this.say = function (args) {
            alert(args);

            //也可以有返回值
            return args;
        }
    })
</script>
</body>

1. 通过factory关键字自定义服务1 (直接把函数返回出去)

<body ng-app = "app" ng-controller = "wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>
    
    var app = angular.module('app',[]);
    
    //注入自定义服务
    app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {
        //调用自定义服务的方法，并且使用它的返回值
        $scope.data = wmxService('我是调用自定义服务后的数据');
    }]);
    
    //自定义服务：关键字factory
    app.factory('wmxService',function () {
        return function (args) {
            alert('我是自定义服务的数据');
            return args;
        }
    })
</script>
</body>

1. 通过factory关键字自定义服务2 （返回一个函数名出去）

<body ng-app = "app" ng-controller = "wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>

    var app = angular.module('app',[]);

    //注入自定义服务
    app.controller('wmxController',['$scope','wmxService',function ($scope,wmxService) {

        //调用自定义服务的方法，并且使用它的返回值
        $scope.data = wmxService.myTimer('我是调用之后的数据');

    }]);

    //自定义服务：关键字factory
    app.factory('wmxService',function () {

       //无法直接返回该函数，所以巧妙的使用了下面的方法返回出去
        function showDate(args) {
            alert('返回自定义服务中的数据');
            return args;
        }

        return{
            //key:value形式返回（取两个别名）
            myTimer:showDate
        }
    })
</script>
</body>

1. 通过value关键字自定义服务
- 该服务的作用是使用 angular 定义常量
- 通过 const 定义的是常量，是不允许修改的

const wmx = 100;
//后面不能对wmx这个常量值进行修改

<body ng-app = "app" ng-controller = "wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>
<script>

    var app = angular.module('app',[]);

    //注入自定义服务
    app.controller('wmxController',['$scope','username',function ($scope,username) {
        $scope.data = username;
    }]);

    //自定义服务：关键字factory
    /**
     * 相当于定义了 const username='wmx';
     * username只能永远等于wmx,不能够修改
     * 参数一：服务名称，同时也是常量，别名为username
     * 参数二：常量值为wmx
     */
   app.value('username','wmx');

</script>
</body>

自定义服务

推荐阅读更多精彩内容