2016-11-17 105 views
0

我正在嘗試使用角提供程序,所以我可以動態加載我的角度應用程序的$ routeProvider中的子模塊。但是,我得到2個錯誤之一:無法加載提供商

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

角度命名約定。對於提供者,字符串'Provider'被添加到您的構造函數名稱中。所以,如果你有:

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

然後角會尋找'MickeyMouseProvider'。所以,如果你做

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

然後將角度尋找'MickeyMouseProviderProvider'

希望這可以節省一點時間。