javascript - 为什么不能在 Angular 配置中使用提供程序？

Question

我正在开发一个 Angular 应用程序。在这个应用程序中，我需要添加一个路由处理程序来执行以下操作

1.监听/app/:appid路由 根据 appid 参数从另一台服务器下载一些文件到这台服务器。

文件看起来像这样

appid
|
|-html
|    |
|    ->index.html
|
|-javascript
     |
     ->app.js

HTML 文件夹和java script 文件夹可能有几个文件。但是index.html 文件肯定在那里。

2.下载文件后，它应该创建一个路由处理程序，如下所示

/appview/appid

指向刚刚下载的 index.html 文件。

我创建了请求处理程序来下载文件。需要参数如下

localhost:port/requesthandler.ashx?appid=myappid

请求处理程序已经过测试并确认其正常运行。文件将下载到 app/apps/appid 文件夹。

然后我创建了 route.config.js 如下

var app = angular.module('app');

app.constant('routes', getRoutes());


app.config(function ($provide) {

    $provide.provider("dataprovider", function () {
        return {
            $get: function ($http,$q) {
                return {
                    getData: function (appid) {
                        var defer = $q.defer();
                        $http.get('requestHandler.ashx?appid=' + appid).success(function (data) {

                            defer.resolve(data);

                        });
                        return defer.promise;
                    }
                };
            }
        };
    });
});

app.config(['$routeProvider', 'routes', 'dataprovider', routeConfigurator]);

function routeConfigurator($routeProvider, routes, dataprovider) {


    routes.forEach(function (r) {
        $routeProvider.when(r.url, r.config);
    });

    $routeProvider.when("/app/:appid", {
        redirectTo: function (routeParams, path, search) {
            $routeProvider.when("/appview/" + routeParams.appid, {
                templateUrl: 'app/apps/'+routeParams.appid+'/html/index.html',

            });


            dataprovider.getData(routeParams.appid);

            return "/appview/" + routeParams.appid;
        }
    });
    $routeProvider.otherwise({ redirectTo: '/dashboard' });
}


function getRoutes() {
    return [
        {
            url: '/dashboard',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        }
    ];
}

当我运行代码时，应用程序停止并给出以下错误。

Uncaught object localhost:6406/scripts/angular.js:3809

angular.js 文件中的特定行说明了这一点。

throw $injectorMinErr('modulerr', "Failed to instantiate module {0} due to:\n{1}",

但是当我从第二个配置中删除参数“dataprovider”时，应用程序运行正常。但后来我无法使用数据提供程序将文件下载到服务器。

删除“dataprovider”行后如下所示。

app.config(['$routeProvider', 'routes',  routeConfigurator]);

function routeConfigurator($routeProvider, routes) {....

谁能告诉我我在这里缺少什么？

Answer 1

您需要在提供者名称后加上“提供者”字符串。

app.config(['$routeProvider', 'routes', 'dataproviderProvider', routeConfigurator]);

function routeConfigurator($routeProvider, routes, dataproviderProvider) {

}

请注意，dataprovider 提供程序已注入(inject)到 config 函数中。此注入(inject)由提供者注入(inject)器完成，它不同于常规实例注入(inject)器，因为它仅实例化和连接(注入(inject))所有提供者实例。