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="parent1">111</a>
<a class="list-group-item" ui-sref="parent2">222</a>
<a class="list-group-item" href="#">333</a>
<a class="list-group-item" href="#">444</a>
<a class="list-group-item" href="#">555</a>
</div>
<div ui-view></div>
<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}}</div>
</script>
<script type="text/ng-template" id="parent1-c2">
<div>this is parent1 child2 page{{test}}</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(‘parent1‘, { //单一视图
url: ‘/p1‘, //显示在地址栏中的url
templateUrl: ‘parent1‘,
controller: ‘p1‘
})
.state(‘parent1‘, { // 一个状态多个视图
url: ‘/p1‘,
views: {
‘‘: {
templateUrl: ‘parent1‘,
controller: ‘p1‘
},
‘[email protected]‘: { //视图名称@状态名称
templateUrl: ‘parent1-c1‘,
controller: ‘p1c1‘
},
‘[email protected]‘: {
templateUrl: ‘parent1-c2‘,
controller: ‘p1c2‘
}
}
})
.state(‘parent2‘, {
url: ‘/p2‘,
templateUrl: ‘parent2‘,
controller: ‘p2‘
});
$urlRouterProvider.otherwise(‘/p1‘);
}]);
myrouter.controller(‘p1‘, function($scope) {
$scope.test = ‘p1‘;
});
myrouter.controller(‘p1c1‘, function($scope) {
$scope.test = ‘p1c1‘;
});
myrouter.controller(‘p1c2‘, function($scope) {
$scope.test = ‘p1c2‘;
});
app.myrouter = myrouter;
return app;
}(uirouterModule || {}));
时间： 2024-08-06 10:54:12