CODEWITHSUNDEEP
angularjstwitter-bootstrap
nikbe28
nikbe28

Reputation: 87

Reduce the code redundancy in angularjs function

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>

Upvotes: 1

Views: 618

Answers (3)

mcfedr
mcfedr

Reputation: 7975

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);
});

Upvotes: 0

Maher
Maher

Reputation: 2547

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>

Upvotes: 0

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

Related Questions