Re-Usable Angularjs Code

Question

I have scope function ClickA and ClickB in my controller CtrlA, I want to re-use ClickA and ClickB with there containing scope variables "a" and "b" in almost every other controllers, I mean, I simply want to make available these click functions and its containing variables to other controllers without redefining them. It may be possible with services/factory but have no idea to work with them or its directory don't know, can someone suggest me with an example please and yes after injecting/calling these code they should become part of $scope variable for the respective controller.

angular.module("App").controller("CtrlA", function($scope)
{

$scope.ClickA = function(){

$scope.a =true;
$scope.b = false;
}


$scope.ClickB = function(){

$scope.a =false;
$scope.b = true;
}

});

<button ng-click="ClickA()"/>
{{a}}<br>
{{b}}

<button ng-click="ClickB()"/>
{{a}}<br>
{{b}}

Tomek Małecki, I could have used the directive but the problem is that I am returning the code(html) from the mvc controller which is based on the access level, means all the buttons are defined conditionally. So after retrieving the buttons in html view I want to inject some similar code to my controller and attach it to $scope variable and use it. — Scavenger, Commented Jul 24, 2017 at 5:53

georgeawg · Accepted Answer · 2017-07-24 12:19:34Z

Create a service:

app.service("service", function() {
    this.ClickA = function(){
        this.a = true;
        this.b = false;
    }
    this.ClickB = function(){
        this.a = false;
        this.b = true;
    }
})

In the controller, bind to $scope:

$scope.serviceClickA = service.ClickA.bind($scope);
$scope.serviceClickB = service.ClickB.bind($scope);

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope, service) {
    $scope.ClickA = function(){
        $scope.a = "ClickA";
        $scope.b = false;
    }
    $scope.ClickB = function(){
        $scope.a = false;
        $scope.b = "ClickB";
    }
    $scope.serviceClickA = service.ClickA.bind($scope);
    $scope.serviceClickB = service.ClickB.bind($scope);
})
.service("service", function() {
    this.ClickA = function(){
        this.a = "ServiceClickA";
        this.b = false;
    }
    this.ClickB = function(){
        this.a = false;
        this.b = "ServiceClickB";
    }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
      <button ng-click="ClickA()">ClickA</button>
    <br/>
      <button ng-click="ClickB()">ClickB</button>
    <hr/>
      a= {{a}}
    <br/>
      b= {{b}}
    <hr/>
      <button ng-click="serviceClickA()">serviceClickA</button>
    <br/>
      <button ng-click="serviceClickB()">serviceClickB</button>      
  </body>

Himanshu sharma · Accepted Answer · 2017-07-24 07:34:51Z

So to use the same type of functionality in angularJs you should use "Services".

create a services

   angular.module('myApp', [])
.service('myService', function () { 

      this.ClickA = function(a) {
               return a+a;
            }
      this.ClickB = function(a) {
               return a-a;
            }
 })
.controller('myCtrl', ['$scope','myService', function ($scope,myService) {
  // Do something with myService

   $scope.add= myService.ClickA(2);
   $scope.sub= myService.ClickB(2);
}]);

you can use like this .

index.html.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
 <script src="service.js"></script> 
<body>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}  {{add}}</h1>
  </div>
</div>

</body>
</html>

controller.js

angular.module('myApp', [])
.controller('myCtrl', ['$scope','myService', function ($scope,myService) {
  // Do something with myService

   $scope.add= myService.add(2);
   $scope.lastName = "Doe";
}]);

service.js

angular.module('myApp')
.service('myService', function () { 

      this.add = function(a) {
               return a+a;
            };
      this.sub= function(a) {
               return a-a;
            }
 })

As the same way you can access this function in all controller of Angular.

ok fine.

Himanshu sharma, After injecting the serviceA in controller say CtrlA how do I make click functions and its variables part of CtrlA $scope data. — Scavenger, Commented Jul 23, 2017 at 18:31
georgeawg, then how do I make the code available in other controllers as part of their $scope data. — Scavenger, Commented Jul 24, 2017 at 5:27
Look at it code updated with service user . and you can use this service in all the controller . — Himanshu sharma, Commented Jul 24, 2017 at 7:30

Sibiraj · Accepted Answer · 2017-07-24 08:25:14Z

0

To share functions and data across controller you need to use services as they are singleton objects.

angular.module("App")
.factory("helperService", function() {

    var self = this;

    function clickA() {
        self.a = true;
        self.b = false;
    }

    function clickB() {
        self.a = false;
        self.b = true;
    }

    return {
        clickA: clickA,
        clickB: clickB
    }

});

edited Jul 24, 2017 at 8:25

Sibiraj

4,7668 gold badges37 silver badges59 bronze badges

answered Jul 24, 2017 at 6:09

code.rookie

3562 silver badges6 bronze badges

1

code.rookie, and how do I assign the entire service to $scope variable? and moreover I have some variables as well outside of the functions as $scope.var1=true and $scope.var2=false which are not part of the ClickA or ClickB and I want to avail these variables to other controllers as well.
– Scavenger
Commented Jul 24, 2017 at 6:22

Add a comment |

Collectives™ on Stack Overflow

Re-Usable Angularjs Code

3 Answers 3

The DEMO

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related