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

Question

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

数据库中存储了一些由键值对组成的设置。想想像 'minimum-order-amount' 和 'delivery-costs' 这样的设置。通常我会简单地在我的 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

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

也可以为配置值实现服务，它将加载一次数据，将其存储在本地并提供 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
     }
}

然后在你的controller/directive

angular.controller('MyController', MyController);

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

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

AngularJS load data (settings) from server

javascript

load

application-settings

angularjs

laravel-5