AngularJS 中的标准化控制器

Question

我对 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。

谢谢。

Answer 1

正如@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 中添加检查以防止边缘情况（无需查找空客户名称），但这应该适合您。

Answer 2

如果您创建获取数据的服务会更好。

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>

AngularJS 中的标准化控制器

Normalising controller in AngularJS

javascript

php

angularjs

angular-http