使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理

Posted

技术标签:

【中文标题】使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理【英文标题】:Handle State as new Route in Ionic Framework with Angular UI-Router 【发布时间】:2014-03-04 21:21:10 【问题描述】:

我正在使用 Ionic 框架及其 AngularJS UI-Router 和 $stateProvider 来处理我的应用程序中的不同视图。

但是,我无法弄清楚如何告诉 $stateProvider 我有不同的“主视图”,每个都有不同的子视图。

例如,当我在/#/home 上时,单击将我发送到/#/about 的链接,然后/#/about 不会呈现为它自己的新视图。相反,它会转换到它,因为它是 /#/home 的子页面。

当我用 AngularJS 的 $routeProvider 替换 $stateProvider 时,它的工作方式与它应该的一样,但是所有的转换都消失了。

我制作了一支 Pen 供您查看。

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

它们之间不应有过渡。每个“基本”网址都应该是一个新的“标签”。

【问题讨论】:

我不确定您所说的“子页面”是什么意思。将hide-back-button="true" 添加到两个视图(<view></view>)并从<nav-view></nav-view> 中删除animation="slide-left-right"。这就是你想要达到的目标吗?但是只有在你的“主要视图”之间切换时? 几乎!这正是我想要实现的行为。但我想保留subpages 的滑动动画。对于subpages,我的意思是例如/#/about/tom,其中tom/#/about 的子页面。 【参考方案1】:

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

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

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

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

我建议查看 UI-Routers 文档。 它大部分写得很好并且信息量很大 - 还有一个 Tom Kindberg 的创建视频,通过 here 解释了它的主要概念。

希望这会有所帮助。

【讨论】:

【参考方案2】:

$StateRouteProvider 和 $UrlRouteProvider 的区别..

$UrlRouteProvider.otherwise(url); -->路由到给定的url。

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

因此,如果您使用的是 ui-router,那么无论何时需要更改视图,请使用 $state.go()。在 $location.path(URL) 的情况下,将在从独立状态转换到当前状态的情况下工作。如果您希望通过同一父级下的州进行路由,则必须使用 $state 路由。

【讨论】:

以上是关于使用 Angular UI-Router 在 Ionic 框架中将状态作为新路由处理的主要内容,如果未能解决你的问题,请参考以下文章

ui-router:命名视图(多个)视图,保持一切解耦?

将 Angular UI-Router 与 Phonegap 一起使用

AngularJS:UI-router 警告:尝试多次加载 Angular

使用 Angular ui-router 设置 URL 查询参数而不改变状态

Angular 2、TypeScript 和 ui-router - 如何获取状态参数

深究AngularJS——ui-router详解