AngularJs ui-router路由

Dear 丶 2021-07-24 20:16 409阅读 0赞

1、引入angular-ui-router.js文件,或引入cdn
    		<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
    		
    2、在angular.module中注入,['ui.router']
    
    3、配置路由
    
    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    				//设置默认页路由，''表示当前页为默认页
    				$urlRouterProvider.otherwise('');
    				
    				//配置路由
    				$stateProvider.state('xx',{
    				//路径为空表示在当前页面
    				url:'',
    				template/templateUrl:'<h1>哈哈</h1>',
    				controller:['$scope',function($scope){...}]或控制器名，同ngRoute一样,在js中创建
    			})
    			.state('xx',{...}).state('xx',{...})
    	}])
    	
    			其中:
    			(1)templateUrl传入的模板中,除了定义html内容外,还可定义css
    					<style>
    						...
    					</style>
    					html内容
    					
    5、路线显示位置
    	在容器标签上添加,ui-view,路由页面将在其中显示
    		如:<div ui-view>页面不存在</div>
    		
    			其中:文本内容将在路由跳转错误时显示
    6、路由跳转
    
    	两种方式:
    	<a href=''#/路径></a>
    	<a ui-sref='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='./angular/user.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>
    	
    	<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',function($scope){ 
    
    }])
    
    app.controller('movieCon',['$scope',function($scope){ 
    	$scope.age=17;
    }])
    
    
    
    
    
    
    
    </script>
    
    </body>
    </html>

模板文件: