oclazyload的尝试
https://oclazyload.readme.io/docs
http://www.cnblogs.com/BestMePeng/p/AngularJS_ocLazyLoad.html
模块依赖
var appModule = angular.module("app", ["oc.lazyLoad"]);
配置
appModule.config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
insertBefore: 'ng_load_plugins_before', // load the css files before a LINK element with this ID.
debug: false,
events: true,
modules: []
});
}]);
<link id="ng_load_plugins_before" />
在路由中加载
$urlRouterProvider.otherwise("/tenant/dashboard"); //Entrance page for a tenant
$stateProvider.state('tenant.dashboard', {
url: '/dashboard',
templateUrl: '~/Mt/tenant/views/dashboard/index.cshtml',
resolve: {
deps: ["$ocLazyLoad", function ($ocLazyLoad) {
return $ocLazyLoad.load(
[
"/libs/jvectormap/jquery-jvectormap-1.2.2.css",
"/libs/jvectormap/jquery-jvectormap-1.2.2.min.js",
"/libs/jvectormap/jquery-jvectormap-world-mill-en.js"
]);
}]
}
});
- 加载到的js,css没有添加到配置中定义的link 前面,而是在head的底部(可能配置没配对吧)
- <script/>自动添加了 async。需要通过promise解决加载的次序问题
直接在controller中加载
(function () {
appModule.controller('myCtr', [
'$scope', '$ocLazyLoad',
function ($scope, $ocLazyLoad) {
$ocLazyLoad.load([
"/libs/jvectormap/jquery-jvectormap-1.2.2.css",
"/libs/jvectormap/jquery-jvectormap-1.2.2.min.js"
]).then(function () {
$ocLazyLoad.load("/libs/jvectormap/jquery-jvectormap-world-mill-en.js")
.then(function () {
$('#world-map-markers').vectorMap({map: 'world_mill_en'});
});
});
}
]);
}