Angularjs：将$http注入module.config的替代方案

所以，我尝试在我的应用程序中使用ui路由器状态。该应用程序显示有关项目的信息，并且根据项目的类型，页面的布局将大不相同。因此，我有一堆完全独立的html页面，每种类型对应一个页面

用户可能会点击如下url:“app/items/id:18273981729”。在这种情况下，我希望去掉id，发送http GET请求以访问数据库，检索具有该id的项，检查该项的类型，并根据用户指定id的项的类型将用户路由到正确的html页面

我通常尝试做以下几点：

angular.module('app').config(function ($stateProvider, $http) {
    $stateProvider.state('display', {
        url: 'app/items/:itemId',
        templateUrl: function(attrs) {

            var url = '';

            // use $http.get to get the item from the database,
            // check it's type, and return the correct URL
            $http.get('/api/items/' + attrs.itemId).success(
                function(data) {
                    var itemType = data['itemType'];
                    switch (itemType) {
                        case 'type1':
                            url = 'url1';
                        case 'type2':
                            url = 'url2';
                    }
                }
            );

            return url;
        },
        controller: 'displayCtrl as display'
    });
});

---

正如我现在知道的，由于$http是一个服务，所以不能将其注入module.config。我听说可以将服务注入到run函数中，但是当我在上面的伪代码中将“config”替换为“run”时，一切都不起作用。我还有什么其他选择？我不确定如何实现我的目标。

您可以将命名函数与

$inject

模块一起使用。试试这个

angular.module('app').config(function ($stateProvider, $http) {
    $stateProvider.state('display', {
        url: 'app/items/:itemId',
        templateUrl: templateFn,
        controller: 'displayCtrl as display'
    });
});

templateFn.$inject = ['$http'];


function templateFn(attrs) {

            var url = '';

            // use $http.get to get the item from the database,
            // check it's type, and return the correct URL
            $http.get('/api/items/' + attrs.itemId).success(
                function(data) {
                    var itemType = data['itemType'];
                    switch (itemType) {
                        case 'type1':
                            url = 'url1';
                        case 'type2':
                            url = 'url2';
                    }
                }
            );

            return url;
        }
}

---

或者可以使用可注入的templateProvider。在那里，您可以获取数据、执行逻辑并基于以下内容返回模板：

'templateProvider': [
    '$http',
    function ($http) {
        return $http.get('a.json').then(
            function (response) {
                return $http.get(response.data.type + '.html').then(
                    function (response) {
                        return response.data;
                    }
                );
            }
        );
    }
]

---

Plunker上的工作示例：

即使您通过$injector获得

$http

，它也不会工作，因为您是异步进行的。考虑使用HtpHe拦截器，您可以在请求函数中返回一个承诺。您可以使用SIMON对象来执行逻辑，只能调用配置中的提供程序，即$HTTPvices。您可以创建一个已注入$http的提供程序，并从您的解析调用该提供程序object@JacobCarter，既然您可以将提供程序注入module.config，而且不允许将服务注入module.config，为什么允许您将服务注入提供程序？这难道不允许人们打破规则，将服务潜入配置吗？我不知道你们从何而来的想法，不能在解析函数中直接使用$http，但这是错误的。可以：未定义$inject属性here@ZacharyForster没有$注入不是未定义的。它是一个预定义的角度模块。检查docs[$inject]（），但当我使用该代码时，它失败了，因为templateFn没有属性$inject。。你是说“templateFn.$inject=['$http']”而不是“templateFn.$inject['$http']”吗？@ZacharyForster噢，是的，对不起。你说得对。我更新了它。检查一下。