5

我需要一些帮助。我正在学习 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 生成 js 包含在我的 html 文件中，但为了简洁起见，删除了很多东西后的样子。

我的 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>
4

1 回答 1

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为 a service，要求RouterServiceProvider仍然有效，但不会出现任何方法，因为service它本质上是一个包装器provider，仅返回$get

于 2013-08-16T14:57:36.703 回答