一个简单的例子
<!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>
- 效果
当我们点击相应的按钮就会跳转到相应的界面
代码的解释
<div ui-view></div>是定义路由模板的展示区域$stateProvider.state来定义路由对应的模板，他的第一个参数是跟一个状态，也就相当于路由对应的名字ui-sref就像a标签的href属性一样来定义跳转的链接
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
