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

Question

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

用户可能会点击 url，如下所示：'app/items/id:18273981729'。在那种情况下，我想去掉 id，发出一个 http GET 请求来访问数据库，检索具有该 id 的项目，检查项目的类型，然后将用户路由到正确的 html页面，取决于指定了 id he/she 的项目的类型。

我通常尝试执行以下操作：

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。我听说可以将服务注入运行函数，但是当我在上面的伪代码中将 "config" 替换为 "run" 时，没有任何效果。我在这里还有什么其他选择？我不确定如何实现我的目标。

Answer 1

您可以在 $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;
        }
}

Answer 2

或者你可以使用可注入的templateProvider。在那里你可以获取数据，做你的逻辑和return模板基于：

'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 上的工作示例：http://plnkr.co/edit/gBi1LAJ8rmv6a3d1t9Gl?p=preview

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

Angularjs: alternative to injecting $http into module.config

dependency-injection

angularjs

angular-ui-router