路由(ui-router)
1.1. 環境
- angular.min.js
- angular-ui-router-0.2.10.js
- 確定確定包含ui.router為子產品依賴關系.
- var app=angular.module("app",['ui.router']);
1.1. 視圖激活方式
- $state.Go()：優先級較高的便利方式
- ui-sref：點選包含此指令跳轉
- url：url導航
1.2. 多視圖 Views： 使用views屬性設定多個視圖。如果在單一狀态下不需要多個視圖，則不需要此屬性。提示：請記住，通常嵌套視圖比多個兄弟視圖更有用和更強大。
代碼：準備四個頁面 首頁面和三個子頁面 首頁面
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >柳絮飛祭奠</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a ui-sref="index2">onepage</a></li>
<li><a ui-sref="index1">twopage</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view></div>
<div ui-view="index1"></div>
<div ui-view="index2"></div>
</body>
<script type="text/javascript"
src="plugins/angular/angular.min-1.4.6.js"></script>
<script type="text/javascript" src="plugins/angular/angular-ui-router-0.2.10.js"></script>
<script type="text/javascript">
var app=angular.module("app",['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('index1', {
url : '/index1',
views:{
"index1":{
templateUrl: '/CeShi/lx/uiroute/index1.html'
},
"index2":{
templateUrl : '/CeShi/lx/uiroute/index2.html'
}
}
}).state('index2', {
url : '/index2',
templateUrl: '/CeShi/lx/uiroute/index3.html'
});
$urlRouterProvider.otherwise('/index2');
}]).config(function($sceProvider){
$sceProvider.enabled(false);
});
</script>
</html>
三個子頁面index1.html,index2.html,index3.html分别為
<h1>我是視圖一</h1>
<h1>我是視圖二</h1>
<h1>我是視圖三</h1>
效果為
1.3.嵌套視圖 依舊四個頁面一個首頁面一個子頁面兩個嵌套頁面w
首頁面
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>嵌套視圖</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" target="_blank" rel="external nofollow" type="text/css"></link>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >柳絮飛祭奠</a>
</div>
</div>
</nav>
</div>
<div ui-view></div>
</body>
<script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script>
<script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>
<script type="text/javascript">
var app=angular.module("app",['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('index2', {
url : '/index2',
templateUrl : '/Angular/uiview/nested/index2.html'
}).state('index2.one',{
url:'/nested',
templateUrl: '/Angular/uiview/nested/index1.html'
}).state('index2.two',{
url:'/nested',
templateUrl: '/Angular/uiview/nested/index3.html'
});
$urlRouterProvider.otherwise('/index2');
}]).config(function($sceProvider){
$sceProvider.enabled(false);
});
</script>
</html>
子頁面
[code="java"]<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >柳絮飛祭奠</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="index2.one">onepage</a></li>
<li><a ui-sref="index2.two">twopage</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view></div>
嵌套頁面
<h1>我是視圖一</h1> <h1>我是視圖三</h1> 效果： 
轉載于:https://my.oschina.net/u/3101544/blog/1517700