您的位置：首页 > Web前端 > AngularJS

AngularJs ui router

2018-01-31 00:09 387 查看

AngularJs ui router是一个用于路由的第三方库，比AngularJs本身的路由更强大和易用

创建一个SPA页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../lib/bootstrap.min.css">
<script src="../lib/angular.min.js"></script>
<script src="../lib/angular-ui-router.js"></script>
</head>
<body>
<div ng-app="helloworld">
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<div ui-view=""></div>
</div>

<script>
var a = angular.module('helloworld',['ui.router']);
//使用config将$stateProvider和$urlRouterProvider依赖注入
a.config(function ($stateProvider,$urlRouterProvider) {
var helloState = {
name:'hello',
url:'/hello',
template:'<h1>这是hello页面</h1>'
};
var aboutState = {
name:'about',
url: '/about',
template:'<h1>这是about页面</h1>'
};
var otherState = {
name:'other',
url:'/other',
template:'<h2>出错啦</h2>'
};
//设置当没有找到匹配的url时的跳转
$urlRouterProvider.otherwise("/other");
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
$stateProvider.state(otherState);

})
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航