1、index.html:
<!DOCTYPE HTML>
<html ng-app="routerApp">
<head>
<title>UI-Router路由demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../framework/bootstrap-3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../framework/ng-grid-2.0.12/ng-grid.css">
<script src="../framework/jquery-1.9.1.js"></script>
<script src="../framework/angular-1.3.0.14/angular.js"></script>
<script src="../framework/angular-1.3.0.14/angular-animate.min.js"></script>
<script src="../framework/angular-ui-router.js"></script>
<script src="../framework/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="../framework/ng-grid-2.0.12/ng-grid.debug.js"></script>
<link rel="stylesheet" href="css/app.css">
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div class="container">
<div>aaaaaaaaaaaaaaa</div>
<div ui-view></div><!--子模板页都会自动加载到这个ui-view层中-->
<div>bbbbbbbbbbbbbbb</div>
</div>
</body>
</html>
2、app.js：
var myModule = angular.module("routerApp",['ui.router']);
myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');//默认的触发路径是/index
$stateProvider
.state('index',{//index是状态名
url:'/index',//触发模板加载的路径
templateUrl:'tpls/test.html'
})
.state('addbook',{
url:'/addbook',
templateUrl:'tpls/test1.html'//没有嵌套，直接在父页面的ui-view=''处加载模板页
})
.state('bookdetail',{
url:'/bookdetail',
templateUrl:'tpls/test2.html'
});
}]);
注意一点：在服务器端运行该脚本的时候，一定要在url路径前加上/#号，写成这样才有效：http://127.0.0.1/angularjs/uiRouter/#/addbook