angular中按需加載js

  按需加載估計是你們在使用angular以後最想解決的問題吧,由於angular的依賴機制,致使了必須在第一次加載的時候就加載全部js文件,小項目還好,稍大一點的項目若是有上百個js文件,無論是從效率仍是寫法都至關很差。因此此次我使用了$ocLazyLoad來實現懶加載。文檔看這裏html

1.引入js文件,並注入$ocLazyLoad服務git

<script src="lib/ocLazyLoad.min.js"></script>

2.對$ocLazyLoad進行基礎配置github

angular.module('starter')
.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
    function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
        app.controller = $controllerProvider.register;
        app.directive = $compileProvider.directive;
        app.filter = $filterProvider.register;
        app.factory = $provide.factory;
        app.service = $provide.service;
        app.constant = $provide.constant;
    }
])

3.根據模塊配置路由app

$stateProvider
    .state('login', {
        url: '/login',    
        templateUrl: 'template/login/login.html',
        controller:'loginCtrl',
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("template/login/login.js");
            }]
        }
    })

   關於第三方js文件ocLazyLoad就無能爲力了,它是用來懶加載angular module的,而不是第三方的js庫。因此若是考慮到這些可使用requireJS來加載,之因此在這個項目中沒有用過是由於ocLazyLoad比起來更小一些,壓縮事後只有15k大小,並且requireJS移植性很差且侵入性高(其實我也不知道什麼意思,哈哈哈)。還有一點主要的是這個一次配置不用到處引用,挺契合angular模塊化的特色的。至於requireJS的使用,只有下次用過了再來補充吧。ionic

-----------------------------2016-12-15--------------------------------------ide

  上一次使用ocLazyLoad是在ionic項目中,此次在angularWEB項目中使用,搭建的時候出了angular is not defined的問題,怎麼找也解決不掉問題,結果最後改變了一下ui-router和oclazyload的引入位置,問題解決~記住必定要先引入ui-router再引入oclazyload啊模塊化

相關文章
相關標籤/搜索