0004-程序流程2之ui-router大意

  按照传统的操作方式,一般是点击某个按钮或者某个菜单项,我们将页面通过指定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         'content@': {
 9             templateUrl: 'demo.html',
10             controller: 'DemoController.js'
11         }
12     },
13     resolve: {  
14         datas:['MyService',function(MyService){
15             return MyService.query({});    //这里通过resolve注入一些数据,可以将其注入到控制器中使用
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。
到了这一步,就可以在视图的控制器上写逻辑了。

原文地址:https://www.cnblogs.com/whiteHome/p/5425023.html