Javascript 使用angular ui路由器将子模块的子状态传递给angular.js中的主模块
我的水疗中心设计如下:Javascript 使用angular ui路由器将子模块的子状态传递给angular.js中的主模块,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我的水疗中心设计如下: angular.module('app', ['submodule0', 'submodule1']); resolve: { data: "GetDataService" } resolve: { // data: "GetDataService" data: ['$stateParams', function($stateParams) { console.log($stateParams)
angular.module('app', ['submodule0', 'submodule1']);
resolve: {
data: "GetDataService"
}
resolve: {
// data: "GetDataService"
data: ['$stateParams', function($stateParams) {
console.log($stateParams);
return null;
}]
}
主要模块:
$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的输出是空对象。但如果使用在其自身模块中定义的服务,则可以正确获取当前状态。那么问题是什么
==编辑===
感谢您的示例,如果将工厂直接提供给数据,效果会很好。但是我给它一根绳子怎么样
我查看了ui router的文档,在resolve中有关于map object的内容:
工厂-{string | function}:如果是string,则它是服务的别名
因此,如果我使用这样的代码:
angular.module('app', ['submodule0', 'submodule1']);
resolve: {
data: "GetDataService"
}
resolve: {
// data: "GetDataService"
data: ['$stateParams', function($stateParams) {
console.log($stateParams);
return null;
}]
}
以及GetDataService的定义:
但是console.log$stateParams的输出总是一个空对象
我对这件事有什么误解吗
==再次编辑===
如果我使用这样的代码:
angular.module('app', ['submodule0', 'submodule1']);
resolve: {
data: "GetDataService"
}
resolve: {
// data: "GetDataService"
data: ['$stateParams', function($stateParams) {
console.log($stateParams);
return null;
}]
}
我可以得到params对象。我想说的是,模块不应该阻止我们。。。如果需要,我们可以将应用程序拆分为多个 但我建议:服务应该独立于$state.current。我们应该根据需要向他们传递函数参数,但这些参数应该在服务机构之外解决 贝蒂会在行动中表现出来的——确实如此 这是服务:
angular.module('app.sub',['ui.router'])
.service('GetDataService', ['$stateParams', function($stateParams) {
console.log($stateParams);
return null; // return null just for demo
}]);
angular.module'app.sub',['ui.router']
.service'DataService',['$state',函数$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)
}],
},
});
}])
希望能有点帮助
因为这种方法可以在不依赖外部$state.current的情况下测试服务。我们只需通过dummy,testing params就可以了。因为答案是:你可以将你的东西分成许多模块。你甚至可以在一个模块中有父模块,在另一个模块中有子模块。这确实取决于你的需要。但是按设计,UI路由器支持任何方法。注意:根据我的经验,我会使用一个模块来表示状态…可能是延迟加载状态…直到今天,我还没有发现使用多个模块有任何好处modules@RadimK谢谢,我编辑了我的问题并展示了我遇到的问题,它实际上可以用另一种方式修复,但我想知道为什么使用这个问题?我想说,当我们想使用服务,它应该做一些与当前状态相关的事情时,我们应该将当前状态信息作为参数传递…我将用DraftThank附加答案,谢谢,但我仍然有一些问题,我在上面发布了它。答案是-如果不依赖当前状态,则使用字符串。这非常简单方便的方法如何传递函数名…但是如果你需要设置参数-你确实需要设置参数,因为你必须传递一些关于上下文的信息-你不应该使用字符串。使用一个定义了参数的函数…作为我的建议..想展示一下如何。我想告诉你的最重要的信息是:1我们讨论解析:{},几乎是状态2的解析阶段。你想在这个阶段读取当前状态…而我们还没有!所以-我们确实解析内容以进入状态…并使其成为当前状态。这是我的消息。希望有帮助。你的消息非常有帮助。但我发布的最后一个问题是关于$stateParams,带有字符串,我总是得到一个空的object,但通过函数,我可以得到参数obejct,有什么我遗漏的吗?这是关于上下文的。信不信由你….$stateParams作为标准服务或常量,我记得…这就是为什么我们可以通过IoC请求它们。但在我们处于当前状态之前…它们可能包含来自前一状态的参数,可能是空的。这就是为什么我们应该这样做的原因在resolve中使用函数-因为:它提供了对所谓的局部变量的访问-刚刚创建了当前构建状态的$stateParams。这是UI路由器的酷特性