AngularJS中的规范化控制器 - Normalising controller in AngularJS

我对AngularJS来说是新手。我已经编写了一个代码，它工作正常。想知道，有没有办法进一步缩小控制器。我的索引.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>

而主控制器.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内部添加检查以防止边缘情况（无需查找空的客户名称），但这应该对您有用。

如果您将创建用于获取数据的服务，那就更好了。

app.service('dataService', function($http) {
    this.get = function get(param) {
        return $http({
            url: "http://localhost:8080/cordovaprojects/123m/www/customer.php", 
            method: "GET",
            params: {'name': param}
        });
    }
});
app.controller('customersCtrl', function($scope, dataService) {
    dataService.get('powercom').then(function(response) {
        $scope.myData = response.data.records
    });
    $scope.newSearch = function() {
        $scope.newSea = $scope.sea;
        dataService.get($scope.newSea).then(function(response) {
            $scope.myData = response.data.records
        });
    };
});

并且也不需要在您的$scope中创建函数。您可以使用"this"并通过控制器名称或别名访问控制器中的数据，如下所示：

<div ng-controller="customersController as ctrl"><p ng-click="ctrl.newSearch">Hello</p></div>