使用 angular-ui-router 将子状态从子模块传递到 angular.js 中的主模块

Question

我这样设计我的 SPA：

angular.module('app', ['submodule0', 'submodule1']);

主模块：

$stateProvider.state("sub0index", {
            url: "/sub0",
            // pass states defined in submodule0, is that possible?
        }).state("sub1index", {
            url: "/sub1",
            // pass states defined in submodule1
        })

这里是子模块0

中定义的一些状态

$stateProvider.state("index", {
    url: "/index",
    templateUrl: "template/index.html"
}).state("info", {
    url: "/info",
    templateUrl: "template/info.html"
})

那么我可以将子状态从子模块传递到主模块吗？我问这个是因为现在我在我的主模块中定义了我所有的状态，我认为在子模块本身中定义一个子模块的状态可能更优雅。

还有一个问题是：我不确定我的模块设计是否合理，我的子模块是否没有必要？或者只是将我的整个应用程序逻辑保留在一个模块中？谢谢。

====已编辑====

这是我遇到的问题。

var app = angular.module('test', ['ui.router', 'app.sub']);
app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('index', {
        url: "/a",
        views: {
            "general": {
                templateUrl: "/template.html"
            }
        },
        resolve: {
            data: 'GetDataService'
        }
    });
}

服务 GetDataService 在我的子模块 app.sub 中定义，这里是服务：

angular.module('app.sub',['ui.router'])
    .service('GetDataService', ['$stateParams', function($stateParams) {

        console.log($stateParams);
        return null; // return null just for demo
    }]);

console.log($stateParams) 的输出是一个空对象。但是如果使用自己模块中定义的服务，则可以正确获取当前状态。那么问题是什么？

===编辑===

感谢您的示例，如果直接给 factory 到 data 就可以正常工作。但是我给它一个字符串怎么样？

我查看了ui-router的文档，resolve中有关于map对象的内容：

factory - {string|function}: If string then it is alias for service.

所以如果我使用这样的代码：

resolve: {
        data: "GetDataService"
}

和GetDataService的定义：

.service('GetDataService', ['$stateParams', function($stateParams) {

    console.log($stateParams);
    return null;
}])

但是 console.log($stateParams) 的输出始终是一个空对象。

我是不是对api document有什么误解？

===再次编辑===

如果我使用这样的代码：

resolve: {
        // data: "GetDataService"
        data: ['$stateParams', function($stateParams) {

            console.log($stateParams);
            return null;
        }]  
    }

我可以得到params对象。

Answer 1

我想说，模块不应该阻止我们...如果需要，我们可以将应用程序拆分成多个。

但我建议：服务应该独立于 $state.current。我们应该根据需要向它们传递函数参数，但这些应该在服务体之外解析。

Bette 会在行动中展示它 - 有 one working example

这是服务：

angular.module('app.sub',['ui.router']) .service('DataService', ['$state', function($state) {

    return {
      get: function(stateName, params){
        console.log(stateName);
        console.log(params);
        return stateName;
      }
    }
}]);

这里是一些调整后的状态定义：

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('index', {
        url: "/a/{param1}",
        views: {
            "general": {
                templateUrl: "tpl.html"
            }
        },
        resolve: {
            data: ['DataService','$stateParams'
            , function(DataService,$stateParams, $state){
                return DataService.get('index', $stateParams)
            }], 
        },
    });
}])

希望对您有所帮助。 plunker link

因为这种方法已经准备好测试服务而不依赖于某些 "external" $state.current。我们可以只传递虚拟的，测试参数

使用 angular-ui-router 将子状态从子模块传递到 angular.js 中的主模块

Pass sub-state from sub-module to the main module in angular.js with angular-ui-router

javascript

angularjs

angular-ui-router