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
        })

以下是submodule0中定义的一些状态

$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中有关于地图对象的内容：

factory - {string | function}：如果是string，则它是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;
      }
    }
}]);

这里有一些被称为州的def：

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

因为这种方法已经准备好测试服务而不依赖于某些“外部”$ state.current。我们可以通过虚拟，测试参数

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

1 个答案: