AngularJS Essential. Урок 7. Работа с модулями и сервисами. Домашнее задание.

Дополнительное задание 1

Код
//ServicesAdd1.js
angular.module("arithmeticModule", [])
    .factory("arithmetic",
        function () {
            return {
                add: function (operand1, operand2) {
                    return operand1   operand2;
                },
            sub: function (operand1, operand2) {
                return operand1 - operand2;
            },

            mul: function (operand1, operand2) {
                return operand1 * operand2;
            },

            div: function (operand1, operand2) {
                if (operand2 == 0) {
                    return "Division by zero";
                }

                return operand1 / operand2;
        }
        }
    })<br><br><br><br><!--Add1.html-->
Дополнительное задание 1
<script src="ServicesAdd1.js"></script>
<script>
    angular.module("app", ["arithmeticModule"])
    .controller("appCtrl", function ($scope, arithmetic) {
        
        $scope.calc = function (operation) {
            var operand1 = parseFloat($scope.operand1), operand2 = parseFloat($scope.operand2);

            switch(operation){
                case " ":
                    $scope.result = arithmetic.add(operand1, operand2);
                    break;
                case "-":
                    $scope.result = arithmetic.sub(operand1, operand2);
                    break;
                case "*":
                    $scope.result = arithmetic.mul(operand1, operand2);
                    break;
                case "/":
                    $scope.result = arithmetic.div(operand1, operand2);
                    break;
                default:
                    $scope.result = "Unsupported operation";
            }
        }
    })
</script>
a = b =
Arithmetic operation:
<input type="button" value=" " ng-click="calc(' ')" />
<input type="button" value="-" ng-click="calc('-')" />
<input type="button" value="*" ng-click="calc('*')" />
<input type="button" value="/" ng-click="calc('/')" /><br /><br />

Result: {{result}}

Задание 1

Код
//ServicesTask1.js

var arithmeticOperations = function () {
this.add = function (operand1, operand2) {
return operand1 operand2;
};
this.sub = function (operand1, operand2) {
return operand1 - operand2;
};
this.mul = function (operand1, operand2) {
return operand1 * operand2;
};
this.div = function (operand1, operand2) {
if (operand2 == 0) {
return "Division by zero";
}

    return operand1 / operand2;
};

}

angular.module("arithmeticModule", [])
.factory("arithmeticFactory",
function () {
return {
add: function (operand1, operand2) {
return operand1 operand2;
},

            sub: function (operand1, operand2) {
                return operand1 - operand2;
            },

            mul: function (operand1, operand2) {
                return operand1 * operand2;
            },

            div: function (operand1, operand2) {
                if (operand2 == 0) {
                    return "Division by zero";
                }

                return operand1 / operand2;
            }
        }
    })

.service("arithmeticService", arithmeticOperations)

.provider("arithmeticProvider", function () {
    return {
        $get: function () {
            return {
                add: function (operand1, operand2) {
                    return operand1   operand2;
                },

                sub: function (operand1, operand2) {
                    return operand1 - operand2;
                },

                mul: function (operand1, operand2) {
                    return operand1 * operand2;
                },

                div: function (operand1, operand2) {
                    if (operand2 == 0) {
                        return "Division by zero";
                    }

                    return operand1 / operand2;
                }
            }
        }
    }
})<br><br><br><br><!--Task1.html-->
Задание 1
<script src="../Libraries/angular.js"></script>
<script src="ServicesTask1.js"></script>

<script>
    angular.module("app", ["arithmeticModule"])
    .controller("appCtrl", function ($scope, $parse, arithmeticFactory, arithmeticService, arithmeticProvider) {

        $scope.methods = [
            { name: "Factory", fn: arithmeticFactory },
            { name: "Service", fn: arithmeticService },
            { name: "Provider", fn: arithmeticProvider }
        ];

        $scope.method = $scope.methods[0];

        function clearResult() {
            $scope.result = "";
        }

        $scope.add = function () {
            clearResult();
            $scope.result = $scope.method.fn.add(parseFloat($scope.operand1), parseFloat($scope.operand2));
        }

        $scope.sub = function () {
            clearResult();
            $scope.result = $scope.method.fn.sub(parseFloat($scope.operand1), parseFloat($scope.operand2));
        }

        $scope.mul = function () {
            clearResult();
            $scope.result = $scope.method.fn.mul(parseFloat($scope.operand1), parseFloat($scope.operand2));
        }

        $scope.div = function () {
            clearResult();
            $scope.result = $scope.method.fn.div(parseFloat($scope.operand1), parseFloat($scope.operand2));
        }

    })
</script>
Method for calculating:

a = <input type="text" placeholder="Enter value" ng-model="operand1">
b = <input type="text" placeholder="Enter value" ng-model="operand2">

Arithmetic operation:
<input type="button" value=" " ng-click="add()" />
<input type="button" value="-" ng-click="sub()" />
<input type="button" value="*" ng-click="mul()" />
<input type="button" value="/" ng-click="div()" /><br /><br />

Result: {{result}}

Задание 2

Код
//ServicesTask2.js

angular.module("cachingModule", [])
.provider("cachService", function () {

    var cache, promise, defaultTime = 60000;

    return {
        setDefaultTime: function (time) {
            defaultTime = time;
        },
        $get: function ($timeout) {
            return {
                putData: function (data, time) {

                    if (promise) $timeout.cancel(promise);
                    if (!angular.isNumber(time) || time < 0) time = defaultTime;

                    cache = data;

                    promise = $timeout(function () {
                        cache = null;
                    }, time);
                },
                getData: function (data) {
                    return cache;
                }

            }
        }
    }
})<br><br><br><!--Task2.html-->
Задание 2
<script src="../Libraries/angular.js"></script>
<script src="ServicesTask2.js"></script>

<script>
    angular.module("app", ["cachingModule"])
    .config(function (cachServiceProvider) {

        cachServiceProvider.setDefaultTime(10000);
    })
    .controller("appCtrl", function ($scope, cachService) {

        $scope.put = function () {
            cachService.putData($scope.cache, $scope.time);
            $scope.cache = "";
        }

        $scope.get = function () {

            var result = cachService.getData();

            if (result == null) {
                $scope.cache = "Cache is empty"
            } else {
                $scope.cache = result;
            }
                
        }
    })
</script>
Data for caching = <input type="text" placeholder="Data for caching" ng-model="cache"><br /> <br />
Lifetime (optional, default 5000 ms) = <input type="number" min="0" placeholder="Lifetime (ms)" ng-model="time"><br /><br />

<input type="button" value="Put cache" ng-click="put()" />
<input type="button" value="Get cache" ng-click="get()" />