对AngularJS来说是相当新的东西。
我已经编写了代码，并且可以正常工作。
想知道，有没有办法进一步缩小控制器。
我的index.html文件是
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<input type="text" ng-model="sea" ng-change="newSearch()"/>
<ul>
<li ng-repeat="x in myData">
{{ x.name + ', ' + x.emailid}}
</li>
</ul>
</div>
<script src="js/app.js"></script>
<script src="js/controllers/maincontroller.js"></script>
</body>
</html>
而且maincontroller.js是
app.controller('customersCtrl', function($scope, $http) {
$http(
{
url: "http://localhost:8080/cordovaprojects/123m/www/customer.php",
method: "GET",
params: {'name':'powercom'}
})
.then(function(response) {
$scope.myData = response.data.records;
});
$scope.newSearch = function() {
$scope.newSea = $scope.sea;
$http(
{
url: "http://localhost:8080/cordovaprojects/123m/www/customer.php",
method: "GET",
params: {'name':$scope.newSea}
})
.then(function(response) {
$scope.myData = response.data.records;
});
};
});
如果您注意到我两次使用相同的
$http函数，但差异为param。谢谢。
最佳答案
正如@maurycy在他的评论中指出的那样，保持控制器较小的方法是将常用功能保持在服务内部。考虑以下服务：
app.service('Customers',
[ '$http',
function($http) {
return {
byName: byName
};
function byName(name) {
return $http({
url: "http://localhost:8080/cordovaprojects/123m/www/customer.php",
method: "GET",
params: {'name': name}
});
}
}
]
);
然后，您可以在像这样的控制器中使用此服务：
app.controller('customersCtrl', [
'$scope', 'Customers',
function($scope, Customers) {
$scope.myData = null;
Customers.byName('powercom')
.then(function(response) {
$scope.myData = response;
});
}
]);
它比您现在的要短很多，而且它是独立的，因此可以在应用程序的任何其他部分使用（并且更容易测试）。如果端点发生更改，则只有一个位置可以更改，并且由于已经在其他地方使用过，因此您已经完成。
更新资料
要绑定ng-click，我假设您有一个绑定到本地模型的输入，以及一个用作点击目标的按钮，如下所示：
<input type="text" data-ng-model="customerName" />
<button data-ng-click="lookupCustomer()">
Lookup Customer
</button>
然后在您的控制器中，您可以通过以下方式定义
lookupCustomer函数：app.controller('customersCtrl', [
'$scope', 'Customers',
function($scope, Customers) {
$scope.customerName = 'powercom';
$scope.lookupCustomer = lookupCustomer;
$scope.myData = null;
lookupCustomer();
function lookupCustomer() {
Customers.byName($scope.customerName)
.then(function(data) {
// Do something with data
});
}
}
]);
您可以在
lookupCustomer内添加检查以防止出现极端情况（无需查找空的客户名），但这对您来说应该有用。