ui-view替代的是ngroute路由的ng-view。
<div ui-view></div>
複製程式碼簡單的Demo：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="static/asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.active {
color: red; font-weight: bold;
}
</style>
</head>
<body ng-app="helloworld">
<a ui-sref="hello-world" ui-sref-active="active">hello</a>
<a ui-sref="world" ui-sref-active="active">world</a>
<div ui-view style="margin-left: 50px"></div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/home/home.js"></script>
</html>
複製程式碼angular.module('helloworld', ['ui.router'])
.config(function($stateProvider){
$stateProvider.state('hello-world',{
url:'/hello',
template:'<h3>hello world!</h3>'
}).state('world',{
url:'/world',
templateUrl:'../resources/static/components/world/world.html'
}).state('world.world1',{
url:'/world/world-1',
template:'<h3>This is a World 1</h3>'
}).state('world2',{
url:'/world/world-2',
template:'<h3>world2並不依賴於world，在我們點選它的時候，他會替換掉index.html中的<div ui-view></div></h3>'
})
});
複製程式碼先注入了ui.router ，之前我注入的都是ui-router，我特麼還以為是版本的問題。
注意以後，在config對服務進行引數初始化，這裡初始化的是stateProvider。
效果圖：
巢狀路由
巢狀路由顧名思義就是路由裡面還有一個路由，uiroute能做到ngroute做不到的事情，這就是其中一個。
index的JS：
angular.module('helloworld', ['ui.router'])
.config(function($stateProvider){
$stateProvider.state('hello',{
url:'/hello',
template:'<h3>hello world!</h3>'
}).state('world',{
url:'/world',
templateUrl:'../resources/static/components/world/world.html'
}).state('world.world1',{
url:'/world/world-1',
template:'<h3>This is a World 1</h3>'
}).state('world2',{
url:'/world/world-2',
template:'<h3>world2並不依賴於world，在我們點選它的時候，他會替換掉index.html中的ui view</h3>'
})
});
複製程式碼world的HTML：
<div>
<a ui-sref=".world1" ui-sref-active="active">world-1</a>
<br>
<a ui-sref="world2" ui-sref-active="active">world-2</a>
<div ui-view style="margin-left: 50px"></div>
</div>
複製程式碼先看index的JS，world.world1 ，這個.world1就是子路由，同時在world的html裡面，ui-sref裡面也是有帶.的，但是world2是沒有的，所以world2不是子路由，所以當點選world2的時候，他就會替換掉整個ui -view，而不是ui-view裡面的ui-view（子路由）。
子路由：
不是子路由：
ps：template裡面寫這麼亂，是因為我結構就是這麼亂。正確的結構其實我自己也不是很清楚，我這個結構是模仿之前大佬給我看的專案，但是他那個專案是springboot的。我的結構：
通過views實現多檢視
多個示圖時，使用views屬性。該屬性裡包含了哪些ui-view，則對應的template或templateUrl裡的內容就會填充該ui-view。
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過views實現多檢視</title>
</head>
<body >
<div ng-app="myApp" >
<a ui-sref="index">點我顯示index內容</a>
<div ui-view="header"></div>
<div ui-view="nav"></div>
<div ui-view="body"></div>
</div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/view/view.js"></script>
</html>
複製程式碼angular.module('myApp', ['ui.router'])
.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index',
views:{
'header':{template:"<div>頭部內容</div>"},
'nav':{template:"<div>選單內容</div>"},
'body':{template:"<div>展示內容</div>"}
}
})
}]);
複製程式碼效果圖：
ui view的定位
@的作用 是用來絕對定位view，即說明該ui-view屬於哪個模板。如：’header@index’表示名為header的view屬於index模板。絕對和相對路徑的效果一樣
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp" >
<a ui-sref="index">show index</a>
<a ui-sref="index.content1">content111111</a>
<a ui-sref="index.content2">content222222</a>
<div ui-view="index"></div>
</div>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/uiview/uiview.js"></script>
</html>
複製程式碼js：
angular.module('myApp',['ui.router'])
.config(['$stateProvider',function ($stateProvider) {
$stateProvider
.state('index',{
url:'/index',
views:{
'index':{template:"<div><div ui-view='header'></div><div ui-view='nav'></div> <div ui-view='body'></div></div>"},
//這裡必須要絕對定位
'header@index':{template:'<div>頭部內容header</div>'},
'nav@index':{template:'<div>選單內容nav</div>'},
'body@index':{template:'<div>展示內容contents</div>'}
}
})
//絕對定位
.state('index.content1',{
url:'content1',
views:{
'body@index':{template:'<div>content11111111111</div>'}
}
})
//相對定位：該狀態裡的body的ui-view為相對路徑下的（即沒有說明具體是哪個模板）
.state('index.content2',{
url:'/content2',
views:{
'body':{template:'<div>content2222222222222222222222</div>'}
}
})
}])
複製程式碼效果：
URL路由傳參（通過$stateParams服務獲取引數）
有url: '/index/:id',和url: '/index/{id}',兩種形式傳參：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<body >
<div ng-app="myApp" >
<a ui-sref="index({id:30})">show index</a>
<a ui-sref="test({username:'peter'})">show test</a>
<div ui-view></div>
</div>
</body>
</body>
<script src="static/asset/angular/angular.min.js"></script>
<script src="static/asset/angular-ui-route/angular-ui-route-1.0.20.js"></script>
<script src="static/components/stateParams/stateParams.js"></script>
</html>
複製程式碼angular.module('myApp', ['ui.router'])
.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("index", {
url: '/index/:id',
template:"<div>indexcontent</div>",
controller:function($stateParams){
alert($stateParams.id)
}
})
.state("test", {
url: '/test/:username',
template:"<div>testContent</div>",
controller:function($stateParams){
alert($stateParams.username)
}
})
}]);
複製程式碼
和狗子一起成為更好的人。