首先引入
1.angular.min.js
2.angular-ui-router.min.js
引入顺序一定不要错
-----------------------------------------
html部分
<body ng-app="router"> // angular 起作用的地方
<div ui-view> //要显示的位置
<a ui-sref="one"> 第一个</a> //state的名字 one
<a ui-sref="two"> 第二个</a> //state的名字 two
</div>
</body>
--------------------------------------------
script 部分
<script type="text/javascript">
var app = angular.module('router', ['ui.router']); //引入ui.router 就是引入的angular-ui-router
app.config(function($stateProvider, $urlRouterProvider) { //注入的依赖
$stateProvider
.state('one', {
url: "/index1",
templateUrl: "view/page1.html" //第一级的地址 view模板的文件夹
})
.state('two', {
url: "/index2", //第二级的地址 view模板的文件夹
templateUrl: "view/page2.html"
})
})
</script>
-------------
模板 page1
<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>
模板 page2
<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>
------------
进入方法
1.在地址后加 ?/#!/index1
点击 页面中 第一个 第二个 进入
----------------------------------------路由跳转嵌套一层
html 部分
<body ng-app="router"> // angular 起作用的地方
<div ui-view> //要显示的位置
<a ui-sref="one"> 第一个</a> //state的名字 one
<a ui-sref="two"> 第二个</a> //state的名字 two
</div>
</body>
----------------------------------------------------------
script 部分
<script type="text/javascript">
var app = angular.module('router', ['ui.router']); //引入ui.router 就是引入的angular-ui-router
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('one', {
url: "/index1",
views: {
'': {
templateUrl: 'view/page1.html'
},
'view1@one': {
templateUrl: 'view/page1-1.html'
},
'view@one': {
templateUrl: 'view/page1-2.html'
}
}
})
.state('two', {
url: "/index2",
templateUrl: "view/page2.html"
})
$urlRouterProvider.otherwise("/index2"); //网址不对 直接跳转
})
</script>
---------------------------------------------
模板
模板 page1
<!--代码片段-->
<div>
<span style="font-size: 50px; color: gold;">page1</span>
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</div>
模板 page1-1
<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1-1</span></div>
模板 page1-1
<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1-2</span></div>
模板 page2
<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>