angularJS中的ui-router和ocLazyLoad使
2018-05-07 本文已影响48人
简小咖
在angularJs中，index.html 引入
<body ng-controller="AppCtrl">
<div class="app" id="app" ui-view>
</div>
</body>
<!-- Angular -->
<script src="angular.min.js"></script>
<!-- Vendor -->
<script src="angular-ui-router.js"></script>
<!-- lazyload -->
<script src="ocLazyLoad.js"></script>
router.js
var app = angular.module('myApp',
['oc.lazyLoad', 'ui.router']);
//配置路由
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/app/questionList'); //默认页面
//首页
$stateProvider.state('app', {
// abstract: true,
url: '/app',
templateUrl: 'src/home.html'
})
//二级页面
.state('app.questionList', {
url: '/questionList',
templateUrl: '/questionList.html',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load(['/questionList.js']);
}]
}
})
.state('app.questionAdd', {
url: '/questionAdd',
templateUrl: '/questionAdd.html',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load(['/questionAdd.js']);
}]
}
})
});
nav.html
<ul class="nav nav-sub dk">
<li ui-sref-active="active">
<a ui-sref="app.questionList">
<span>列表</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.questionAdd">
<span>添加</span>
</a>
</li>
</ul>
</li>
</ul>
home.html
<div ng-include="'nav.html'"></div>
<!-- content -->
<div class="app-content">
<div class="app-content-body fade-in-up" ui-view></div>
</div>
页面效果
image.png
