当前位置 : 主页 > 网络编程 > JavaScript >

Angular_Ui_Router.Txt

来源:互联网 收集:自由互联 发布时间:2021-06-30
Angular的ui.router路由配置 1、基本使用: angular.module('dnsPage', ['ui.router','sfService']) .config(function ($stateProvider, $urlRouterProvider,vishnuProvider) { $stateProvider .state("dns.insideDNS", {//嵌套路由,路由里
Angular的ui.router路由配置
1、基本使用:
    angular.module('dnsPage', ['ui.router','sfService'])
    .config(function ($stateProvider, $urlRouterProvider,vishnuProvider) {
        $stateProvider
            .state("dns.insideDNS", {//嵌套路由,路由里面有ui-view
            url: "/insideDNS?url&ctrl",//参数传递,一个参数可以'/:url'
            templateUrl:function ($stateParams) {
            return vishnuProvider.rootPath+$stateParams.url+".html";
            },
            controllerProvider: function($stateParams) {
            return $stateParams.ctrl;
            }
            });
            .state("dns.withoutDNS",{
            url:"/withoutDNS?url&ctrl",
            views:{
            '':{//ui-view:一个页面多个路由
                templateUrl:function($stateParams) {
                    console.log($stateParams);
                    return vishnuProvider.rootPath+"/html/withoutDNS.html";
                },
            },
            'content':{//ui-view="content"
                templateUrl:function($stateParams) {
                    console.log($stateParams);
                    return vishnuProvider.rootPath+"/html/withoutDNS.html";
                },
            },
            }
        });
        //$urlRouterProvider.otherwise('/dns/insideDNS?url=%2Fhtml%2FinsideDNS&ctrl=insideDnsController');
        $urlRouterProvider.otherwise(function($injector, $location) {
            //console.log($location,$injector,123);上下相同相同
            $location.url('/dns/insideDNS?url=%2Fhtml%2FinsideDNS&ctrl=insideDnsController');
        });
    })

    //界面使用
    
 
        
   内网解析
        
   互联网解析
    
 

    //JS控制路由跳转,注入$state
    $state.go('dns.insideDNS',{url:'/html/insideDNS',ctrl:'insideDnsController'});

2、常用参数:
    $state.go('photos.detail')
    $state.go('^')到上一级,比如从photo.detail到photo
    $state.go('^.list')到相邻state,比如从photo.detail到photo.list
    $state.go('^.detail.comment')到孙子级state,比如从photo.detail到photo.detial.comment

3、事件监听(1.0以前,可在run中配置):
    $rootScope.$on('$stateChangeStart', 
        function(event, toState, toParams, fromState, fromParams){
        if(toState.data.required && !$rootScope.user){
        event.preventDefault();
        $state.go('content.login');
        return;
        } 
    });
    $rootScope.$on('$stateNotFound', 
        function(event, unfoundState, fromState, fromParams){
        event.preventDefault();
        $state.go('content.notfound');
    });
    $rootScope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams){
        $rootScope.accessLog.push({
        user: $rootScope.user,
        from: fromState.name,
        to: toState.name,
        date: new Date()
    });

4、最新1.0以后版本的路由事件监听:
    .run(function ($transitions,$state) {
        var previousState;
        var previousStateParameters;
        $transitions.onSuccess({}, function (transition) {
            if(transition.to().name==='dns'){
                $state.go('dns.insideDNS',{url:'/html/insideDNS',ctrl:'insideDnsController'});
            }
            previousState = transition.from().name;
            previousStateParameters = transition.params('from');
        });
        $transitions.back = function () {
            console.log(12345);
            $state.go(previousState, previousStateParameters, { reload: true });
        }
    })

5、路由状态的另外判断方法
    VM搭建
    VM补搭
网友评论