我們的想法是當我們點擊按鈕改變ui路由器同時,我們加載使用oc.lazyLoad js文件和模板。
看下面的例子：
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app" ng-controller="AppCtrl as vm">
<button ng-click="vm.click()">Click Me</button>
<ui-view></ui-view>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="app.js"></script>
</body>
</html>app.js
angular.module('app',["ui.router", "oc.lazyLoad"])
.config(function($stateProvider){
$stateProvider.state('store', {
templateUrl: 'store/store.tmpl.html',
controller: 'StoreCtrl as store',
resolve: {
store: function($ocLazyLoad){
return $ocLazyLoad.load(
{
name: "store", //module name is "store"
files: ["store/store.js"]
}
)
}
}
}
)
})
.controller("AppCtrl", function($state){
var app = this;
app.click = function(){
$state.go('store');
}
})store.js
angular.module("store", [])
.controller("StoreCtrl", function(){
var cart = this;
cart.message = "I'm a message from the controller";
})store.tmpl.html
<div>
<h1>Here we have manyy thing to load!</h1>
{{store.message}}
</div>
