一、初始化定义路由
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../org/angular.min.js"></script>
<!--引入包-->
<script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
<div ui-view></div>
</div>
<script>
//加入ui.router模块
var m = angular.module('module', ['ui.router']);
//配置路由
m.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
//默认路由
$urlRouterProvider.otherwise('/index');
//定义路由规则
$stateProvider.state('default',{
url:'/index',
template:'<h1>泠泠在路上</h1>'
})
}])
</script>
</body>
</html>
二、路由跳转
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../org/angular.min.js"></script>
<!--引入包-->
<script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
<a href="" ui-sref="home2">首页</a>
<a href="#/lists">列表页</a>
<div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
//加入ui.router模块
var m = angular.module('module', ['ui.router']);
m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//默认路由
$urlRouterProvider.otherwise('/index');
//定义路由规则
$stateProvider
.state('default', {
url: '/index',
template: '<h1>首页</h1>'
})
.state('home2', {
url: '/home',
template: '<h1>主页</h1>'
})
.state('lists', {
url: '/lists',
template: '<h1>列表页</h1>'
})
}])
</script>
</body>
</html>
三、路由模板设置方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../org/angular.min.js"></script>
<!--引入包-->
<script src="../org/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="module">
<a href="" ui-sref="home">主页</a>
<a href="#/lists">列表页</a>
<div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
//加入ui.router模块
var m = angular.module('module', ['ui.router']);
m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//默认路由
$urlRouterProvider.otherwise('/index');
//定义路由规则
$stateProvider
.state('default', {
url: '/index',
template: '<h1>首页</h1>'
})
.state('home', {
url: '/home',
//路由模板
templateUrl: 'view/home.html'
})
.state('lists', {
url: '/lists',
template: '<h1>列表页</h1>'
})
}])
</script>
</body>
</html>
home.html
<!--可以写任何需要的布局-->
<style>
h1{
background: red;
color:yellow;
height:500px;
}
</style>
<h1>泠泠在路上</h1>
四、路由控制器设置方式
<div ng-app="module">
<a href="" ui-sref="home">主页</a>
<a href="#/lists">列表页</a>
<div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
var m = angular.module('module', ['ui.router']);
m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//默认路由
$urlRouterProvider.otherwise('');
//定义路由规则
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'view/home.html',
//加入控制器
controller: 'ctrl'
})
.state('lists', {
url: '/lists',
template: '<h1>列表页</h1>'
})
}]);
//定义控制器
m.controller('ctrl',['$scope',function($scope){
$scope.name= '百度';
$scope.data=[
{title:'标题1'},
{title:'标题2'}
];
}])
</script>
home.html
<h1>泠泠在路上: {{name}}</h1>
<li ng-repeat="v in data">{{v.title}}</li>
五、控制器或指令中控制路由跳转
在控制器或指令中使用:$state.go(url);进行跳转。
<div ng-app="hd">
<a href="" ui-sref="home">首页</a>
<a href="#/lists">列表页</a>
<div ui-view>提示你:你访问的页面不存在</div>
</div>
<script>
var m = angular.module('hd', ['ui.router']);
m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//默认路由
$urlRouterProvider.otherwise('');
//定义路由规则
$stateProvider
.state('default', {
url: '',
template: '<h1>后盾人</h1>'
})
.state('home', {
url: '/home',
templateUrl: 'view/home.html',
controller: 'ctrl'
})
.state('lists', {
url: '/lists',
template: '<h1>列表页</h1>'
})
}]);
m.controller('ctrl',['$scope','$state',function($scope,$state){
$scope.go=function(url){
//控制器里控制跳转
$state.go(url);
}
}])
</script>
home.html
<h1>泠泠在路上 : {{name}}</h1>
<li ng-repeat="v in data">{{v.title}}</li>
<hr>
<!--跳转链接-->
<a href="" ng-click="go('lists')">跳转到列表</a>