將參數傳遞給角

Question

我將創建一個控制器，該控制器將在數據庫的選定表中列出不同的選定字段，並將其傳遞給我的API。

目前，我正在使用一個髒方法，它創建了幾個控制器，其中有字段名和表名。

controller.js

.controller('ListDistinctCustomerCtrl', function($scope, $http) { 
    var xhr = $http({ 
    method: 'post', 
    url: 'http://localhost/api/list-distinct.php?table=customer&field=cust_code' 
    }); 
    xhr.success(function(data){ 
    $scope.data = data.data; 
    }); 
}) 

.controller('ListDistinctSupplierCtrl', function($scope, $http) { 
    var xhr = $http({ 
    method: 'post', 
    url: 'http://localhost/api/list-distinct.php?table=supplier&field=supp_code' 
    }); 
    xhr.success(function(data){ 
    $scope.data = data.data; 
    }); 
}) 

，這是API文件

列表distinct.php

<?php 
require_once '/config/dbconfig.php'; 
$table = $_GET['table']; 
$field = $_GET['field']; 
GetData($table,$field); 

function GetData($tablename,$fieldname) { 
    $sql = "SELECT distinct $fieldname as expr1 FROM $tablename order by expr1 asc"; 
    try { 
     $db = getdb(); 
     $stmt = $db->prepare($sql); 
     $stmt->execute(); 
     $data = $stmt->fetchAll(PDO::FETCH_OBJ); 
     $db = null; 
     echo json_encode(array('data' => $data)); 
    } catch(PDOException $e) { 
     echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    } 
} 
?> 

我相信這是一個乾淨，更好的方式來做這個。

Answer 1

您可以創建一個包含訪問您的API的方法的服務。這將使您能夠減少您的控制器中的代碼重複，並允許一般更乾淨的代碼。

.service('APIService', function($http){ 
    var base = 'http://localhost/api/'; 
    this.listDistinct = function(table, field){ 
     return $http({ 
      method: 'post' 
      , url: base + '/list-distinct.php' 
      , params: { 
       table: table 
       , field: field 
      } 
     }); 
    } 
}); 

您的控制器會注入服務並調用訪問api所需的任何方法。結果將通過附加承諾回調以相同的方式獲得。

.controller('ListCtrl', function($scope, APIService){ 
    APIService.listDistinct('customer', 'cust_code').then(function(data){ 
     $scope.data = data; 
    }) 
}); 

對於PHP代碼，您需要使用可能的表/字段名稱的白名單以確保安全操作。沒有這樣的檢查，你很容易受到SQL注入攻擊。一個簡單的數組檢查就足夠了。

$safeTables = ['customer', 'supplier']; 
$safeFields = ['cust_code', 'supp_code']; 

if (!in_array($tablename, $safeTables) || !in_array($fieldname, $safeFields)){ 
    throw new Exception('Invalid parameter'); 
} 

Answer 2

首先，如果你想的$ HTTP來傳遞參數有一個更清潔方法：

$http( 
    { 
     url: 'your url', 
     method: 'GET or POST', 
     params: { 
     // list of params 
     } 
    } 
); 

現在，是代碼維護和可讀性使用Service provider重要。 您可以使用Factory作爲服務並創建API服務。

例子：

angular.module('yourModule').factory('ServiceAPI', [ '$http', function ($http) { 

var factory = {}; 

//PUBLIC METHODS 
factory.method = method; 

function method() { 
    return $http( 
      { 
       url: 'your url', 
       method: 'GET or POST', 
       params: { 
       // list of params 
       } 
      } 
     ); 
} 

return factory; 
} ]); 

現在你可以在與HTTP的承諾回覆您的控制器和使用方法，功能注入ServiceAPI。

angular.module('your module').controller('Ctrl', [ '$scope', 'ServiceAPI' , 
function ($scope, ServiceAPI) { 

    ServiceAPI.method.then(function (data) { 
     $scope.data = data; 
    }, function(){console.err('error');}); 
} 
]); 

AngularJS方面，現在是清晰可讀的。

我希望能對你有所幫助。 享受

Answer 3

其時間Angular Providers

這是你的情況的一個例子：

angular.module('starter') 
.factory('services', services); 

function services($http) { 
     var services = { 
      customer: customer, 
      supplier: supplier, 
     }; 
     return services; 

     //customer service 
     function customer() { 
      var req = { 
       method: 'POST', 
       url: 'http://localhost/api/list-distinct.php?table=customer&field=cust_code', 
       headers: { 
        'Accept' : 'application/json', 
        'contentType': "application/json" 
       } 
      }; 
      return $http(req); 
     }, 

     //supplier service 
     function supplier() { 
      var req = { 
       method: 'POST, 
       url: 'http://localhost/api/list-distinct.php?table=supplier&field=supp_code', 
       headers: { 
        'Accept' : 'application/json', 
        'contentType': "application/json" 
       } 
      }; 
      return $http(req); 
     }; 
} 

然後你從控制器內調用它們像這樣：

services.customer().then(
     function(response) { 
     //do whatever is needed with the response 
     console.log(response); 
     }, 

     function (error) { 
     console.log(error); 
     } 
    ); 




services.supplier().then(
      function(response) { 
      //do whatever is needed with the response 
      console.log(response); 
      }, 

      function (error) { 
      console.log(error); 
      } 
     );