Increment count with click of button while decrementing another count and vice versa without reseting to default score

Question

I have three .js files here. This code works fine except the count scores don't correlate with the other clicking of the button. I would like to add these requirements to my code as well: Each service will store the counter that displays above/below the buttons as a property on the service. Each service will have at least 3 methods: increment, decrement, and reset, which resets the counter to 100. The counter property in the services must NOT be directly manipulated by a controller - you should create public methods in your services to perform the operations instead, which are called by the controller.

//home.js
var app = angular.module('MyApp');

app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";

$scope.redOutput = 100;
$scope.blueOutput = 100;

$scope.countRed = function () {
    $rs.countUp++;
    $scope.redOutput = $rs.countUp;
    $bs.coundDown--;
    $scope.blueOutput = $bs.coundDown;
}

$scope.countBlue = function () {
    $bs.countUp++;
    $scope.blueOutput = $bs.countUp;
    $rs.countDown--;
    $scope.redOutput = $rs.countDown;
}

}]);


//blueService.js
var app = angular.module("MyBlueService", []);

app.service("BlueService", function () {
    this.countUp = 100;
    this.coundDown = 100;
})

//redService.js
var app = angular.module("MyRedService", []);

app.service("RedService", function() {
    this.countUp = 100;
    this.countDown = 100;
})

---

here is my HTML code //html

<div class="row">
    <div class="col-xs-12 buttons">
       <h1 class='title'>{{title}}</h1>
        <button class="btn red" ng-click="countRed()">Button</button>
        <h1>{{redOutput}}</h1>

         <br><br><br><br><br><br>
        <button class="btn blue" ng-click="countBlue()">Button</button>
        <h1>{{blueOutput}}</h1>
    </div>
</div>

enter image description here

Answer 1

As I understand You need to have two buttons, if click first -> it counter gets up and counter second one gets down. I have done it by starting from Your code, but I've simplified the solution, so both services has only one counter and I set services directly into scope to avoid many assignments and variables. Check my working example:

//home.js
var app = angular.module('MyApp',[]);

app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";

//services to scope directly
$scope.$rs=$rs;
$scope.$bs=$bs;

$scope.countRed = function () {
    $rs.count++;
    $bs.count--;
}

$scope.countBlue = function () {
    $bs.count++;
    $rs.count--;
}

}]);


//blueService.js

app.service("BlueService", function () {
    this.count = 100;//single counter
})

//redService.js

app.service("RedService", function() {
    this.count = 100; //single counter
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="HomeController" class="row">
    <div class="col-xs-12 buttons">
       <h1 class='title'>{{title}}</h1>
        <button class="btn red" ng-click="countRed()">Button</button>
        <h1>{{$rs.count}}</h1>

        <button class="btn blue" ng-click="countBlue()">Button</button>
        <h1>{{$bs.count}}</h1>
    </div>
</div>

EDIT. AFTER COMMENT.

//home.js
var app = angular.module('MyApp',[]);

app.controller("HomeController", ['$scope', 'RedService', 'BlueService', function ($scope, $rs, $bs) {
$scope.title = "The Mighty Clicker";

//services to scope directly
$scope.$rs=$rs;
$scope.$bs=$bs;

$scope.countRed = function () {
  
    $rs.increment();
    $bs.decrement();
}

$scope.countBlue = function () {
    $bs.increment();
    $rs.decrement();
}

$scope.reset=function(){

  $bs.reset();
  $rs.reset();
  
}

}]);


//return constructor
//create for DRY
app.service("Counter",function(){

    return function(){
    this.count = 100;//single counter
  
    this.increment=function(){
       
        this.count++;
    };
  
    this.decrement=function(){
       
        this.count--;
    };
  
    this.reset=function(){
    
        this.count=100;
    };

    };
     
});

//blueService.js

app.service("BlueService", ["Counter",function ($cf) {
    
   return new $cf;
  
}]);

//redService.js

app.service("RedService", ["Counter",function ($cf) {
    
   return new $cf;
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="HomeController" class="row">
    <div class="col-xs-12 buttons">
       <h1 class='title'>{{title}}</h1>
        <button class="btn red" ng-click="countRed()">Button</button>
        <h1>{{$rs.count}}</h1>

        <button class="btn blue" ng-click="countBlue()">Button</button>
        <h1>{{$bs.count}}</h1>
      
        <button ng-click="reset()">Reset counters</button>
    </div>
</div>

Answer 2

As @gyc mentioned in his post, there was a typo. I have created the plunkr with the same design architecture (3 modules and each of them with a service).

RedApp and BlueApp modules are added to MainApp module as dependencies and used their in myApp's controller.

var myApp = angular.module("MainApp", ["RedApp", "BlueApp"]);

myApp.controller("MyAppController", ["$scope", "RedAppService", "BlueAppService", function($scope, $rs, $bs) {

  $scope.title = "The Mighty Clicker";

  $scope.redOutput = 100;
  $scope.blueOutput = 100;

  $scope.countRed = function() {
    $rs.countUp++;
    $scope.redOutput = $rs.countUp;
    $bs.countDown--;
    $scope.blueOutput = $bs.countDown;
  }

  $scope.countBlue = function() {
    $bs.countUp++;
    $scope.blueOutput = $bs.countUp;
    $rs.countDown--;
    $scope.redOutput = $rs.countDown;
  }


}]);

var redApp = angular.module("RedApp", []);

var blueApp = angular.module("BlueApp", []);

redApp.service("RedAppService", function() {

  this.countUp = 100;
  this.countDown = 100;
});

blueApp.service("BlueAppService", function() {

  this.countUp = 100;
  this.countDown = 100;
});

Answer 3

Not exactly sure what the rules are but from what I understand I made a plunker:

https://plnkr.co/edit/lrMgM8lcm0FtCIQbZLlf?p=preview

It looks like the code works without needing change except for the typos :D

$scope.blueOutput = blueService.countDown;

You mispelled countDown with coundDown