Question

我用Laravel 5制作了一个简单的食物订购应用程序。现在我正在尝试使用AngularJS分离前端和后端。 Angular从后端获取数据，后端是基于Laravel（Lumen）的REST API。

数据库中存储了一些由键值对组成的设置。考虑“最小订单金额”和“交付成本”等设置。通常，我只需在我的Laravel应用程序中调用setting(key)：

/**
 * Get the value for the given setting from the database.
 *
 * @param  mixed  $key
 * @return mixed
 */
function setting($key)
{
    static $settings;

    if(is_null($settings)) {
        $settings = Cache::rememberForever('settings', function() {
            return array_pluck(App\Setting::all()->toArray(), 'value', 'key');
        });
    }

    return (is_array($key)) ? array_only($settings, $key) : $settings[$key];
}

注意静态函数，它允许我每次请求多次调用setting()函数，但只查询数据库一次。如何在我的Angular应用程序中实现这一目标？

我可以通过以下方式完成同样的事情：

/**
 * Retrieve the value of the given setting.
 */
function setting(key) {
        $.get(apiUrl('api/setting'), function(data) use (key) {
            return data.key;
        });
}

...但这会导致来自数据库的多个请求（对于同一组数据），每页加载多次。这是非常低效的。

编辑（最终工作示例）

app.factory('Setting', ['$q', '$http', function($q, $http) {
    var url = 'api/setting';
    var promise = null;

    function load() {
        if ( ! promise) {
            promise = $q.defer();

            $http.get(apiUrl(url))
                .success(function(data) {
                    promise.resolve(data);
                })
                .error(function(data) {
                    promise.reject(data);
                });
        }

        return promise.promise;
    }

    return {
        load: load
    }
}]);

// Usage
Setting.load().then(function(result) {
    console.log(result);
});

Answer 1

您可以使用角度缓存功能，如下所述：https://docs.angularjs.org/api/ng/service/$http（“缓存”部分）。

也可以为配置值实现服务，它将加载数据一次，在本地存储并为存储值提供getter。

Answer 2

使用服务，必要时使用缓存系统。

angular.factory('SettingsService', SettingsService);

function SettingsService($q, $http) {
    var userUrl = ApiConfigurationService.userUrl;
    var url = 'api/setting';
    var promise = null;

    function loadSettings() {
        if (!promise) {
           promise = $q.defer();

           $http.get('url', function(res) {
                 settings = res.data;
                 promise.resolve(res.data);
            }, function(res) {promise.reject(res)});
        } 
        return promise.promise;
    }

    return {
         loadSettings: loadSettings
     }
}

然后在你的控制器/指令

中

angular.controller('MyController', MyController);

function MyController(SettingsService) {
    var me = this;
    SettingsService.loadSettings(function(res) {
         me.settings = res;});
}

AngularJS从服务器加载数据（设置）

2 个答案: