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

Question

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

lum*_*ked 5 javascript angularjs gruntjs

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

我的错误

Uncaught Error: Unknown provider: RouterService from bac

Run Code Online (Sandbox Code Playgroud)

我的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());
});

Run Code Online (Sandbox Code Playgroud)

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

        };

};

Run Code Online (Sandbox Code Playgroud)

});

我使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sim*_*ger 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 */ };
};

Run Code Online (Sandbox Code Playgroud)

当您获得提供者时,所有定义的方法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());
});

Run Code Online (Sandbox Code Playgroud)

编辑

作为旁注,我相信即使你已经将你的定义RouterService为a service,要求RouterServiceProvider仍然可以工作但是不存在任何方法,因为service它本质上是一个包装器provider,只返回该函数$get

归档时间：	12 年，7 月前
查看次数：	8455 次
最近记录：	12 年，7 月前