javascript - AngularJS 从服务器加载数据(设置)

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

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

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 /指令中

angular.controller('MyController', MyController);

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