美文网首页
AngularJS 路由

AngularJS 路由

作者: AndyRony | 来源:发表于2018-02-23 13:59 被阅读0次

    ng-route模块中的when()和ui-route的state()都提供了resolve属性。 

    先说路由的部分属性:

    (1)url:就是访问的路径,“/”是最先访问的地址,往后依次类推

               url: '/index_edit/:pageId/:isDefault',携带要传递的参数

    (2)templateUrl:这个state对应的html页面和文件的存放路径,controller必须对应templateUrl

               templateUrl: 'tpl/bench/index_edit.html',

    (3)template:就是不具有单独的html页面,只有一段模板template,没有templateUrl自然就没有controller

    template:'<div ui-view class="fade-in-right-big smooth"></div>'

    例如:

    .state('login', {

                               url: '/login',

                               template:'<div ui-view class="fade-in-right-big smooth"></div>'

                           })

    .state('login.index', {

                                url: '/index',

                                cache: false,

                                templateUrl: 'tpl/login/login.html',

                                controller: 'login'

                            })

    真正的作用就是:login没有真正的页面只有一个template模板,login.index是login的子路由,当路由访问到login.index的时候,对应的页面login.html中的内容会添加到div[ui-view]的div中去,实际效果就变成<div ui-view class="fade-in-right-big smooth" >login.html</div>

    (4)resolve     ,resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置resolve属性等等)。这样的好处就是页面仅会被渲染一遍。

    resolve在state配置参数中,是一个对象(key-value),每一个value都是一个可以依赖注入的函数,并且返回的是一个promise(当然也可以是值,resloved defer)。

    resolve第一种用法:

    另外可参考文章:http://www.cnblogs.com/lovesueee/p/4442509.html

    相关文章

      网友评论

          本文标题:AngularJS 路由

          本文链接:https://www.haomeiwen.com/subject/jqkxxftx.html