Question

我有一个像这样的提供者：

    angular.module('myApp').provider('test', function(){
    this.$get = function($http){
        return {
            test2: function(){
            }
        }
    };

});

然后我在app.config中使用提供程序：

app.config(function($urlRouterProvider, $stateProvider, testProvider){
    testProvider.test2();
    $urlRouterProvider.otherwise('/home');
    $stateProvider.state('home', {url: '/home', templateUrl: 'template/guide.html'})
    .state('cost', {url:'/cost', templateUrl:'template/cost.html'})
});

我试图使用提供程序从数据库获取我的所有页面并将它们返回到stateProvider ...（我无法在app.config中执行，因为我无法注入$ http服务）

这是我得到的错误：

由于以下原因无法实例化myApp模块：TypeError：undefined is 不是一个功能

Answer 1

您收到错误，因为您正在尝试拨打提供商test2()上的TestProvider。
test2()不是提供者的方法，而是提供的服务的方法（因此只能在＆＃34;运行时＆＃34;，而不是config期间访问）。

如果我理解你正在尝试做什么，这可能是一种方法：

创建DelayedRoutes服务（使用provider()），该服务有一种方法从服务器获取路由，然后将其注册到路由模块（不管是ngRoute或ui.router或其他）。
需要在运行时调用此configRoutes()方法（因此可以访问$http等）。
它还需要访问路由模块的提供程序（例如$routeProvider，$stateProvider等），这些提供程序仅在配置时可用。
您的提供商将拥有一个方法（setRouteProvider()），该方法在配置期间执行并存储$whateverProvider以供日后使用（即configRoutes()获取时在运行时执行。）

以下是一个示例实现（为简单起见使用ngRoute）。您可以根据需要进行修改：

app.provider('DelayedRoutes', function () {
  var routeProvider;

  // This will be called during `config`
  this.setRouteProvider = function (rp) {
    routeProvider = rp;
  };

  // This will return the actual service
  this.$get = function ($http, $route) {

    // This will be called at runtime, to fetch the routes 
    // from the server and configure client-side routing
    function configRoutes() {
      return $http.get('/gimme/ma/routes').then(
        function onResponse(response) {
          var routes = response.data.routes;

          angular.forEach(routes, function (config, path) {
            if (path === 'otherwise') {
              routeProvider.otherwise(config);
            } else {
              routeProvider.when(path, config);
            }
          });

          $route.reload();
        },
        function onError(error) {
          // Handle the error...
        }
      );
    }

    return {
      configRoutes: configRoutes
    };
  };
});

// During `config`, store `$routeProvider` for later use
app.config(function ($routeProvider, DelayedRoutesProvider) {
  DelayedRoutesProvider.setRouteProvider($routeProvider);
});

// At runtime, config the routes
app.run(function (DelayedRoutes) {
  DelayedRoutes.configRoutes();
});

另请参阅此 short demo 。

AngularJS：自定义提供程序，未定义的函数？

1 个答案: