天天看點

AngularJS中的按需加載ocLazyLoad

初學者,有不足的地方希望各位指出

  一、前言

    ocLoayLoad是AngularJS的子產品按需加載器。一般在小型項目裡,首次加載頁面就下載下傳好所有的資源沒有什麼大問題。但是當我們的網站漸漸龐大起來,這樣子的加載政策讓網速初始化速度變得越來越慢,使用者體驗不好。二來,分子產品加載易于團隊協作,減低代碼沖突。

  二、按需加載的對象

    各個Controller子產品、Directive子產品、Server子產品、template模闆,其實這些都是一些 .js檔案或者 .html檔案 。

    三 、按需加載的場景

    三、1 路由加載(resolve/uiRouter)

      基于uiRouter的resolve是在加載controller和template之前所執行的一系列操作,它幫助我們初始化我們所要前往的那一個視圖。隻有be solved(操作完成),controller才會被執行個體化。是以,我們可以在resolve步驟裡面加載我們所需要的controller。

AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad

    其中,'js/AppCtrl.js'裡面放着一個我們所需要的controller

     三、2 依賴加載

      在依賴項裡面導入我們所需要的一系列子產品(這裡有一層'[ ]'符合哦)

AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad

     三、3 Cotroller裡動态加載

AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad

     三、4 template包含加載(config)

    如何處理我們所加載的html模闆裡面嵌套的controller呢?這裡需要oc-lazy-load指令和$ocLazyLoadProvider的配置

AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad
AngularJS中的按需加載ocLazyLoad

    四、如何組織按需加載

    分路由、按功能來區分、打包成不同的多個或單個controller.directive.server子產品

繼續閱讀