加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJs Service-自定义服务

发布时间:2020-12-17 10:08:16 所属栏目:安全 来源:网络整理
导读:在AngularJs中 ,服务是一个函数或对象,可以在你的AngularJs 应用中使用 服务是注册在模块下的 实例1: div ng-app="myApp" ng-controller="myCtrl" p 数字:{{number}} /p p 十六进制:b{{number2}}/b /p p 十六进制2:b{{number|myFormat}}/b /p/divscrip

在AngularJs中 ,服务是一个函数或对象,可以在你的AngularJs 应用中使用

服务是注册在模块下的

实例1:

<div ng-app="myApp" ng-controller="myCtrl">
    <p>
        数字:{{number}}
    </p>
    <p>
        十六进制:<b>{{number2}}</b>
    </p>
    <p>
        十六进制2:<b>{{number|myFormat}}</b>
    </p>
</div>
<script>
    //在AngularJs中 ,服务是一个函数或对象,可以在你的AngularJs 应用中使用
    //在控制器、在过滤器等中都可以使用
    //AngularJS 内建了30 多个服务。
    //创建自定义服务
    var app = angular.module('myApp',[]);
    app.service('hexfay',function () {
        this.getHex = function (x) {
            return x.toString(16);
        }
    });
    //要是使用定义的服务,需要再定义控制器的时候独立添加
    app.value('number',10);
    app.controller('myCtrl',function ($scope,number,hexfay) {
        $scope.number = number;
        $scope.number2 = hexfay.getHex($scope.number);
    });
    //在过滤器中使用服务
    app.filter('myFormat',function (hexfay) {
        return function (input) {
            return hexfay.getHex(input);
        }
    });
</script>


实例2:

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>数字:{{number}}</p>
        <p>结果:<b>{{number2}}</b></p>
    </div>
    <script>
        //创建自定义服务1
        var app = angular.module('myApp',[]);
        app.service('addition',function () {
            this.add = function (x) {
                return x + 10;
            }
        });
        //创建自定义服务2,调用服务1
        app.service('multipli',function (addition) {
            this.getMulti = function (x) {
                x = addition.add(x);
                return x * 10;
            }
        });
        //要是使用定义的服务,需要再定义控制器的时候独立添加
        app.value('number',10);
        app.controller('myCtrl',multipli) {
            $scope.number = number;
            $scope.number2 = multipli.getMulti($scope.number);
        });
    </script>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读