angularjs未捕获错误:未知提供者:

时间:2013-08-16 14:52:45

标签: javascript angularjs gruntjs

我需要一些帮助。我正在学习Angularjs并尝试创建服务。目前我正在尝试将其模块中的所有内容分开。当我创建一个名为(bac.route-manager)的新模块并尝试将其作为RouterService注入应用程序配置时,我得到一个错误,我不理解其含义或如何解决它。我所有的其他东西似乎都有效,除非我试图添加这个模块,这个未知的提供程序只有在我尝试注入它之后才会出现。请任何帮助表示赞赏。

我的错误

Uncaught Error: Unknown provider: RouterService from bac

我的app.js文件

angular.module('bac', [
   'bac.route-manager'
])

.config( function bacAppConfig( $routeProvider, RouterService ) {

     //I dont knwo if i can do this but right now it doesnt matter because of error
     console.log(RouterService.getRoutes());
});

我的route-manager.js文件

angular.module('bac.route-manager', [])

.service('RouterService', function() {

    this.getRoutes = function() {
        return {
                "/login": {
            templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
             requiredLogin: false
         },

        "/dashboard": {
            templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
            controller: 'DashboardController',
            requiredLogin: true
         }

        };

};

});

我使用grunt在我的html文件中生成js包含但是这里看起来像是为了简洁而删除了很多东西。

我的index.html

<html lang="en" class="no-js" ng-app="bac">
    <body>
        <ng-view></ng-view>

     <script type="text/javascript" src="vendor/angular/angular.js"></script>
     <script type="text/javascript" src="app/app.js"></script>
     <script type="text/javascript" src="app/modules/dashboard-manager/dashboard-manager.js"></script>
     <script type="text/javascript" src="app/modules/route-manager/route-manager.js"></script>

    </body>
</html>

1 个答案:

答案 0 :(得分:17)

config阶段,宣布的服务尚未公布。只有使用provide声明的人才会通过serviceNameProvider(在您定义的名称后添加Provider)。例如:

.provide('RouterService', function() {
  var service = { };
  var routes = {
    "/login": {
      templateUrl: 'app/modules/login-manager/partials/login.tpl.html',
      requiredLogin: false
    }, 
    "/dashboard": {
        templateUrl: 'app/modules/dashboard-manager/partials/dashboard.tpl.html',
        controller: 'DashboardController',
        requiredLogin: true
     }};

  service.getRoutes = function() { return routes; };

  this.$get = function() { return service; }

  this.setupRoute = function(data) { /* something here */ };
};

获得提供者后,this上定义的所有方法都可用。当您访问普通服务时,注入的是$get函数的返回。根据您的需要,您需要更改服务以使用provide或要求使用run方法注入服务:

angular.module('bac', ['bac.route-manager'])
  .config(function ($routeProvider, RouterServiceProvider) {
    // Here, only RouterServiceProvider.setupRoute will be available
  }).run(function (RouterService) {
    // Here, the service singleton return with the $get function will
    // be injected
    console.log(RouterService.getRoutes());
});

修改

作为旁注,我相信即使您已将RouterService定义为service,要求RouterServiceProvider仍然有效,但不会出现{{1}的方法本质上是service的包装器,只返回provider

中的函数