Reduce the code redundancy in angularjs function

Question

I am a calling function two time (I think which is not necessary) so how I can reduce the code so that my application performance will improve.

This is my code:

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="jq.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<title>find freelancer..</title>
</head>
<body>
<div ng-controller="myCtrl">
Experence Level:    <br>

Entry level:<input type="checkbox" ng-click="myClick()">
<div ng-repeat="data in people">
 {{data.name}}
</div>

</div>
<div ng-controller="myCtrl1">
 Intermediate level:<input type="checkbox" ng-click="myClick1()">
<div ng-repeat="data in people">
 {{data.sname}}
</div>
</div>
<script>
 var app=angular.module('demo',[]);
 app.controller('myCtrl',function($scope,$http)
 {
  $scope.myClick=function(event) {
  $http.get("image.json")
  .success(function(response){
   $scope.people=response.jsonrecords;
  });
 }
 });
app.controller('myCtrl1',function($scope,$http)
{
 $scope.myClick1=function(event) {
  $http.get("image.json")
  .success(function(response){
  $scope.people=response.jsonrecords;
 });
}
});
</script>
</body>
</html>

Use a factory/service then and inject it in your controllers. — Jai
– Jai, Commented Dec 21, 2015 at 7:03
Yes, you can create a service and add this function there. you can then use the same by injecting service in your controller — Aditya Sethi
– Aditya Sethi, Commented Dec 21, 2015 at 7:04
Why do you need 2 controllers when they both do the same thing? Why not use the same controller in two places? — georgeawg
– georgeawg, Commented Dec 21, 2015 at 8:34

Jai · Accepted Answer · 2015-12-21 07:17:21Z

1

As you are using same ajax request then it can be a proper candidate for making it a service/factory:

app.factory ('imgdata', ['$http', function(){
    var result = $http.get('urlhere');
    return result;  // <--return it here.
});

Now imgdata can be injected:

  app.controller('myCtrl',['$scope', 'imgdata', function($scope, imgdata){

        $scope.myClick=function(event) {
               imgdata.then(function (resp){
                    $scope.people = resp.data;
               });
        };
 });

Same goes for other controller.

answered Dec 21, 2015 at 7:17

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maher · Accepted Answer · 2015-12-21 07:22:24Z

I think this is your target.. i hope helps you

var app = angular.module('demo', []);

app.controller('myCtrl', function($scope, appService) {
  $scope.myClick = function(event) {
    if ($scope.checkbox1) {
      appService.get().success(function(response) {
        //$scope.people = response;
      });
    } else {
      $scope.people = [];
    }
  }
});

app.controller('myCtrl1', function($scope, appService) {
  $scope.myClick1 = function(event) {
    if ($scope.checkbox2) {
      appService.get().success(function(response) {
        //$scope.people = response;
      });
    } else {
      $scope.people = [];
    }
  }
});

app.service("appService", function($http) {
  this.get = function() {
    return http({
      url: "image.json",
      method: "GET",
      headers: {
        'Content-Type': "application/json"
      },
      async: true
    });
  }

  this.post = function() {
    return http({
      data: "////",
      url: "url",
      method: "POST",
      headers: {
        'Content-Type': "application/json"
      },
      async: true
    });
  }

  //and .... edit .. delete
});

<!doctype html>
<html ng-app="demo">

<head>
</head>

<body>
  <div ng-controller="myCtrl">
    Entry level:
    <input type="checkbox" ng-model="checkbox1" ng-change="myClick()">
    <div ng-repeat="data in people">
      {{data.name}}
    </div>
  </div>


  <div ng-controller="myCtrl1">
    Intermediate level:
    <input type="checkbox" ng-model="checkbox2" ng-change="myClick1()">
    <div ng-repeat="data in people">
      {{data.name}}
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</body>

</html>

mcfedr · Accepted Answer · 2015-12-21 07:30:13Z

0

Depending on how you might use it later, but for the moment I would create a service looking a bit like this

app.factory('getPeople', function($http) {
    return function($scope) {
        return function(event) {
            $http.get('image.json').success(function(response) {
                $scope.people = response.jsonrecords;
            });
        };
    };
});

Then your controller is dead simple

app.controller('myCtrl',function($scope, getPeople) {
    $scope.myClick = getPeople($scope);
});

answered Dec 21, 2015 at 7:30

mcfedr

7,9953 gold badges34 silver badges28 bronze badges

Collectives™ on Stack Overflow

Reduce the code redundancy in angularjs function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related