Angular ui-route的用法
引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js。并且在html中将路由要插入的位置写上。而在js部分中和angular路由一样在控制台外面写
<body>
<div ui-view></div>
</body>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-ui-route.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module(‘app‘,[‘ui.router‘]);
app.config(function($stateProvider,$urlRouterProvider){
});
</script>
这是基本的情况，之后我们应该建立一个新的html来写
<div>
<a href="javascript:;" style="padding-right: 20px;">page1</a>
<a href="javascript:;" style="padding-right: 20px;">page2</a>
<a href="javascript:;" style="padding-right: 20px;">page3</a>
</div>
并且将这新写的html引入到刚开始的网页中
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when(‘‘,‘PageTab‘);
$stateProvider.state(‘PageTab‘,{
url: ‘/PageTab‘,
templateUrl: ‘PageTab.html‘//所引入的路径
})
});
这样就形成了基本的路由了，之后我们还要在新建几个新的html来充当第二级路由。并且把第二个改成
<div>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>
<div ui-view></div>
</div>
这样子我们angular的子路由效果就形成了。
不足之处，望大家多多指出
时间： 2024-08-08 13:54:39