按照传统的操作方式,一般是点击某个按钮或者某个菜单项,我们将页面通过指定URL的方式跳转,
在HTML中,使用的是传统的a标签的href属性作跳转,在使用ui-router的情况下,我们对一个按钮
添加ui-sref属性,即为该按钮对应的路由状态。注意,此处所说的路由URL,都与状态相关。就是之前
在state中配置的那些属性。
关于ui-router的使用不过多详述,再此仅简单示例:
1 .state(‘demoState‘, { 2 parent: ‘site‘, 3 url: ‘/demo/{id}‘, 4 data: { 5 pageTitle: ‘DEMO页面‘ 6 }, 7 views: { 8 ‘[email protected]‘: { 9 templateUrl: ‘demo.html‘, 10 controller: ‘DemoController.js‘ 11 } 12 }, 13 resolve: { 14 datas:[‘MyService‘,function(MyService){ 15 return MyService.query({}); 16 }] 17 } 18 })
demoState是我自定义的一个状态,如果当一个按钮中含有属性ui-sref="demoState({id:1})"时,那么点击这个按钮时候就会跳转到demoState这个路由,其中id:1是给该路由传递的参数与state配置中的url中的{id}相对应,当点击这个按钮时浏览器上的URL将根据state中的url变更为/demo/1,而这个URL对应的视图模板为demo.html,对应的控制器为DemoController.js。到了这一步,就可以在视图的控制器上写逻辑了。
时间: 2024-10-18 23:06:25