美文网首页我爱编程
Angular ui-route路由状态监听

Angular ui-route路由状态监听

作者: 报告老师 | 来源:发表于2018-02-03 16:18 被阅读387次

    使用ui-route很多的时候需要控制页面跳转。

    而监听路由状态的变化是最开始的切入点,我们可以再注入$location服务进行跳转逻辑管理。

    在ui-route的api-doc中,便给我们介绍了几个event,这样可以使得我们很简单就能知道路由变化的状态。

    以下我就记录一下ui-route0.x版本的监听方法

    var app=angular.module(“app”,[“ui-route”])

    //先配置一些跳转页面

    app.config(“$stateProvider”,”$urlStateProvider”,function($stateProvider,$urlStateProvider){

        $stateProvider.state(“login”,{

            url:”/login”

            templateUrl:”login.html”

        })

    })

    //我们开始初始化全局监听事件

    app.run(“$rootScope”,[function($rootScope){

        //订阅一个监听事件

        $rootScope.$on(“$stateChangeStart”,function(toState,fromState){

        function body.........

      })

    }])

    说明:

    &stateChangeStart是ui-route模块内置的事件

    回调函数的参数是固定的,toState,fomState分别表示“跳转到的状态”、“跳转前的状态”

    这样注册完一个事件,在跳转的时候就会自动监听。响应你给定的一系列逻辑了。

    更多api 可参考源码:https://github.com/angular-ui/ui-router

    相关文章

      网友评论

        本文标题:Angular ui-route路由状态监听

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