一个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{indexName}}</h1>
<div class="router-content">
<a ui-sref="R1">R1</a><br>
<a ui-sref="R2">R2</a>
<div ui-view></div>
</div>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
app.controller("myCtrl", function ($scope) {
$scope.indexName = "主页";
});
app.config(function($stateProvider){
$stateProvider.state("R1",{
url:"R1",
template:"<h1>Hello</h1>"
});
$stateProvider.state("R2",{
url:"R2",
template:"<h1>World</h1>"
})
})
</script>
</body>
</html>
- 效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7e727ba064dc449f3cf41f54f0ef4a62.png)
当我们点击相应的按钮就会跳转到相应的界面
代码的解释
<div ui-view></div>
是定义路由模板的展示区域$stateProvider.state
来定义路由对应的模板,他的第一个参数是跟一个状态,也就相当于路由对应的名字ui-sref
就像a
标签的href
属性一样来定义跳转的链接