无法加载提供商

时间:2016-11-17 17:28:30

标签: angularjs requirejs

我正在尝试使用角度提供程序,因此我可以在我的角度应用程序的$ routeProvider中动态加载子模块。但是,我收到了两个错误之一:

Error: [$injector:modulerr] Failed to instantiate module MainApp due to: [$injector:unpr] Unknown provider: MyRouteProvider

Error: [$injector:nomod] Module 'MainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

以下是我所拥有的:

main.js

require.config({
    baseUrl : '',
    version : '1.0',
});

require([
    'app',
    'my-route-mod/my-route-mod.module',
    'my-route-mod/my-route-mod.provider',
    'main-app/main-app.config',
    'main-app/main-app.run',
    /* other initial modules */
],function(){
   angular.bootstrap(document,['MainApp']);
});

app.js

(function(){
    'use strict';
    /* global angular, $ */

    angular.module('MainApp',[
        'MyRouteMod', /* This module does not want to load */
        'ngRoute',
        'ngCookies'
    ]);
})();

我路由-MOD /我的路由-mod.module.js

(function(){
    'use strict';
    /* global angular */

    angular.module('MyRouteMod',[]);
})();

我路由-MOD /我的路由-mod.provider.js

(function(){
    'use strict';
    /* global angular */

    angular.module('MyRouteMod')
    .provider('MyRouteModProvider',Provider);

    Provider.$inject = [];

    function Provider() {
        var provider = this;
        provider.$get = function () {
            return { route : someFunction };
        }

        function someFunction(){...}
    }
})();

主要应用内/主app.config.js

(function(){
    /* global angular */
    'use strict';
    angular.module('MainApp').config(Config);

    Config.$inject = [
        'MyRouteModProvider',
        '$routeProvider',
        '$locationProvider',
        '$controllerProvider',
        '$compileProvider',
        '$filterProvider',
        '$provide'
    ];

    function Config(
        MyRouteModProvider,
        $routeProvider,
        $locationProvider,
        $controllerProvider,
        $compileProvider,
        $filterProvider,
        $provide
    ) {

        /* ... do some config stuff ... */
    }
})();

的index.html

<!DOCTYPE>
<html>
    <head><title>My App</title></head>
    <body>
        <!-- Some other stuff -->
        <div ng-view></div>
        <!-- Some other stuff -->

        <script src="vendor-stuff"></script>
        <script src="vendor/require.js" data-main="main">/script>
    </body>
</html>

我将requirejs排除在等式之外,并且提供者没有加载时遇到了同样的问题。

我要么认为MainApp不可用,要么MyRouteMod不可用,或者MyRouteModProvider不可用。

建议请。

1 个答案:

答案 0 :(得分:1)

角度命名约定。对于提供者,字符串'Provider'将添加到构造函数名称中。所以,如果你有:

angular.module('MyMod').provider('MickeyMouse',Provider);

然后,angular将查找'MickeyMouseProvider'。所以,如果你这样做

angular.module('MyMod').provider('MickeyMouseProvider',Provider);

然后angular会查找'MickeyMouseProviderProvider'

希望这能为您节省一些时间。