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

  • 16 Просмотры
  • Последний пост 29 декабря 2016
Maxim Shulga разместил пост 29 декабря 2016

Дополнительное задание 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;
            }
            }
        })



<!--Add1.html--> <!DOCTYPE html> <html ng-app="app"> <head> <title>Дополнительное задание 1</title>
<script src="../Libraries/angular.js"></script> <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> </head> <body ng-controller="appCtrl"> 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="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}} </body> </html>

 

Отсортировать по: Стандартный | Последний | Голоса
Maxim Shulga разместил пост 29 декабря 2016

Задание 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;
                    }
                }
            }
        }
    })



<!--Task1.html--> <!DOCTYPE html> <html ng-app="app"> <head> <title>Задание 1</title> <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> </head> <body ng-controller="appCtrl"> Method for calculating: <select ng-options="item.name for item in methods" ng-model="method"></select><br /><br /> 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}} </body> </html>

 

Maxim Shulga разместил пост 29 декабря 2016

Задание 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;
                    }

                }
            }
        }
    })


<!--Task2.html--> <!DOCTYPE html> <html ng-app="app"> <head> <title>Задание 2</title> <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> </head> <body ng-controller="appCtrl"> 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()" /> </body> </html>

 

Close