您好,登錄后才能下訂單哦!
這篇文章主要介紹AngularJS如何使用ocLazyLoad實現js延遲加載,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
開發一個系統遇到了一個問題,用angular路由一個html片段,該片段需要使用一個js插件來實現一個富文本編輯器。關鍵問題在于必須要在片段加載后通過js與dom元素進行綁定。一開始想當然以為直接把js代碼寫在代碼段里不久ok了,然而經過實驗,路由將html片段插入頁面時只能讀取css,無法解析并執行js代碼。
google了半天發現了很多angular+requireJs的解決方案,但我覺得對于我這個場景并不適合,因為requirejs本質是一個模塊加載器,按需加載只是他的副業,我們用它應該主要是用它來做模塊化的,如果我們單純為了按需加載卻要試用模塊化語法包裝我們的代碼(define),感覺有點像用大炮打蚊子,對于我這種需求來說代價巨大。
最后決定使用ocLazyLoad來處理,因為此方案優點是,簡單易行無侵入。同時這個方案有些缺點,比如每次動態加載需要的腳本、模版資源會有很多不必要的網絡開銷,路由定義比較復雜(多了一些配置項,其實不能算復雜,而是繁瑣),對于大型復雜業務應用,路由眾多,耗費的精力不可忽視。但是用在我這個場景之中正合適。于是便在github上fork下js,引入到項目中。
<script src="js/ocLazyLoad.js"></script>
在需要用到的angular模塊里進行配置
var app = angular.module('formCtrlParts', ['oc.lazyLoad']);
再向路由需要用到的控制器里面使用此服務進行js文件的按需加載
app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){ $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js'); })
這樣基本就大功告成,ocLazyLoad有很多種加載方式,也可以配合路由,指令進行加載。
以上是“AngularJS如何使用ocLazyLoad實現js延遲加載”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。