1.上层路由
上层的config路由设置，上层相当于中间层的入口，获取url中的参数key 以及.state中的data属性
.state('rs.SPRING_BOOT', {
url:"/SPRING_BOOT/:key",
templateUrl:"pages/probes/tomcat/tomcatoverview.html",
data: {pageTitle:'Spring Boot', routeName:'SPRING_BOOT'},
controller:'TomcatoverviewCtrl',
resolve: {
loadPlugin:function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
files: ['js/plugins/sparkline/jquery.sparkline.min.js']
}
]);
}
}
})
2.中间层controller
即Tomcatoverview这一页的controller
pageTitle,routeName 参数获取
以及传递、回传路由文件中URL项内设定的变量key，key的传递和回传保证跳转页面时不丢失数据，很关键。
(function() {
'use strict';
angular.module('inspinia')
.controller('TomcatoverviewCtrl', ['$scope', '$http', '$state', '$stateParams', '$window', 'AuthService',
function ($scope, $http, $state, $stateParams, $window, authService) {
$scope.key = $stateParams.key;
$scope.pageTitle = $state.current.data.pageTitle;
$scope.routeName = $state.current.data.routeName;
}
]);
})();
中间层HTML 路由<ui-sref>标签配置
<a ui-sref="rs.TOMCATalertmanagement({key: '{{key}}', title: '{{pageTitle}}', route: '{{routeName}}'})">
<div class="col-lg-3">
<div class="ibox">
<div class="ibox-content">
<h5 class="m-b-md">{{'告警管理'|translate}}
<h2 class="text-danger">
<i class="fa fa-warning"></i> Alert
<small>{{'Alarm information'|translate}}
</div>
</div>
</div>
</a>
注释1：
($stateParams.XX 这种写法是从路由文件中定义的url项中获取参数，例如alertmanagement的路由url设置中，url:"/TOMCATalertmanagement/:key/:title/:route",的key,title,route三项
url:"/TOMCATalertmanagement/:key/:title/:route")
注释2：
$state.current.data.routeName，获取config文件中.state里面的的data 属性中的routName值，注意不要忽略current关键字，它代表当前路由
3.第三层路由设置、JS、HTML
第三层：传递参数key，title，route以及data属性，
/*** Alertmanagement ***/
.state('rs.TOMCATalertmanagement', {
url:"/TOMCATalertmanagement/:key/:title/:route",
templateUrl:"pages/probes/tomcat/alertmanagement/tomcatalertmanagement.html",
data: {pageTitle:'Alertmanagement' },
controller:'TomcatalertmanagementCtrl',
resolve: {
loadPlugin:function ($ocLazyLoad) {
return $ocLazyLoad.load([
//calendar
{
insertBefore:'#loadBefore',
files: ['css/plugins/fullcalendar/fullcalendar.css','js/plugins/fullcalendar/fullcalendar.min.js']
},
{
name:'ui.calendar',
files: ['js/plugins/fullcalendar/calendar.js']
},
//forms
{
name:'ui.knob',
files: ['js/plugins/jsKnob/jquery.knob.js','js/plugins/jsKnob/angular-knob.js']
},
{
name:'ui.select',
files: ['js/plugins/ui-select/select.min.js', 'css/plugins/ui-select/select.min.css']
},
//submit button
{
files: ['js/plugins/sweetalert/sweetalert.min.js', 'css/plugins/sweetalert/sweetalert.css']
},
{
name:'oitozero.ngSweetAlert',
files: ['js/plugins/sweetalert/angular-sweetalert.min.js']
}
]);
}
}
})
4.面包屑标签的实现
通过$stateParams注入，引用传递过来的变量
$scope.key = $stateParams.key;
$scope.title = $stateParams.title;
$scope.route = $stateParams.route;
然后在面包屑上引用标签，即可动态显示路径：
<a ui-sref="rs.{{route}}({key: '{{key}}'})">{{title}}</a>
总结：
$stateParams 是获取已在路由url项内定义的参数，如key/:title/:route 这些，它们传递则需要在html中写，如下
<a ui-sref="rs.TOMCATalertmanagement({key: '{{key}}', title: '{{pageTitle}}', route: '{{routeName}}'})">
$state.current.data.pageTitle
current代表当前，即当前层中data属性中的值
网友评论