angular之service

来源：互联网发布：名片设计模板软件下载编辑：程序博客网时间：2024/06/04 18:49

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>

阅读全文

0 0