减少angularjs函数中的代码冗余_Angularjs_Twitter Bootstrap

减少angularjs函数中的代码冗余

angularjs twitter-bootstrap

减少angularjs函数中的代码冗余,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我两次调用函数（我认为这是不必要的），因此如何减少代码以提高应用程序性能这是我的代码： <!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"&g

我两次调用函数（我认为这是不必要的），因此如何减少代码以提高应用程序性能

这是我的代码：

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


寻找自由职业者。。
经验水平：

入门级：
{{data.name}
中级：
{{data.sname}
var app=angular.module（'demo'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）
{
$scope.myClick=函数（事件）{
$http.get（“image.json”）
.成功（功能（响应）{
$scope.people=response.jsonrecords；
});
}
});
app.controller（'myCtrl1'，函数（$scope，$http）
{
$scope.myClick1=函数（事件）{
$http.get（“image.json”）
.成功（功能（响应）{
$scope.people=response.jsonrecords；
});
}
});

当您使用相同的ajax请求时，它可能是使其成为服务/工厂的合适人选：

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

其他控制器也是如此。

我认为这是您的目标。。我希望能帮助你

var-app=angular.module（'demo'，[]）；
app.controller（'myCtrl'，函数（$scope，appService）{
$scope.myClick=函数（事件）{
如果（$scope.checkbox1）{
appService.get（）.success（函数（响应）{
//$scope.people=响应；
});
}否则{
$scope.people=[]；
}
}
});
应用控制器（'myCtrl1'，功能（$scope，appService）{
$scope.myClick1=函数（事件）{
如果（$scope.checkbox2）{
appService.get（）.success（函数（响应）{
//$scope.people=响应；
});
}否则{
$scope.people=[]；
}
}
});
app.service（“appService”，函数（$http）{
this.get=函数（）{
返回http({
url:“image.json”，
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”
},
异步：true
});
}
this.post=函数（）{
返回http({
数据：“///”，
url:“url”，
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
异步：true
});
}
//和…编辑..删除
});

入门级：
{{data.name}
中级：
{{data.name}
取决于您以后可能如何使用它，但目前我将创建一个看起来有点像这样的服务
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);
});

然后使用工厂/服务并将其注入控制器。是的，您可以创建一个服务并在其中添加此功能。然后，您可以通过在控制器中注入服务来使用相同的控制器当它们都执行相同的操作时，为什么需要两个控制器？为什么不在两个地方使用相同的控制器？
app.controller('myCtrl',function($scope, getPeople) {
    $scope.myClick = getPeople($scope);
});