ngRoute 将解析服务注入组件控制器的问题答案

【问题标题】：Issue with ngRoute injecting resolve services into component controllerngRoute 将解析服务注入组件控制器的问题
【发布时间】：2017-08-31 17:21:57
【问题描述】：

我正在尝试使用 $routeProvider 的 resolve 属性将服务注入控制器，但在运行它时出现此错误。任何建议都会很棒。提前致谢。

错误：[$injector:unpr] 未知提供者：messageProvider

GitUserService.js

module.exports = function (app) {
    app.factory('GitUser', ['$http', function ($http) {
        return {
            GetGitUser: function (username) {
                return $http.get('https://api.github.com/users/' + username)
                .then(function success(response) {
                    return response.data.login;
                }, function error(response) {
                    return console.log("error");
                });
            }
        };
    }]);
};

route.js

module.exports = function (app) {
    require('../../services/GitUserService')(app);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/angularhome', {
            template: '<home></home>',
            resolve: {
                message: ['GitUser', function (GitUser) {
                    return GitUser.GetGitUser('test');
                }]
            }
        })
    }]);
};

HomeController.js

require('./Home.scss');

module.exports = function (app) {
    app.component('home', {
        templateUrl: 'Content/app/components/home/Home.html',
        controller: ['message', HomeController]
    });

    function HomeController(message) {
        this.name = message;
    }
};

index.js

module.exports = function (app) {
    require('./route')(app);
    require('./HomeController')(app);
};

【问题讨论】：

docs.angularjs.org/guide/…
见AngularJS Developer Guide - Components as route templates。另请注意，GitGitUser 函数将被拒绝的承诺转换为成功的承诺。见Angular execution order with $q
谢谢大家，阅读您提供的那些链接可以解决问题！

标签： angularjs webpack angular-routing

【解决方案1】：

根据回复更新了我的代码，这就是修复。

HomeController.js

require('./Home.scss');

module.exports = function (app) {
    app.component('home', {
        templateUrl: 'Content/app/components/home/Home.html',
        controller: HomeController,
        bindings: {
            name: '<'
        }
    });

    function HomeController() {
        this.name = name;
    }
};

route.js

module.exports = function (app) {
    require('../../services/GitUserService')(app);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/angularhome', {
            template: '<home name="$resolve.message"></home>',
            resolve: {
                message: ['GitUser', function (GitUser) {
                    return GitUser.GetGitUser('test');
                }]
            }
        })
    }]);
};

【讨论】：