ui-router多視圖：頁面上存在的多個ui-view，它們以名字區分；
嵌套視圖：一個ui-view的一個狀態下對應了一個html，這個html里面又有一個ui-view。
視圖之間傳參：用ui.sref="stateName({data:'123'})"或者$state.go("stateName",{data:123})；
傳參的時候目標視圖的state中要定義接收的參數params如url:"/home?data"或者params:{data:null};
在目標視圖的控制器用$stateParams.data接收。
狀態名代表一個狀態，自定義的名字，url對應地址欄中的地址，views的名字對應ui-view的名字。
文件列表：index.html，home.html,home1.html,chat.html,our.html；
index.html內容如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ui-view</title>
</head>
<body ng-controller="myCtrl">
<div ui-view></div>
<a ui-sref="homestate.home1({h1:'home-home1'})">跳到home1頁面</a>
<a ui-sref="chatstate({data:'home-chat'})">跳到chat頁面</a>
<a ui-sref="ourstate">跳到our頁面</a>
<button ng-click="goour()">index下的按鈕跳轉到our</button>
<p>v1狀態:</p>
<div ui-view="v1"></div>
<p>v2狀態:</p>
<div ui-view="v2"></div>
</body>
<script src="http://lib.baomitu.com/angular.js/1.6.4/angular.min.js"></script>
<script src="http://lib.baomitu.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",["ui.router"]); app.config(function($stateProvider, $urlRouterProvider){ $urlRouterProvider.when('',"/home"); $stateProvider .state('homestate', { url: "/home",//控制地址欄跳轉的地址
views:{ //"","v1","v2"是ui-view的名字
"":{ controller:"homeCtrl", templateUrl: 'home.html' }, "v1":{ template:"<p>homestate狀態</p>" } } }) .state("homestate.home1",{ url:"/home1/?h1?id", //params:{h1:null,id:null},//寫法同上;
views:{ "":{ controller:function($scope,$stateParams){ console.log($stateParams.h1);//ui-sref傳參
console.log($stateParams.id);//state.go傳參
}, templateUrl: 'home1.html' }, //由於home1是home的子頁面,所以v1和v2頁面設置是無效的,因為v1和v2不在home頁面里而是在index頁面
} }) .state("homestate.home2",{ url:"/home2", views:{ "":{ controller:function($scope){ // console.log($stateParams.h1);
}, template: '<h2>我是home的子頁面home2</h2>' }, } }) .state("chatstate",{ url:"/chat", params:{data:null}, views:{ "":{ controller:function($scope,$stateParams){ console.log($stateParams.data); }, templateUrl: 'chat.html' }, "v1":{ template:"<p>chatstate狀態</p>" } } }) .state("ourstate",{ url:"/our", params:{"id":null},//或者url:"/our:id"
views:{ "":{ controller:function($scope,$stateParams){ console.log($stateParams.id); }, templateUrl: 'our.html' }, "v2":{ template:"<p>ourstate狀態</p>" } } }) $urlRouterProvider.otherwise('/home'); }); app.controller("myCtrl",function($scope,$state){ $scope.goour = function (){ $state.go("ourstate",{id:"index-our"}); } }); app.controller("homeCtrl",function($scope,$state){ $scope.goour = function (){ $state.go("ourstate",{id:"home-our"}); }; $scope.gohome1 = function(){ $state.go("homestate.home1",{id:"home-home1"}); }; $scope.gohome2 = function(){ $state.go("homestate.home2",{id:"home-home2"}); } }); //注釋：多視圖views可以實現多個ui-view，根據地址或狀態的不同使這幾個ui-view分別顯示不同內容(也可以不顯示)，而且這幾個狀態是同級關系
//而嵌套視圖的子視圖是在父視圖下的，父視圖下應該有ui-view
</script>
</html>
home.html內容如下：
<h1>我是home界面</h1>
<button ng-click="gohome1()">跳轉home1</button>
<button ng-click="gohome2()">跳轉home2</button>
<button ng-click="goour()">跳轉our</button>
<div ui-view></div>
home1.html內容如下：
<h2>我是home的子頁面home1</h2>
chat.html內容如下：
<h1>我是chat頁面</h1>
our.html內容如下：
<h1>我是our界面</h1>