您的位置：首页 > 产品设计 > UI/UE

【翻译】oc.lazyLoad with Angular ui router（按需加载文件）

2015-12-14 12:11 841 查看

我们的想法是当我们点击按钮改变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>

原文链接－－>(http://www.cnblogs.com/Answer1215/p/4039374.html)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航