84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
a.html
<p ui-view='index'></p>
b.html
<p ui-view='content'></p>
c.html
<p>content1</p>
d.html
<p>content2</p>
a.html中绑定事件触发content视图切换到c.html或d.html
$stateProvider的config应该怎么配置 js里如果手动做切换?
你的问题里缺少一些必要的上下文信息,所以我只能靠推测或猜来补充完整了
任何 SPA 框架的路由系统都是一样的:每一个路由对应着应用程序的状态,而应用程序状态的变化体现在 URLs 的变化上;反之也是,URLs 的变化将会引起路由系统动态的刷新应用程序的状态。
在你的例子,路由的入口只有恒定的一个 ui-view='content',但却要不同的视图(c.html 和 d.html)动态的进入其中,这就意味着 c.html 和 d.html 要对应应用程序的不同状态,路由系统才可以据此而动态的更新。
ui-view='content'
假设你的例子是这样的:
当 /posts/show/c 的时候,ui-view='content' 显示 c.html
/posts/show/c
当 /posts/show/d 的时候,ui-view='content' 显示 d.html
/posts/show/d
于是我们才可以对应到 ui-router 里面:
state 是 posts.show
state
posts.show
动态片段,即 URLs 中可变的部分,对应 state 里的 url,我把它命名为 :name
url
:name
view 的入口是 content@posts.show
view
content@posts.show
这样便足以写出绝大部分代码了:
angular.module('YourApp').config(function ($stateProvider) { $stateProvider.state('posts.show', { url: '/show/:name', views: { 'content@posts.show': { templateUrl: /* TODO */, controller: ... } } }); });
唯一剩下的问题是:当 :name 变化的时候,如何更新 templateUrl?
templateUrl
之前说过的,URLs 的变化会引发路由系统更新应用程序的状态,这些变化在路由系统中被保存在 $params 对象中,我们可以用该对象提取变化的部分并生成正确的 templateUrl。在这里我写一个助手函数来做这件事情:
$params
angular.module('YourApp').config(function ($stateProvider) { $stateProvider.state('posts.show', { url: '/show/:name', views: { 'content@posts.show': { templateUrl: getTemplateUrl, controller: ... } } }); function getTemplateUrl() { return: 'templates/posts/' + $params.name + '.html'; } });
ui-router 这个模块,templateUrl 不只是接收字符串,也可以接收函数的返回值。于是你可以得到:
当 /posts/show/c 的时候,templateUrl 是 templates/posts/c.html
templates/posts/c.html
当 /posts/show/d 的时候,templateUrl 是 templates/posts/d.html
templates/posts/d.html
相应的,在你 index 里的导航链接就要负责切换 /posts/show/:name 的变化,如何生成对应动态片段的链接在 ui-router 的文档里有,自己去找来看吧。
index
/posts/show/:name
我觉得楼上的人打得太复杂,随便看个ui-view的 教程不就好了吗https://scotch.io/tutorials/a...
你的问题里缺少一些必要的上下文信息,所以我只能靠推测或猜来补充完整了
任何 SPA 框架的路由系统都是一样的:每一个路由对应着应用程序的状态,而应用程序状态的变化体现在 URLs 的变化上;反之也是,URLs 的变化将会引起路由系统动态的刷新应用程序的状态。
在你的例子,路由的入口只有恒定的一个
ui-view='content'
,但却要不同的视图(c.html
和d.html
)动态的进入其中,这就意味着c.html
和d.html
要对应应用程序的不同状态,路由系统才可以据此而动态的更新。假设你的例子是这样的:
当
/posts/show/c
的时候,ui-view='content'
显示c.html
当
/posts/show/d
的时候,ui-view='content'
显示d.html
于是我们才可以对应到 ui-router 里面:
state
是posts.show
动态片段,即 URLs 中可变的部分,对应
state
里的url
,我把它命名为:name
view
的入口是content@posts.show
这样便足以写出绝大部分代码了:
唯一剩下的问题是:当
:name
变化的时候,如何更新templateUrl
?之前说过的,URLs 的变化会引发路由系统更新应用程序的状态,这些变化在路由系统中被保存在
$params
对象中,我们可以用该对象提取变化的部分并生成正确的templateUrl
。在这里我写一个助手函数来做这件事情:ui-router 这个模块,
templateUrl
不只是接收字符串,也可以接收函数的返回值。于是你可以得到:当
/posts/show/c
的时候,templateUrl
是templates/posts/c.html
当
/posts/show/d
的时候,templateUrl
是templates/posts/d.html
相应的,在你
index
里的导航链接就要负责切换/posts/show/:name
的变化,如何生成对应动态片段的链接在 ui-router 的文档里有,自己去找来看吧。我觉得楼上的人打得太复杂,随便看个ui-view的 教程不就好了吗
https://scotch.io/tutorials/a...