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

AngularJS load data (settings) from server

本文关键字：设置 数据 加载 服务器 AngularJS      更新时间：2023-09-26

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

数据库中存储了一些由键值对组成的设置。想想"最低订单金额"answers"配送成本"之类的设置。通常，我只需在我的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);
});

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

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

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

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

相关文章：