Рубрики

AngularJS | Заводской метод

AngularJS Factory Method делает процесс разработки приложения AngularJS более надежным. Фабрика — это простая функция, которая позволяет нам добавлять логику к созданному объекту и возвращать созданный объект. Фабрика также используется для создания / возврата функции в форме кода многократного использования, который можно использовать в любом месте приложения. Всякий раз, когда мы создаем объект с использованием фабрики, он всегда возвращает новый экземпляр для этого объекта. Объект, возвращаемый фабрикой, может быть интегрирован (безвозвратно) с различными компонентами инфраструктуры Angularjs, такими как контроллер, сервис, фильтр или директива.

Использование:
На практике Scenario Factory обычно выступает в качестве контейнера или класса для набора функций, которые выполняют различные функции приложения. При использовании с функцией конструктора ее можно инициировать в разных контроллерах.

Синтаксис:

module.factory( 'factoryName', function(){ Custom code....});

Пример:
Следующий пример иллюстрирует использование заводского кода, созданного внутри контроллера, для генерации случайного числа.

<!DOCTYPE html>

<html>

  

<head>

    <title>Factory Example 1</title>

  

    <script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

    </script>

    <script>

        var application = angular.module('myApp', []);

  

        application.factory('random', function() {

            var randomObject = {};

            var number = Math.floor(Math.random() * 100);

            randomObject.generate = function() {

                return number;

            };

            return randomObject;

        });

        

        application.controller('thisapp', function($scope, random) {

            $scope.generateRandom = function() {

                $scope.randomNumber = random.generate();

            };

        });

    </script>

</head>

  

<body>

    <h1 style="color:green">GeeksforGeeks</h1>

    <h2>Factory Examples</h2>

    <div ng-app="myApp" ng-controller="thisapp">

        <button ng-click="generateRandom()">

          Generate Random Number

      </button>

        <br>{{randomNumber}}

    </div>

</body>

  

</html>

Выход:

При нажатии на кнопку генерации случайного числа мы каждый раз получаем разные числа. В этом примере мы используем фабричный метод, чтобы определить функцию, которая несет переменную, и используя Math.random, мы сохраняем случайное значение этой переменной каждый раз, когда вызывается эта функция. Затем эта функция вызывается в контроллере, чья переменная $ scope переносит случайное значение из вызываемой функции, затем мы вызываем этот контроллер в наш HTML-код для отображения результата.

Пример: В этом примере используется фабрика для создания функции для поиска сложения или вычитания двух чисел. эта функция затем загружается в переменную $ scope контроллера, которая передает их в html-код для отображения результатов.

<!DOCTYPE html>

<html>

  

<head>

    <title>Factory Example 2</title>

    <script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

    </script>

    <script>

        var application = angular.module('myApp', []);

  

        application.factory('MyFactoryService', function() {

            var factory = {};

            factory.Subtract = function(a, b) {

                return a - b;

            };

            factory.Add = function(a, b) {

                return a + b;

            };

            return factory;

        });

  

        application.controller('thisapp', function(

                               $scope, MyFactoryService) {

            $scope.result = function() {

                $scope.results = 

                  MyFactoryService.Subtract($scope.num1, $scope.num2)

            };

            $scope.result2 = function() {

                $scope.results = 

                  MyFactoryService.Add($scope.num1, $scope.num2)

            };

        });

    </script>

</head>

  

<body>

    <h1 style="color:green">GeeksforGeeks</h1>

    <h2>Factory Example 2</h2>

    <div ng-app="myApp" ng-controller="thisapp">

        <p>

            Enter A Number:

            <input type="number" ng-model="num1" />

            <br/> Enter A Number:

            <input type="number" ng-model="num2" />

            <br/>

        </p>

        <button ng-click="result()">Subtract</button>

        <button ng-click="result2()">Add</button>

        <p>Results: {{results}}

    </div>

</body>

  

</html>

Выход:
Перед:

После ввода ввода при нажатии на кнопку сложения / вычитания отображается результат:

Рекомендуемые посты:

AngularJS | Заводской метод

0.00 (0%) 0 votes