Question

如何为配置功能和控制器提供相同的功能？我曾两次遇到这个问题：

一项服务，它是特定于我的应用程序的实用程序功能的集合。但app.config功能无法使用服务。
使用ui-router，状态和路由在app.config函数中配置，但我希望控制器中可以使用相同的数据，以便我可以动态生成菜单。

我可以通过将函数或路径数据放在角度以外的全局window范围内来解决这两种情况，但似乎应该有更好的方法。像ui-router如何定义$state和$stateProvider之类的东西，除了我希望它们是相同的。

Answer 1

使用为提供者和实际服务返回相同功能的提供者。

module.provider('GlobalFuncs', function ($resourceProvider) {
    var service = this;
    this.funcOne = function(value) {
        // Do Something
    };

    this.funcTwo = function(value) {
        // Do Something
    };

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

});

从配置中执行：

module.config(function(GlobalFuncsProvider) {
});

来自控制器

module.controller('ctrl', function(GlobalFuncs) {
});

Answer 2

控制器可以使用服务，配置步骤中可以使用工厂。服务和工厂都是provider的特殊类型。使用基本提供程序类型，我们可以为服务和工厂定义API。

app.provider('testService', function(){

  this.providerMethod = function(){ 
    return 'providerMethod'; 
  };

  this.$get = function(){
    return {
      serviceMethod: function(){ 
        return 'serviceMethod'; 
      }
    };
  }

});

app.config(function(testServiceProvider){
  console.log('config', testServiceProvider.providerMethod());
});

app.controller('MainCtrl', function($scope, testService) {
  console.log('controller', testService.serviceMethod());
});

Plnkr

但是这暴露了两种不同的API。如果我们希望它们相同，我们可以这样做：

app.provider('testService', function(){

  this.providerMethod = function(){ 
    return 'providerMethod'; 
  };

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

});

app.config(function(testServiceProvider){
  console.log('config', testServiceProvider.providerMethod());
});

app.controller('MainCtrl', function($scope, testService) {
  console.log('controller', testService.providerMethod());
});

在angularjs中，如何为配置功能和控制器提供相同的功能？

2 个答案: