angular框架自身提供的ng-route在一定程度上滿足了我們的需求，但是他只針對於單視圖，比如點擊一個link跳轉到另一個視圖，但是在實際業務中，需要一個狀態對應的視圖中還包含其他的視圖，或者一個狀態對應多個子狀態，每個子狀態對應一個或多個視圖。這時ng-route就不滿足了，所以我們需要使用第三方的路由插件ui-router。
1. 引入依賴
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.3.7/angular.js"></script> <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script> <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script> <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script> <script src="js/angular-ui-router-me.js"></script>
2. html頁面
<body ng-app="routerApp">
<div class="list-group">
<a class="list-group-item" ui-sref="parent0">parent0 <strong>one state --> one view</strong></a>
<a class="list-group-item" ui-sref="parent1">parent1 <strong>one state --> many view</strong></a>
<a class="list-group-item" ui-sref="parent2.c1">parent2.c1 <strong>one state --> child state --> one ciew</strong></a>
<a class="list-group-item" ui-sref="parent2.c2">parent1.c2 <strong>one state --> child state --> many ciew</strong></a>
</div>
<div ui-view></div>
<script type="text/ng-template" id="parent0">
<div>this is parent0 page{{test}}</div>
</script>
<script type="text/ng-template" id="parent1">
<div>this is parent1 page{{test}}</div>
<div ui-view="child1" style="border:1px solid red; width: 400px; height: 300px;"></div>
<div ui-view="child2" style="border:1px solid blue; width: 300px; height: 200px;"></div>
</script>
<script type="text/ng-template" id="parent1-c1">
<div>this is parent1 child1 page{{test}}<P>{{pn}}</P></div>
</script>
<script type="text/ng-template" id="parent1-c2">
<div>this is parent1 child2 page{{test}}<P>{{pn}}</P></div>
</script>
<script type="text/ng-template" id="parent2">
<div>this is parent2 page{{test}}
<div ui-view></div> <!--在含有子狀態的視圖中，必須要有ui-view來作為子視圖的容器--->
</div>
</script>
<script type="text/ng-template" id="parent2-c1">
<div>this is parent2-c1 page{{test}}<P>{{pn2}}</P></div>
</script>
<script type="text/ng-template" id="parent2-c2">
<div>this is parent2-c2 page{{test}}<P>{{pn2}}</P></div>
<div ui-view="grandson1" style="border:1px solid red; width: 400px; height: 300px;"></div>
<div ui-view="grandson2" style="border:1px solid blue; width: 300px; height: 300px;"></div>
</script>
<script type="text/ng-template" id="parent2-c2-g1">
<div>this is parent2-c2-g1 page{{test}}<P>{{pn2}}</P><p>{{pn2cn2}}</p></div>
</script>
<script type="text/ng-template" id="parent2-c2-g2">
<div>this is parent2-c2-g2 page{{test}}<P>{{pn2}}</P><p>{{pn2cn2}}</p></div>
</script>
</body>
3. 配置路由的js
var uirouterModule = (function(app){
var myrouter = angular.module("routerApp", ["ui.router", "ui.bootstrap"]);
myrouter.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('parent0', { //單一視圖
url: '/p0',
templateUrl: 'parent0',
controller: 'p0'
})
.state('parent1', { // 一個狀態多個視圖
url: '/p1',
views: {
'': {
templateUrl: 'parent1',
controller: 'p1'
},
'child1@parent1': {
templateUrl: 'parent1-c1',
controller: 'p1c1'
},
'child2@parent1': {
templateUrl: 'parent1-c2',
controller: 'p1c2'
}
}
})
.state('parent2', {
url: '/p2',
templateUrl: 'parent2',
controller: 'p2',
abstract: true // 提供一個抽象，主要是為了向下提供繼承
})
.state('parent2.c1', { //parent2狀態下的c1狀態
url: '/c1',
templateUrl: 'parent2-c1',
controller: 'p2c1'
})
.state('parent2.c2', { //parent2狀態下的c2狀態
url: '/c2',
views: {
'': {
templateUrl: 'parent2-c2',
controller: 'p2c2'
},
'grandson1@parent2.c2': {
templateUrl: 'parent2-c2-g1',
controller: 'p2c2g1'
},
'grandson2@parent2.c2': {
templateUrl: 'parent2-c2-g2',
controller: 'p2c2g2'
}
}
})
$urlRouterProvider.otherwise('/p0');
}]);
myrouter.controller('p0', function($scope) {
$scope.test = 'p0';
});
myrouter.controller('p1', function($scope) {
$scope.test = 'p1';
$scope.pn ="parentOnly";
});
myrouter.controller('p1c1', function($scope) {
$scope.test = 'p1c1';
});
myrouter.controller('p1c2', function($scope) {
$scope.test = 'p1c2';
});
myrouter.controller('p2', function($scope) {
$scope.test = 'p2';
$scope.pn2 ="parent2Only";
});
myrouter.controller('p2c1', function($scope) {
$scope.test = 'p2c1';
});
myrouter.controller('p2c2', function($scope) {
$scope.test = 'p2c2';
$scope.pn2cn2 = "parent2child2Only";
});
myrouter.controller('p2c2g1', function($scope) {
$scope.test = 'p2c2g1';
});
myrouter.controller('p2c2g2', function($scope) {
$scope.test = 'p2c2g2';
});
app.myrouter = myrouter;
return app;
}(uirouterModule || {}));
* 路由傳參：
傳遞：
1. ui-sref="issue.add({deviceId: device.id})";或
ui-sref="issue.add({device: device})；
2. $state.go('issue.add', {devideId: devideId}); 或
$state.go('issue.add', {devide: device);
配置：
.state('issues.add',{
url: '/add/:deviceId', //普通參數直接在url上傳遞，表現url上
params: {device: null} //// 定義一個空對象，接收數據，同樣也可以傳遞普通參數，但都不會在url上顯示
templateUrl: '/mobile/issue/add',
controller: 'IssueAddMobileCtrl'
})
接收：
$scope.deviceId = $stateParams.deviceId;
有不足的地方歡迎隨時指正