減少angularjs函數中的代碼冗餘

我是一個調用函數兩次（我認爲哪些是不必要的），所以我如何減少代碼以便提高我的應用程序性能。減少angularjs函數中的代碼冗餘

這是我的代碼：

<!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>

來源

2015-12-21 nikbe28

然後使用工廠/服務並將其注入到控制器中。 – Jai

是的，你可以創建一個服務並在那裏添加這個功能。你可以在控制器中使用相同的服務 –

爲什麼當他們都做同樣的事情時你需要2個控制器？爲什麼不在兩個地方使用相同的控制器？ – georgeawg

我覺得這是你的目標。我希望可以幫助您

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>

來源

2015-12-21 07:22:24 Maher

當您使用相同的AJAX請求，那麼它可以爲使其服務/工廠的適當人選：

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

現在imgdata可以注射：

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

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

其他控制器也一樣。

來源

2015-12-21 07:17:21 Jai

視您可能會在以後使用它，但目前我將創建看起來有點服務這樣

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

那麼你的控制器是死的簡單

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

來源

2015-12-21 07:30:13 mcfedr

減少angularjs函數中的代碼冗餘

回答

相關問題