angular之service

最新推荐文章于 2024-06-14 09:39:16 发布

SackJe_13

最新推荐文章于 2024-06-14 09:39:16 发布

阅读量381

点赞数

分类专栏：移动互联

本文链接：https://blog.csdn.net/Sakeji_13/article/details/78300965

版权

移动互联专栏收录该内容

17 篇文章 0 订阅

订阅专栏

service-factory简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.constant("divide_0_tips", "除数不能等于零！");

        // 依赖注入：5个重要的组件factory、service、provider、value、constant
        // 建一个计算器服务，服务名：calculator，有4个方法：add、subtract、multiply、divide
        app.factory("calculator", function (divide_0_tips) {
            return {
                add: function (num1, num2) {
                    return num1 + num2;
                },

                subtract: function (num1, num2) {
                    return num1 - num2;
                },

                multiply: function (num1, num2) {
                    return num1 * num2;
                },

                divide: function (num1, num2) {
                    if (num2 != 0) {
                        return num1 / num2;
                    }

                    console.log(divide_0_tips);
                    return 0;
                }
            };
        });

        app.controller("myCtrl", function ($scope, calculator) {
            $scope.result1 = calculator.add(8, 4);
            $scope.result2 = calculator.subtract(8, 4);
            $scope.result3 = calculator.multiply(8, 4);
            $scope.result4 = calculator.divide(8, 4);
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>8 + 4 = {{ result1 }}</div>
    <div>8 - 4 = {{ result2 }}</div>
    <div>8 * 4 = {{ result3 }}</div>
    <div>8 / 4 = {{ result4 }}</div>
</div>
</body>
</html>

service-provider简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.constant("divide_0_tips", "除数不能等于零！");

        // 建一个计算器服务，服务名：calculator，有4个方法：add、subtract、multiply、divide
        app.provider("calculator", function (divide_0_tips) {
            this.$get = function () {
                return {
                    add: function (num1, num2) {
                        return num1 + num2;
                    },

                    subtract: function (num1, num2) {
                        return num1 - num2;
                    },

                    multiply: function (num1, num2) {
                        return num1 * num2;
                    },

                    divide: function (num1, num2) {
                        if (num2 != 0) {
                            return num1 / num2;
                        }

                        console.log(divide_0_tips);
                        return 0;
                    }
                }
            };
        });

        app.controller("myCtrl", function ($scope, calculator) {
            $scope.result1 = calculator.add(8, 4);
            $scope.result2 = calculator.subtract(8, 4);
            $scope.result3 = calculator.multiply(8, 4);
            $scope.result4 = calculator.divide(8, 4);
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>8 + 4 = {{ result1 }}</div>
    <div>8 - 4 = {{ result2 }}</div>
    <div>8 * 4 = {{ result3 }}</div>
    <div>8 / 4 = {{ result4 }}</div>
</div>
</body>
</html>

service-service简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.constant("divide_0_tips", "除数不能等于零！");

        // 建一个计算器服务，服务名：calculator，有4个方法：add、subtract、multiply、divide
        // 单例
        app.service("calculator", function (divide_0_tips) {
            this.add = function (num1, num2) {
                return num1 + num2;
            };

            this.subtract = function (num1, num2) {
                return num1 - num2;
            };

            this.multiply = function (num1, num2) {
                return num1 * num2;
            };

            this.divide = function (num1, num2) {
                if (num2 != 0) {
                    return num1 / num2;
                }

                console.log(divide_0_tips);
                return 0;
            };
        });

        app.controller("myCtrl", function ($scope, calculator) {
            $scope.result1 = calculator.add(8, 4);
            $scope.result2 = calculator.subtract(8, 4);
            $scope.result3 = calculator.multiply(8, 4);
            $scope.result4 = calculator.divide(8, 4);
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>8 + 4 = {{ result1 }}</div>
    <div>8 - 4 = {{ result2 }}</div>
    <div>8 * 4 = {{ result3 }}</div>
    <div>8 / 4 = {{ result4 }}</div>
</div>
</body
</html>

service-value简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        // 5种依赖注入的重要组件：factory、service、provider、value、constant

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

        // app.value("divide_0_tips", "除数不能等于零！");
        // app.value("divide_0_tips", "除数不能等于零！！！！！");

        app.constant("divide_0_tips", "除数不能等于零！");
        app.constant("divide_0_tips", "除数不能等于零！！！！！");

        app.controller("myCtrl", function ($scope, divide_0_tips) {
            console.log(divide_0_tips);
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">

</div>
</body>
</html>