oclazyload的嘗試

https://oclazyload.readme.io/docs
http://www.cnblogs.com/BestMePeng/p/AngularJS_ocLazyLoad.htmlcss

模塊依賴

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'});
                    });
            });
        }
    ]);
}
相關文章
相關標籤/搜索