這篇文章主要介紹AngularJS如何使用ocLazyLoad實現(xiàn)js延遲加載，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供鹽亭網(wǎng)站建設(shè)、鹽亭做網(wǎng)站、鹽亭網(wǎng)站設(shè)計、鹽亭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、鹽亭企業(yè)網(wǎng)站模板建站服務(wù)，10余年鹽亭做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

開發(fā)一個系統(tǒng)遇到了一個問題，用angular路由一個html片段，該片段需要使用一個js插件來實現(xiàn)一個富文本編輯器。關(guān)鍵問題在于必須要在片段加載后通過js與dom元素進(jìn)行綁定。一開始想當(dāng)然以為直接把js代碼寫在代碼段里不久ok了，然而經(jīng)過實驗，路由將html片段插入頁面時只能讀取css，無法解析并執(zhí)行js代碼。

google了半天發(fā)現(xiàn)了很多angular+requireJs的解決方案，但我覺得對于我這個場景并不適合，因為requirejs本質(zhì)是一個模塊加載器，按需加載只是他的副業(yè)，我們用它應(yīng)該主要是用它來做模塊化的，如果我們單純?yōu)榱税葱杓虞d卻要試用模塊化語法包裝我們的代碼(define)，感覺有點像用大炮打蚊子，對于我這種需求來說代價巨大。

最后決定使用ocLazyLoad來處理，因為此方案優(yōu)點是，簡單易行無侵入。同時這個方案有些缺點，比如每次動態(tài)加載需要的腳本、模版資源會有很多不必要的網(wǎng)絡(luò)開銷，路由定義比較復(fù)雜（多了一些配置項，其實不能算復(fù)雜，而是繁瑣），對于大型復(fù)雜業(yè)務(wù)應(yīng)用，路由眾多，耗費的精力不可忽視。但是用在我這個場景之中正合適。于是便在github上fork下js,引入到項目中。

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

在需要用到的angular模塊里進(jìn)行配置

var app = angular.module('formCtrlParts', ['oc.lazyLoad']);

再向路由需要用到的控制器里面使用此服務(wù)進(jìn)行js文件的按需加載

 app.controller('addNewBlogCtrl',function($scope,$http,$ocLazyLoad){
  $ocLazyLoad.load('../html/ckeditorjs/ckeditor.js');
})

這樣基本就大功告成，ocLazyLoad有很多種加載方式，也可以配合路由，指令進(jìn)行加載。

以上是“AngularJS如何使用ocLazyLoad實現(xiàn)js延遲加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：AngularJS如何使用ocLazyLoad實現(xiàn)js延遲加載
當(dāng)前URL：http://jinyejixie.com/article46/gceshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、App開發(fā)、全網(wǎng)營銷推廣、小程序開發(fā)、微信公眾號、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)