<html>
<head>
<meta charset="UTF-8">
<title>angular路由</title>
<script type="text/javascript" src="js/angular.js" ></script> //引入angular.js
<script type="text/javascript" src="js/angular-ui-router.js" ></script> //引入angular的路由组件
<body>
<div ng-app="buying"> //设置应用angular模板的范围
<ui-view> //视图：即切换的内容都会显示在这里
</ui-view>
</div>
<a href="" ui-sref="listr"></a> // listr与下面设置的name相同，即请求的页面名称
angular.module('buying',['ui.router']).config(function($stateProvider){
//buying为上面应用的模块；ui.router为依赖的模块；config为配置路由方法；$stateProvider为内置参数，用于配置每个实际路由
//在同一页面配置多个页面时，采用下面方法
var htmls = [
{
name:'listr', //设置页面名称
url:'/listr', //设置浏览器地址的路径
templateUrl:'listr.html' //设置将要显示页面的路径，路径要设置相对于该页面的路径，同一目录下 设置文件名即可
}
];
htmls.forEach(function(state){ //循环设置路由，即使数组只有一个时也要用该方法遍历。
$stateProvider.state(state);
});
//只配置一个页面时，采用下面方法
var html= {
name:'listr',
url:'/listr',
templateUrl:'listr.html'
};
$stateProvider.state(html);
})
</body></html>
1676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
