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"
                        ]);
                }]
            }
        });

  1. 加载到的js,css没有添加到配置中定义的link 前面,而是在head的底部(可能配置没配对吧)
  2. <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'});
					});
			});
		}
	]);
}
posted @ 2017-05-04 13:00  随心~  阅读(293)  评论(0编辑  收藏  举报