AngularJs ui-router动态跳转路由

矫情吗；* 2021-07-24 16:13 397阅读 0赞

1、在包含路由的控制器中,注入$state
    2、跳转
    	$state.go('state的第一个自定义名称')

代码示例:

<html ng-app="app" ng-controller="main">
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    	
    	<script src="js/libs/angular.js"></script>
    	<script src="js/libs/angular.route.min.js"></script>
    	<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
     <style>
    	.a{ 
    		color:red;
    	}
     </style>
    	
    </head>
    
    <body>
    <div ng-controller='d1'>
    	<a href="#">首页</a>
    	<a href="#/home">home</a>
    	<a href="" ui-sref='movie'>movie</a>
    	//动态跳转
    	<a href="" ng-click="go('home')">跳转到home</a>
    	
    	<div ui-view>页面不存在</div>
    </div>
    
    
    
    <script>
    var app=angular.module('app',['ui.router']);
    
    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
    
    		//将'/hd'设置为默认页,打开页面自动跳转
    		$urlRouterProvider.otherwise('');
    
    		//创建路由
    		$stateProvider.state('default',{ 
    			//路径为空表示在当前页面
    			url:'',
    			template:'<h1>哈哈</h1>'
    		})
    		.state('home',{ 
    			url:'/home',
    			template:'<h1>home{ {name}}</h1>',
    			//控制器
    			controller:['$scope',function($scope){ 
    				$scope.name='jeff'
    			}]
    		})
    		.state('movie',{ 
    			url:'/movie',
    			templateUrl:'./angular/user.html',
    			controller:'movieCon'
    
    		})
    
    }])
    
    
    app.controller('main',['$scope',function($scope){ 
    
    }])
    
    app.controller('d1',['$scope','$state',function($scope,$state){ 
    
    	$scope.go=function(url)
    	{ 
    		//动态跳转
    		$state.go(url);
    	}
    }])
    
    </script>
    
    </body>
    </html>