Question

我想在ui-router配置功能中将我的自定义服务注入角度应用程序。所以我在下面定义了路由器，但是在尝试$ inject服务时我得到错误：未知提供者：Auth。这是代码示例：

 'use strict';

  angular.module('app.project').config(config);

  // This throws error Unknown provider: Auth
  // config.$inject = ['$stateProvider', 'Auth'];

  // This works, but Auth is of course undefined.
  config.$inject = ['$stateProvider'];

  function config($stateProvider, Auth) {
     console.log(Auth);

     $stateProvider.state('default', {
       url: '/',
       template: `<div>default page. </div>
                  <a ui-sref="default">default</a><br>
                  <a ui-sref="projects">projects</a>`,
       data: {
         authorizedRoles: ['admin', 'editor']
       }
     });

  }

这是关于plunker的应用程序的工作检查： https://embed.plnkr.co/yIGMLCdOIHsB945NsHDl/

我想我是以正确的方式注射它。更改要使用的代码＆＃34; iife＆＃34;不会改变任何事情（我已经检查过了）。

Answer 1

根据https://docs.angularjs.org/guide/module：

配置块 - 在提供商注册期间执行和配置阶段。只能注入提供者和常量到配置块。这是为了防止意外实例化服务完全配置之前的服务。

为了能够将服务注入配置，需要使用提供者模式编写：

angular.module('app.main')
  .service('AuthProvider', function AuthProvider() {
    this.$get = ['$http', function factory($http) {
      return new AuthService($http);
    }];
  });

function AuthService($http) {

(...)

Answer 2

只能将提供程序和常量注入配置块。这是为了防止服务在完全配置之前意外实例化。¹

服务只能在AngularJS run阶段或resolver函数中注入：

<强>代码

//function config($stateProvider, Auth) {
function config($stateProvider) {
     $stateProvider.state('default', {
         url: '/',
         template: '<div>default page.'+
                    '<a ui-sref="default">default</a><br>'+
                    '<a ui-sref="projects">projects</a>'+
                  '</div>',
         data: {
             authorizedRoles: ['admin', 'editor']
         },
         //INJECT services in resolve functions
         resolve: {
             role: ["Auth", "$q", function(Auth, $q) {
                 return Auth.getUser().then(function(user) {
                     return user.role;
                 }).catch(function(error) {
                     return $q.reject(error);
                 });
            }]
         }
     });
}

由于存储了解析器函数并且仅在状态尝试加载时调用，因此可以在此时注入服务。

将自定义服务注入ui-router配置会引发错误：未知提供者：[服务]

2 个答案: