使用Angular UI-Router将状态作为Ionic Framework中的新路由处理

Question

我正在将Ionic Framework及其AngularJS UI-Router和$ stateProvider用于处理我的应用程序中的不同视图。

但是，我很难弄清楚如何告诉$ stateProvider我得到了不同的“主视图”，每个视图都有不同的子视图。

当我在/#/home ，例如，点击它发送给我一个链接/#/about ，那么/#/about没有得到渲染，因为它是自己的新观点。 相反，它过渡到它，因为它是/#/home的子页面。

当我用AngularJS $ routeProvider替换$ stateProvider时，它应该像应该的那样工作，但是所有转换都消失了。

我创建了一支钢笔供您查看。

http://codepen.io/anon/pen/gBDFi

它们之间不应有过渡。 每个“基本” URL应为一个新的“标签”。

Answer 1

不知道这是否仍然相关，因为它是二月份发布的，我绝不是ng-pro，但这是我的尝试JSBinLink

我做了两件主要的事情，将内容包装在ion-tabs中，并将其作为抽象状态添加到stateProvider中。

使用此结构，您有两个独立的选项卡“主页”，“关于”-注意，没有后退按钮。 但是，如果您导航到“关于”中的“汤姆”，则会显示返回按钮。

还有其他方法可以实现类似的目的，一种是创建子状态等等。

我建议您查看UI-Routers文档。 它写的很好，信息也很丰富-还有一个汤姆·金德伯格（Tom Kindberg）的创作视频在这里解释其主要概念。

希望这可以帮助。

Answer 2

$ StateRouteProvider和$ UrlRouteProvider之间的区别..

$ UrlRouteProvider.otherwise（url）; ->路由到给定的URL。

$ StateRouteProvider.otherwise（state）; ->路由到给定状态。

因此，如果您使用的是ui-router，则无论何时需要更改视图，都请使用$ state.go（）。 在$ location.path（URL）的情况下，例如在从独立状态转换为当前状态的情况下，它将起作用。 如果要通过同一父级下的州进行路由，则必须使用$ state路由。