Exploring ways to implement identical 'if' conditions across various controllers in AngularJS

Question

Exploring ways to implement identical 'if' conditions across various controllers in AngularJS

Is there a way to avoid repeating the if condition in multiple controllers? How can I simplify this process?

MainController.js :

 $scope.responseData.forEach(function(card) {

    switch (card.Category) {
        case 'Apple':
            console.log("Apple");
            break;
        case 'Google':
            console.log("Google");
            break;
        case 'Microsoft':
            console.log("Microsoft");
            break;
        case 'Amazon':
            console.log("Amazon");
            break;
    }
});

FirstController.js :

$scope.responseData.forEach(function(card) {
    switch (card.Category) {
        case 'Apple':
            console.log("Apple");
            break;
        case 'Google':
            console.log("Google");
            break;
        case 'Microsoft':
            console.log("Microsoft");
            break;
        case 'Amazon':
            console.log("Amazon");
            break;
    }
});

SecondController.js :

$scope.responseData.forEach(function(card) {

   switch (card.Category) {
        case 'Apple':
            console.log("Apple");
            break;
        case 'Google':
            console.log("Google");
            break;
        case 'Microsoft':
            console.log("Microsoft");
            break;
        case 'Amazon':
            console.log("Amazon");
            break;
    }

});

How can I centralize this condition and reuse it across multiple controllers?

javascript angularjs

Answer 1

Answer №1

To address your query, one effective method is to utilize a factory. I have provided an illustrative example below: https://jsbin.com/veregejawo/1/edit?html,js,console,output Hopefully, this demonstration proves helpful: HTML:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="app">

<div ng-controller="mainController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Apple')">Apple</button>
</div>

<div ng-controller="firstController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Google')">Google</button>
</div>

<div ng-controller="secondController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Microsoft')">Microsoft</button>
</div>

<script>

</script>

</body>
</html>

Controller:

angular.module('app', []);
angular.module('app').factory('ifFactory', function () {

    var factory = {};
    factory.checkIf = function (param) {
        if (param == 'Apple') {
           console.log("Apple");
         } else if (param == 'Google') {
           console.log("Google");
         } else if (param == 'Microsoft') {
           console.log("Microsoft");
         } else if (param == 'Amazon') {
           console.log("Amazon");
         }
    };
    return factory;

});

angular.module('app').controller('mainController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "mainController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

angular.module('app').controller('firstController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "FirstController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

angular.module('app').controller('secondController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "SecondController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

Answer 2

To address your query, one effective method is to utilize a factory. I have provided an illustrative example below: https://jsbin.com/veregejawo/1/edit?html,js,console,output Hopefully, this demonstration proves helpful: HTML:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="app">

<div ng-controller="mainController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Apple')">Apple</button>
</div>

<div ng-controller="firstController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Google')">Google</button>
</div>

<div ng-controller="secondController">
  {{controller}}
  <br>
  <button ng-click="testfactory('Microsoft')">Microsoft</button>
</div>

<script>

</script>

</body>
</html>

Controller:

angular.module('app', []);
angular.module('app').factory('ifFactory', function () {

    var factory = {};
    factory.checkIf = function (param) {
        if (param == 'Apple') {
           console.log("Apple");
         } else if (param == 'Google') {
           console.log("Google");
         } else if (param == 'Microsoft') {
           console.log("Microsoft");
         } else if (param == 'Amazon') {
           console.log("Amazon");
         }
    };
    return factory;

});

angular.module('app').controller('mainController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "mainController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

angular.module('app').controller('firstController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "FirstController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

angular.module('app').controller('secondController', ['$scope', 'ifFactory',
    function ($scope, ifFactory) {
      $scope.controller = "SecondController";

      $scope.testfactory = function(param){
        ifFactory.checkIf(param);
      }
    }
]);

Exploring ways to implement identical 'if' conditions across various controllers in AngularJS

Answer №1

Similar questions

Concealing option value based on ng-if conditions in AngularJS: A guide

Error Alert: Request missing connection details while trying to connect to Sql server via express.js

Variations in how words are organized within a sentence

Update the default payment method to Braintree's drop-in user interface for seamless checkout

What are some ways to streamline and improve the readability of my if/else if statement?

Updating a table dynamically after a form submission using jQuery, Ajax, and PHP without needing to refresh the page

Storing multiple textbox values in a single column in PHP

Issues with Jquery and revslider functionality in React.js are causing problems

How to retrieve the row index from a table using JavaScript

Utilizing React: Incorporating classes to elements with innerHTML

Bringing in manageable RxJS operators

Monitoring alterations in dynamically produced input fields using jQuery

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Optimizing Google e2e testing using Protractor

How can I set the initial Number of SMS to 1 when the characters are less than or equal to 160?

Guide on merging two objects in AngularJS

"Troubleshooting the issue of AngularJS $http patch request failing to send

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Building a dynamic Single Page Application with the power of Durandal

I'm having some trouble with this search filter in Vue 2 - is it failing to display the items as expected