AngularJS中的標準化控制器

對於AngularJS來說，這是相當新穎的。我寫了一個代碼，它的工作正常。想知道，是否有辦法進一步縮小控制器。我index.html文件是AngularJS中的標準化控制器

<!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相差兩倍。

謝謝。

來源

2016-01-18 abbas

保持乾燥，你也許應該關閉或$ HTTP投入運營至少一個功能 – maurycy

這個問題更適合[代碼評論]（http://codereview.stackexchange.com/） – topher

正如@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-點擊，我會假設你已經綁定到本地模式的輸入，以及用於其作爲點擊目標按鈕，這樣的事情：

<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 
       }); 
     } 
    } 
]);

您可以添加CHEC k裏面的lookupCustomer防止邊緣情況下（不需要查找空的客戶名稱），但這應該爲你工作。

來源

2016-01-18 14:24:50

如何在ng-click上使用上面的代碼？ – abbas

@abbas使用ng-click示例更新答案 –

這對'ng-click'正常工作，但默認'powercom'已經消失。 – abbas

如果您要創建獲取數據的服務，效果會更好。

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中創建一個函數。你可以用「這個」，得到這樣的控制器中數據訪問由控制器名稱或別名：

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

來源

2016-01-18 14:27:21 rkalita

AngularJS中的標準化控制器

回答

相關問題