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中创建函数。你可以使用＆＃34;这个＆＃34;并通过控制器名称或别名访问控制器中的数据：

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

规范化AngularJS中的控制器

2 个答案: