Angular-ui-router 详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular-ui-router 详解相关的知识，希望对你有一定的参考价值。
Angular-ui-router 详解
在最近的项目当中，由于需要嵌套 所以用到了前天路由。用了之后感觉不错，挺好的，现在把这个和大家分享出来，
首先整个项目的目录是
首先 页面上需要引入
<script src = "bli/angular。1.5.5.js"></script>
<script src = "bli/angular-ui-router.0.4.2.js"></script>
然后，这是html页面。
<!--
* project:
* site:cbim,
* author：lize,
* time:2017/7/11
-->
<!DOCTYPE html>
<html lang="en" ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>app_nav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href=" css/main.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "bli/angular。1.5.5.js"></script>
<script src = "bli/angular-ui-router.0.4.2.js"></script>
<script src = "js/app.js"></script>
<script src = "js/config.js"></script>
<script src = "js/app_router.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div ui-view = ""></div>
</body>
</html>
接下来 看js页面
先是 app.js页面
var app = angular.module("myApp",[‘ui.router‘,‘ngWaterfall‘,‘oc.lazyLoad‘]);
因为还有到了其他的一些插件所以也注入了一些其他的。
接下来再看 app_router.js
$urlRouterProvider.otherwise(‘/index‘)
$stateProvider
.state(‘index‘,{
url:‘/index‘,
views:{
‘‘:{
templateUrl:‘temp/index.html‘
},
‘[email protected]‘ :{
templateUrl: "temp/header.html"
},
‘[email protected]‘ :{
controller: ‘TestController‘,
templateUrl: "temp/nav.html",
resolve:{
loadMyCtrl: [‘$ocLazyLoad‘, function($ocLazyLoad){
return $ocLazyLoad.load([
‘js/ctrl.js‘
]);
}]
}
},
‘[email protected]‘ :{
controller:‘myCtrl1‘,
templateUrl: "module/a.html",
resolve:{
load: [‘$ocLazyLoad‘, function($ocLazyLoad){
return $ocLazyLoad.load([
‘js/myCtrl1.js‘,
‘js/childRouter.js‘
]);
}]
}
},
‘[email protected]‘ :{
templateUrl: "temp/footer.html"
}
}
})
});
里面用上了懒加载的东西 所以，加上了 resolve函数。
好了 集体看详细的吧 详细地址是在github上：https://github.com/QueerUncle/Angular_nav
写的不是很好看 别见怪哦 这个项目里面不只是ui-router还有一些其他的东西。
以上是关于Angular-ui-router 详解的主要内容，如果未能解决你的问题，请参考以下文章
如何删除 angular-ui-router URL 中的“#”符号